Web Accessibility
Making Content Accessible
Alt Text
- Every image should have alt text unless it is entirely decorative. Alt text is read aloud by screen readers and helps someone who can’t see the image to be able to have a description of it or know the purpose of the image. This text will also be displayed if the image can’t load.
- Captions do not always make great alt text. And if the caption and the alt text are the same, a person using a screenreader will hear it twice.
- If an image has a quote, or any other text, that text should go in the alt text so it can be read by a screenreader. Text in an image is not searchable.
- If an image is a link, it’s very important to have alt text that lets the user know where the link goes to.
- Portraits can be the person’s name.
- If someone is doing something, in the image, that action should be described.
- Charts and graphics need alt text and need to be explained too.
- Alt text should be a good description but also explain the purpose of the image. Why was this particular image chosen? Why was this image selected for the page? What is the meaning it’s meant to convey? What info or meaning would be missing from the page if the image disappeared from the page?
Link Text
- Link text should be descriptive and let the user know where the link goes to. Link text is the text you highlight and then add the URL link to.
- You should not use “click here” or “more information” as your link text.
- Instead of saying view a document or web page “here,” use the name of the document for your link text or the name of the web page so the person clicking on it will know where it goes to.
- Do not use the same link text on the same page to go to different URLs.
- Don’t have different link text on the page go to the same URL.
- Only use the actual domain or URL as link text if it is short.
- If your link is an image, make sure it has alt text explaining where the link goes to.
- The visitor should know where they are going when they click the link.
- Links themselves should be underlined to be most accessible or highlighted in some other way.
- Let people know if they are leaving the website when they click a link.
- Link text should match the title of the page it will bring you to if possible.
Moving Images & Video
- Images, videos, GIFs should not be on an endless loop without controls to stop it.
- Videos should not play automatically when landing on a webpage. Videos on autoplay make it very difficult for a person using a screenreader to navigate the site or find the button to close out of the video as the video sound can overpower the text they hear on the page; they may abandon the page.
- Don’t put video behind text.
- Don’t use non-consensual sound. This is sound that plays without the user’s interaction.
- Give people the ability to stop or pause animations or slideshows/carousels.
- People read at different speeds, so giving people the option to pause, allows people to read a slide or view an image at their pace.
Transcripts and Captions
- All videos should have captions
- All audios should have transcripts
- YouTube’s automatic captions are not automatically accessible. Editing may be needed to make them match the source content.
Field Labels
- It is important to have labels for forms.
- Placeholder text disappears when you type so the user can’t see what the name of the field is. This can be confusing for users.
- Gray text on a gray background can be hard to read.
- Putting sample field answers instead of the actual name of the field can be confusing for users if it’s not clear what input is being asked for.
Time-sensitive Interactions
- If your form times out to protect data, there needs to be a way for the user to click to restart the clock and continue filling out the form.
- There should be an ok / cancel message that is displayed for at least a minute.
Content
Titles
- Be aware that if all of your page titles start with the same word(s) when they are bookmarked it will be difficult for users to differentiate which page is which from their bookmarks list.
Images
- Images should be of good quality and size so that they are not too big or too small on mobile, or too blurry on large screens.
- Images file size should be kept small when possible so that they can load on devices with slower internet speeds.
Text
- Be aware of the size of your text. Content becomes inaccessible when the text is hard to read because of a too-small font size.
- Make sure that your text has high color contrast.
Icons
- Icons should have a clear key or alt text to indicate what the icons mean.
- Use standard icons whenever possible.
- Don’t assume that the user will know what your icon means. Sometimes people associate different meanings or context with an icon so be clear and state what it means.
Directions
- Use clear directions. Make sure the steps are simple and clear and on the same page.
- Try to indicate which steps are taken and which are completed.
- Don’t break something simple into multiple steps when really it could be just one step.
- Make sure it’s visually clear what the order of the steps is.
Resources
PDFs
Writing Content
W3C Writing for Web Accessibility
Email Marketing
Mail Chimp Accessibility in Email Marketing
Social Media
How to Be More Accessible on Social Media
UC Berkeley
UC Berkeley’s Web Access Requirements
WCAG Level Standards
WCAG Level 2.0 Level AA Standards
How to Meet WCAG (Quick Reference)
Color Contrast
WebAIM Contrast and Color Accessibility
Captions, Transcripts & Audio Descriptions
WebAim Captions, Transcripts & Audio Descriptions