Inclusive Design Workshop #1: Accessibility and Web Images
Date:
Jump to section:
Overview
- The workshop was a 110 minute introduction to inclusive design and image accessibility designed for CLIMATE Justice Initiative fellows at UC Irvine.
- No preparation or previous experience with web design or accessibility was required.
- The workshop format was virtual and held as a Zoom Meeting. Participants interacted with Google Slides, Zoom polls, Zoom chat, and Zoom breakout rooms.
- My focus on alternative text for static images intervenes on the problem of high volumes of inaccessible media published by universities and research organizations online.
- I incorporated strategies, recommendations, and resources largely from Blind/low vision individuals and communities online.
Testimonials
Participant feedback generally described the workshop as an engaging introduction to accessibility through alternative text practices.
“I like how Thi got the class engaged. It was a fun and learning journey for me”
The workshop also sparked newfound awareness and knowledge about the inclusive design through interactive group activities and hands-on exercises.
“Dr. Thi did a wonderful job explaining the importance of different inclusive practices and also lead an engaging activity via zoom. It was the first time I had been part of a workshop that focused on inclusive design.”
Participants Background
The group of fellows consists of postbaccalaureate and doctoral students trained in a range of science and social science fields. Fellows have learned about principles of research justice and communication skills for environmental scholars.
The workshop began with a poll to establish baseline experience with alt-text and screen readers. One quarter of respondents have never heard of the term “alternative text”.
When asked about screen reader software usage, half of respondents did not have any previous experience with screen reader software. There were no responses indicating greater than a moderate amount of experience.
Workshop Structure
Introduction and software demo
- Conceptual exploration of the social model of disability, misconceptions about blind users and technology, definitions of assistive technology, alternative text, and captions
- Demonstrated NonVisual Desktop Access (NVDA) screen reader software on images from geoscience organization websites
Application Part 1: Individual practice
- Participants learned how to check for alt-text on existing images and learned about the difference between alternative text and captions
- Participants individually practiced writing 1-3 sentence alt-text descriptions and submitted via Zoom chat. They were instructed to submit responses at the same time. Overall, they worked with 6 example images, which include photos, simple graphics, and data visualizations
- Most practice images for exercises had suitable, existing alt-text for the images. Providing links to these source encourages participants to access alt-text information independently to compare their work.
The following table shows various statistics from Zoom chat log. Key insights:
- The delay in response time improved for activity #2 and activity #3, however, increasing the allotted time to 1.5 minutes would be beneficial, as communicated by some participants in the chat and feedback.
- Activities #4, 5, and 6 were data visualizations with increasing complexity, reflected by the average word count.
- The final image, Activity #6 had the lowest response rate of 56% response. It is possible that more time allotted may have helped, but I suspect participants may have been fatigued, away from the desk, or left the Zoom early.
- A total of 232 words, on average, was written by each participant after 10.5 minutes of this exercise.
| #1, Photo of animal | #2, Photo of notable person | #3, Flyer | #4, Line graph | #5, Heat Map | #6, Map with data with text | |
|---|---|---|---|---|---|---|
| Time Allotted | 1 min | 1 min | 1 min | 2.5 min | 2.5 min | 2.5 min |
| Number of responses | 15 | 14 | 12 | 12 | 12 | 9 |
| % participants responding [1] | 94% | 88% | 75% | 75% | 75% | 56% |
| Average word count | 20 | 23 | 29 | 53 | 60 | 47 |
| Responses with delay of 0-1 seconds [2] | 9 | 2 | 11 | 11 | 6 | 5 |
| 2-3 seconds | 3 | 1 | 1 | 4 | 3 | |
| 3-4 seconds | 2 | 1 | ||||
| 5-6 seconds | 7 | |||||
| 7-8 seconds | 1 | |||||
| More than 8 seconds | 1 | 4 | 1 | 1 |
[1] - This assumes the same number of participants were present from beginning to the end. However, some may have started late or left early
[2] - Number of responses showing the delay in response time, calculated using the individual response time relative to the time of first response entered after verbal instruction to submit
Application Part 2: Small group breakout task
- Participants join breakout rooms to write alt-text for each other’s work from a previous collaborative Google Slide deck of community-based project overviews from Week 1 of the term.
- Held a large group debrief where each breakout group explained their alt-text choices and process, followed by comments from original group members about the accuracy, context, and other information.
After 15 minutes of completing the task in breakout rooms, alternative text had been written for a total of 17 out of 22 images (77%). This shows that collaborative alternative text writing for unfamiliar/novel images is highly efficient. Dividing up the workload likely results in less fatigue than writing alternative text continuously (as in Application Part 1)
Closing Discussion
We closed with a discussion about how accessibility efforts can be supported by institutions.
I shared trends from Twitter posts made by 4 university departments over a 2-week period from 1/24/24 to 2/7/24. These departments were chosen because they have posted actively and consistently since January 2024. Original posts, retweets, and duplicate posts (e.g. reminders) were included. Results reveal several opportunities for improvement:
- None have published alt-text for 100% of images. The highest is SIO at 73%.
- UCI department of Social Ecology is particularly notable for publishing the highest volume of 68 posts (averaging 5 photos per day). However, less than 10% contain alt-text.
- The lack of any alt-text (0%) from UCI Earth System Science (ESS) reveals a clear need to increase alt-text usage and follow the example of other geoscience departments, URI Graduate School of Oceanography and Scripps Institution of Oceanography.
| Twitter Handle | Without alt-text | With alt-text |
|---|---|---|
| @URIGSO | 3 | 4 |
| @Scripps_Ocean | 7 | 19 |
| @uciess | 11 | 0 |
| @Social_Ecology | 63 | 5 |
A closing discussion further reveals opportunities, challenges, and suggestions for further reflection about maintaining alternative text standards among diverse teams and web platforms.
Resources (abridged)
The original workshop slides contain over 20 links to useful resources. Some are listed below.
- Lynch, M. “UC Access Now Demandifesto” Internet Archive. July 26, 2020. UC Access Now. Written by Megan Lynch using input from disabled UC students from several campuses as well as some faculty. Contains useful terms and concepts and fundamental action steps that the UC should take.
- Web Accessibility Initiative (WAI). Complex Images shows example descriptions and structure in HTML.
- Benetech DIAGRAM Center. Image Description Guidelines. A comprehensive reference document with dozens of examples of different kinds of charts/diagrams.
- Twitter accounts
- @HabenGirma. Haben Girma, JD, Harvard Deafblind lawyer, often posts about daily experience as a traveling human rights lawyer
- @BlondeHistorian. Dr. Amy Kavanagh often posts about daily experience navigating public spaces with guide dog and as a new parent.