The Top 10 Most Common Accessibility Missteps
Digital Accessibility - or the practice of ensuring users with and without disabilities are equally able to access and interact with websites - is a critical element of web design. As members of the Stanford community, we understand that making our institution more inclusive is essential to meeting our education standards. As the owner or content editor of a Stanford website, you must conform to the Stanford University Online Accessibility Policy outlined in the Stanford Administrative Guide 6.8 .
This guide will cover the top 10 most commonly made accessibility errors and ways to prevent or remediate them.
The Stanford Office of Digital Accessibility (SODA) will always be the best place to access information about creating and maintaining accessible web content, documents, and other files. We highly recommend bookmarking their site and referring to it regularly.
Jump to:
Web Content Must Be Descriptive
Web Content includes images and link texts. Users who rely on assistive technologies, such as users who are blind and utilize screen reading software, will have trouble navigating your website if it lacks appropriately descriptive images and links.
Misstep 1: Images are missing Alternative Text ("Alt Text")
Images on web pages provide not only visual appeal, but many times also convey important information. Alternative text, called Alt Text for short, improves accessibility by providing a text equivalent of the information presented visually. Including Alt Text with your images ensures all individuals, regardless of visual ability, can engage with your content.
What is Alt Text?
Alt Text should be:
- Accurate: including spelling, grammar, and proper punctuation.
- Concise: using the fewest words possible while providing a meaningful description for the image. Aim for 150 or fewer characters.
- Equivalent: presenting the same content and/or function of the image.
"Good" Alt Text conveys what an image communicates, not necessarily what it contains. The same image can be used in a variety of ways, so the intention of the image is what needs to be captured. This means there isn't any single correct Alt Text for an image! In fact, if an image is used in multiple places on your site, the Alt Text may need to be different depending on its use.
Example
For instance, a picture of a child kicking a ball might have been selected because of the setting, the child, the kick or the ball. The Alt Text will be different depending on the intention of its inclusion:
- "Child happily kicking a ball on a summer day." (image chosen for the setting)
- "Sonia playing soccer in her new team uniform." (image used to feature the child)
- "Sonia's game-winning kick curved in from the left sideline!" (image used to highlight the kick)
- "The "medium" ball is the right size for this 9-year-old child." (image used for the ball)
In all of these examples, the Alt Text is accurate, concise, and equivalent while conveying the image's purpose.
General Tips for Images
There are multiple pitfalls that content editors can fall into when adding imagery to their pages. To ensure you don't fall into a pattern of uploading images without Alt Text, be sure to:
- Upload images via the "Add Media" button in your editor rather than simply copy/pasting the image into your Text Area.
- Uncheck the "Decorative Image" option when uploading a new image to pull up the field where Alt Text is added. Don't forget to add photo credit while you're in this section!
Misstep 2: Images are used as flyers that contain important event details
While it might be very tempting to create a flyer for your event and use that as the image on the event page, doing so is inaccessible for users who rely on screen reading software. Additionally, images of flyers often fail to meet color contrast requirements and can be hard for sighted readers to decipher. The best practice is to avoid including images of flyers on your site.
If you must use an image of a flyer, Alt Text isn't sufficient. Instead, a Text Description below the image is necessary. A Text Description gives a word-for-word copy of the text in the image, such as in this example. You'll also notice that this flyer is very hard to read because the color of the font doesn't meet Color Contrast requirements, the text is too small relative to the image, and the text overlaps portions of the image without an adequate contrasting background. For these reasons, using images of flyers is strongly discouraged.
Misstep 3: Link Text isn't helpful
3a: Link Text isn't adequately descriptive
Often, content editors fall into the trap of writing very generic Link Text, such as "Here" or "Read More" or "Learn More." This may be confusing to any user, but poses unique challenges for users who rely on screen reading software.
Such software is able to pull up a list of all of the links on a page, which allows users to quickly get to the link they're looking for. This results in Link Text being read out of context. "Here," "Read More," and "Learn More" aren't very helpful to a person trying to discern what content they might view after following these links.
Some examples of adequate Link Text include:
- Learn about the basics of vaccines at the CDC.
- Familiarize yourself with the Stanford Honor Code .
3b: Link Text Must be Unique
Every hyperlink on a page must be unique, unless the links point to the exact same URL. For instance, if you've created a page that provides an introductory overview of all of your academic programs, you will need to ensure the links to each are both descriptive and different from each other.
Even though your page might be separated into three sections, one per academic program, the links cannot simply say "Learn more about our program" at the bottom of each section. Instead, links should look something like this (where the bolded text would instead be a link to the respective program):
- Learn more about our undergraduate program
- Learn more about our M.S. program
- Learn more about our Ph.D. program
3c: Links should not include spaces or punctuation before or after text
To ensure compatibility with all types of assistive technologies, be sure that your Link Text starts and ends with a letter. Do not include a space before the first letter or after the last one. Additionally, if the link is at the end of a sentence, do not include the punctuation at the end. This causes issues with screen readers and other technologies.
Example:
- This link takes me to Google (good)
- Example 1 (good)
- This link takes me to Google. (includes initial space and final punctuation; bad)
- Example 2 (bad)
Text Must Follow a Logical Order
Misstep 4: Headings are used improperly
4a: Heading levels are used out of order
Think of headings as a Table of Contents for your page. Users rely on headings to understand how a section of content fits into the big picture. When headings are used correctly, the contents are organized in a manner similar to a bulleted list. This is done by following a predictable structure, for example something like this:
- Heading 2: Main Point
- Content related to this main point
- Heading 2: Main Point
- Heading 3: Sub point
- Content related to this subpoint
- Heading 3: Sub point
- Content related to this subpoint
- Heading 2: Main Point
When editors jump around between heading levels, it is similar to skipping levels or jumping around in a bulleted or numbered list. This causes confusion for all readers regardless of disability status, and can go as far as make content unreadable for users on screen reading software. To avoid this pitfall, always go back and check heading levels: Are they in the proper order?
4b: Headings used as text styling
Headings are a specific tool used to organize content. They are NOT tools for highlighting or emphasizing important information.
One common error made by editors is the use of a heading as a bold style of text. Heading 4 is the most commonly misused heading because of its appearance. Although layout and appearance are important attributes of your website, styling must come secondary to proper semantic use of headings.
Better styling options exist! In a Text Area, consider using Lead Font, Splash Font, or Breakout Boxes. Various Components can be used to highlight information, such as Callout Boxes, Spotlights, and Postcards. Check out other emphasis Components on our Reference Guide Website .
4c: Color Bands and Headings
Did you know Color Bands are all turned into Heading 2s?? When adding a Color Band, treat it exactly as you would a Text Area with a Heading 2: subsequent text can be plainly styled or, in the case that the text will have multiple sections, can begin with Heading 3.
Color Bands should never be blank, since that causes an empty heading.
4d: Content must follow a heading
Related to Missteps 3b and 3c, a page cannot end with a heading. We sometimes see pages that end with a Color Band for styling, or Heading 4 instead of styled text.
Text Must be Readable
Misstep 5: Excessive use of bold, italics, all caps
Paying particular attention to typography can make documents and web pages more accessible. Although there aren't any concrete rules for how much font styling is acceptable, limiting these styles is the best practice for creating accessible content.
Tables are Tough
Tables are a great way to visually display lots of complex information in a simple way to understand. However, because they are a visual medium, tables can be difficult for users with disabilities to understand what is visually apparent about the information being presented.
Because it is so easy to inadvertently create an inaccessible table, we encourage content editors to avoid their use whenever possible. Bulleted or numbered lists, and Vertical Timelines could be considered instead. Plain text explaining the point is also a great option!
Misstep 6: Tables are missing headings
Tables should always have a heading for the top row and/or first column. At least one or the other, if not both, are necessary.
When in doubt, please submit a Support Ticket. We are here to help!
The easiest way to submit a Support Ticket is to go into your Shortcuts menu. Under "Get Help" select "Support Ticket."
Misstep 7: Complex Tables
There are several ways that Complex Tables can become inaccessible, including:
- Nesting a table within another table
- Merging cells
- Leaving cells blank
All of these missteps cause problems for sighted and non-sighted readers alike. To avoid these issues, ensure you're doing the following:
- Nesting a table within another table ⟶ Create two separate tables
- Merging cells ⟶ Rather than merging two cells that have the same content, write out the content in each individual cell
- Leaving cells blank ⟶ Write "no data" or "n/a" so the user or screen reader knows the empty cell is intentional
Video and Audio Files Also Require Accessibility Features
Videos and audio files, such as podcasts, are often overlooked when it comes to accessibility. In addition to aiding users who are deaf or hard of hearing, providing a visual alternative is useful for users who are in an environment where listening to media isn't feasible. Think about the last time you were on the train and someone was listening to their podcast or watching videos without headphones!
Misstep 8: Videos lack captions
All videos created on or after January 1, 2023 MUST have proper captioning. Proper captioning means that there are no spelling errors, punctuation is included, and the text aligns with the spoken words. It also includes relevant background sounds, such as suspenseful music, audience applause, birds chirping, etc.
Unfortunately, simply turning on captions in YouTube does not meet this requirement, as their auto-captions lack punctuation and capitalization.
In order to comply with captioning requirements, you will either need to manually enhance YouTube's auto-captions, or use a program with robust AI to create a better first draft to edit. Mac users can try iMovie, while PC users have access to ClipChamp. Both of these programs are free.
More information about captioning videos, including detailed instructions, can be found on the Captions and Audio Descriptions page at SODA .
Misstep 9: Audio files lack transcripts
All audio files, such as podcasts, created on or after January 1, 2023 MUST include a transcript. A transcript is the same word-for-word content as captions but presented in a separate file. It can be typed out on your page, for example in an Accordion that users can expand or collapse, as a link to a separate page with the transcript, or as a linked file.
Unfortunately, sites such as SoundCloud, Spotify, and iTunes don't currently provide the option to create a draft transcript. In order to create one, you'll either have to do so manually or via a video editing tool such as iMovie or ClipChamp. Simply edit your audio file in one of these programs, turn on AI captioning, and edit the result as needed.
More information about audio transcripts can be found on the Captions and Audio Descriptions page at SODA .
Linked Documents and Other Files Must Be Accessible
One of the most common accessibility errors we see is inaccessible files. Ideally, your site will link to as few files (documents, spreadsheets, slide decks, and PDFs) as possible. However, when that isn't possible and a file must be linked, be sure it's accessible.
Misstep 10: Files aren't accessible
Almost all of the inaccessible files we've found use large, bold text in place of actual semantic headings. Screen reading software functions similarly on PDFs and Word documents as it does when reading webpages. It identifies headings as distinct sections of text and is able to pull out a list of links. When big, bold text is used in place of headings, screen reading software isn't able to make sense of your file. Think of headings in your Word document the same way that you would when building content your site.
Please refer to SODA for an overview and in depth information about how to make your files accessible .