Website accessibility can quickly become overwhelming: What’s the correct color contrast? How do I ensure every page has appropriate headings? What are container elements, and why is Siteimprove (the accessibility tracker we use at UCSF) telling me I have to fix thousands of them?
This was what the UCSF Health web team encountered when we started tackling the accessibility of our two patient-facing sites, ucsfhealth.org and ucsfbenioffchildrens.org. We quickly realized we’d need to break down our accessibility work into categories and manageable chunks rather than trying to tackle everything at once.
This led to us looking at alt text as its own mini-problem to solve. And in doing so, we created an alt text style guide, which ended up being a great solution for our immediate problems – how to add and improve the alt text on our websites – and a good road map for delving into other accessibility issues.
The challenges
Our pediatric and adult health sites are large – totaling more than 11,000 pages – and unique. Our team both creates content and works with content from the dozens of department stakeholders who send us items to feature (PDFs, images, text) – in fact, our portal for website updates gets an average of 150 new requests a month! The staff of the UCSF Health web marketing team, like many UCSF teams, is mostly remote. We work with more than 10 contractors in different time zones and even different countries, so it can be difficult for everyone to meet.
Our work, therefore, has always been two parts: the actual tasks to improve accessibility and the education that goes along with this. We work closely with Jill Wolters, who leads digital efforts at UCSF, and we bring what we learn from her – and from our UCSF colleagues during digital accessibility office hours Jill hosts – back to our team.
Our two-person team needs to translate the theoretical tenets of web accessibility into procedures and workflows, get those new systems approved by management, then share and implement them with the rest of the web marketing staffers and broader team of editorial and web production contractors, while also educating the dozens of other UCSF departments requesting website changes to meet these new accessibility requirements.
How we did it
Since our team already relies on documentation to communicate processes and changes, we realized that a style guide specifically for writing alt text would be the best way to overcome these challenges. Anyone with the style guide would be able to write alt text, which would make breaking the work down easier. We wanted to avoid a situation where only a few people were alt text “experts,” limiting the people who could do this work and our team’s overall progress.
The first thing we did was come up with a basic structure that would meet our style guide needs. What were the UC-wide Web Content Accessibility Guidelines (WCAG) we’re required to follow? What does Siteimprove require from our alt text? One of the biggest questions around alt text is when to add it, and specifically, when to mark an image as decorative so a screen reader knows to skip over it. We asked ourselves: What are the most common images our team gets asked to put online and produce, and could we break them down into categories that would allow people to quickly come to a decision on whether they needed alt text?
I created a ticket with some general guidelines and sent it to one of our editorial contractors, who created a rough draft of the style guide. I then added some sections, clarified some things, marked some questions, and sent it to one of our staff editors, who maintains our site style guides. She made more edits and flagged more questions, which I incorporated into the document. I brought our outstanding questions to the monthly digital accessibility office hours that Jill hosts. These are a great opportunity to connect with UCSF colleagues around this work and get info about resources and solutions from people who’ve been down the same path.
After we had a finalized draft, we sent it to our manager for final feedback. She raised some important questions, and I incorporated her edits. This way of building the style guide, layer by layer, encouraged all of us to bring our experiences and knowledge to the project, resulting in a more comprehensive and useful document.
What our style guide covers
- When an image needs alt text and when it should get the decorative, or null, alt text value.
- UCSF-specific style notes (e.g., writing UCSF with spaces – U C S F – so that a screen reader reads it correctly).
- When an image is too complex for us to add alt text and whether to therefore ask a department or stakeholder to add alt text
- When to forgo alt text and instead add information to a caption or nearby text field.
- While this is mainly a style guide, we included production documentation about where in our content management system people should add the alt text. During this process, we also tested whether alt text was showing up correctly on pages by confirming with Siteimprove and the HTML.
- Examples of “bad” alt text to show what not to do.
- Coverage of what to do for various images, including ad campaign images, provider headshots and graphs.
What helped
- We hosted the internal version of our guide in Google Docs. Since we use Jira and its wiki, we also have a link to it there, so anyone searching can easily access it.
- To introduce people to the idea of alt text, I created a PowerPoint presentation (hosted in SharePoint for easy sharing), including audio describing the slides for people who prefer to learn via audio.
- We shared the presentation and alt text guide in Slack, so more people on our broader team could familiarize themselves with it.
The results
The guide has proved to be a helpful resource. It’s now easier to get alt text created and added to the site, since we can simply create a ticket, link the style guide, and assign the ticket to any of our editorial contractors, knowing they have everything they need to create good alt text, even if they’ve never done accessibility work before. When we’ve had to create alt text for new situations – such as outcomes graphs and public transit maps – this guide has allowed us to easily and successfully create alt text.
Alt text is a small slice of the accessibility pie. But by creating a system that anyone can learn and use, it brings our greater accessibility goals within reach.
Our style guide
Here is a link to our UCSF Health Alt Text Style Guide that anyone at UCSF is welcome to use. We encourage you to use it as a jumping off point for your own work and documentation in this area.
Author
Shelby Pope
Contract Employee, U C S F
Cover Image Altext: Aerial view of U C S F Parnassus Campus.” (The separated out acronym is important for screen reader readability.) Credit Matt Beardsley, UCSF