You must first become a master ninja before moving on to the next course.
Summary
Each time new content is created, or existing content is updated, it must be made accessible. For this reason, we've put together a checklist of the most common, content related, accessibility issues and how to fix them. Below you will also find a few links to tools that will aid with detecting accessibility issues. The expectation is that these tools will become part of your workflow and simply be one additional step to take when adding, or updating, web content.
Checklist
Headings, and other structural elements (such as lists), help to build a document outline and provide context to the content which is used by assistive technology.
- Headings should be used to build a document outline, and heading levels should not be skipped (don't use a heading level 2 followed by a heading level 4).
- Use headings properly by applying a heading level to heading text rather than applying a style or format to text (such as bold). Conversely, don't use heading levels purely for stylistic appearance and instead use the proper heading level and then apply the necessary appearance styles to the heading (such as font size and weight).
For additional details see the Accessibility: Headings guide.
Links are what allow website visitors to navigate the website and find the content they need. Most web browsers and assistive technology (such as screen readers) allow users to skip around the content of the page and read the text for each link.
- Ensure that the link text makes sense and is informative when read by itself. There should never be links or buttons with the text of "Click Here" or "Read More" as this will be read aloud by a screen reader and provide no context as to what "Click Here" does. This also prevents another accessibility issue where multiple different links point to different URLs with the same link text such as "More Info" or "Program Details".
For additional details see the Accessibility: Links guide.
Images are great for design and can provide a lot of information, however on their own they're useless for those with a vision disability.
- All images need alt (alternative) text descriptions. These descriptions should be short, concise, meaningful, and relate to the context in which the image is being used.
For additional details see the Accessibility: Images guide.
Videos are increasingly being used for design and can improve a websites engagement, however they pose challenges to both individual with vision and hearing disabilities.
- All audio must have an accompanying transcript.
- All video must be captioned. This includes 3rd party videos placed on your website. Also, this takes time and is an added expensive if contracted-out (such as 3Play Media), so plan accordingly.
- We recommend using YouTube for all videos as their captioning and transcript tools and features are well established.
For additional details see the Accessibility: Audio and Video guide.
Color is an important part of design and part of what sets the mood and tone of a website, however color alone must not be used to convey meaning, or the only source of context. There must also be adequate levels of contrast between foreground colors (text) and background colors.
- When using color to convey meaning, or provide context, be sure there is a text description also available.
- Check for adequate levels of contrast between foreground (text) and its background. For example, there should never be light-gray text on a white background. The Accessibility Checker tool can help to identify these problems and ensure proper levels of contrast.
For additional details see the Accessibility: Colors guide.
In addition to the other types of content, uploaded documents, such as PDFs, Word documents, and PowerPoint presentations material all must be accessible. Where possible, we recommend using PDFs over other file formats.
- Only upload and link to documents that have first been verified to be accessible.
For additional details see the CSU Accessibility by Design: PDF Accessibility Checkers page.