Web Accessibility

Web Accessibility Requirements

The goal of web accessibility is to ensure people with disabilities have equal access to websites and digital content. Websites should:

For help in understanding accessibility standards at UC Davis, please contact the Student Disability Center or IET Academic Technology Services. IET can also help set you up with access to SiteImprove, a tool to help you assess and address accessibility and quality issues on your site.

Web Accessibility Glossary and Guidelines

Alt text

Alt text is the written text that appears when an image fails to load on a website. It helps people who use screen readers to understand the content of an image, and it helps search engines to crawl and rank your page. Alt text should make images easier to understand for everyone, including those with vision impairments. It should also be specific and concise —  ideally no longer than 100 characters. 

  • Informative images add necessary information to the story or webpage. Alt text should explain the content of the image so that everyone can follow along, regardless of whether they can see the photograph, illustration or graphic. 
  • Decorative images beautify a page but don’t add information to the story or webpage. For example, a picture of plants that beautifies a page but doesn’t relate to the content of the page would be decorative. These images should have a null text alternative (alt="") to show readers that the image has no information. 

Alt text and SEO 

Alt text can help search engines identify image content. Avoid stuffing keywords in alt text because that violates the purpose of helping visually impaired users to understand the image. However, add relevant and helpful keywords — such as “UC Davis" and the academic department pictured — because they help search engines to categorize images. Add keywords when they both help users understand the image and boost SEO. 

For example, an article about California wildfires would have the target keyword of “wildfire” to boost its findability in search engines. The article might include an image of a firefighter using a shovel to dig a trench to prevent the spread of wildfire. This image could be described with alt text a number of ways:

  • Accurate but not helpful: The alt text could be “A firefighter digs a trench.” This accurately describes the image, but doesn’t provide much context. 
  • A slightly better example: To aid visually impaired users and include a keyword, the alt text could say, “A firefighter digs a trench to prevent the spread of wildfire.” This includes the target keyword “wildfire.” In this case, adding the keyword not only boosts SEO but also gives more information and context for visually impaired users. 

Words on images

Words should be added on top of an image through code so that they are readable by screen readers. Avoid saving words on top of an image as part of a JPEG or other image file. Words saved as an image would be undetectable by screen readers and search engines. 

Words on images can add context to a page and be visually compelling. When used, words on images should be high contrast so they can be legible. They should have a contrast ratio of at least 4.5:1 for normal text (font less than 24 pixels) and 3:1 for large text (24 pixel font or larger, or a 19 pixel bold font or larger). To ensure that your design has enough contrast, use a tool like the WEBAim Contrast Checker or if your site is live, you can use a tool like Experte to crawl the entire site for accessible color contrast issues.

Anchor links

Anchor links are links within a webpage that skip to a section within the same webpage. They can be disorienting for users. Often, people expect a link will take them to a new webpage. Users sometimes don’t realize when a link suddenly drops them further down the page. For this reason, the use of anchor links is discouraged. In some cases, anchor links are the only option available, but they should be used infrequently and very judiciously. Instead of creating anchor links to content, consider adding a new webpage. 

Opening links in a new tab 

Avoid opening links in a new tab because they can be disorienting. If you must open a link in a new tab, give a warning that the user is about to leave the site. 

Proper order of headings

Headings should go in order without skipping ahead. For example, an h1 (header 1) should be followed by an h2, but an article shouldn’t start with an h2. Once a heading has been used, you can skip backwards to that heading.

For example, you could skip from an h4 back to an h2 like so:: 

  • h1
    • h2
      • h3
      • h3
      • h3
        • h4
    • h2
      • h3
      • h3

However, you would want to avoid skipping ahead in the heading order, like so:

  • h1
    • h3
    • h2
      • h4

Headings help everyone to understand the structure of content. They especially help people using screen readers to navigate and tab through a story to the sections that are relevant to them. 

Flashing imagery 

Flashing, blinking and flickering imagery should be avoided because they can trigger seizures. Pay attention to:

  • Frequency. Photosensitive viewers shouldn’t be exposed to flashes greater than three per second.
  • Color intensity. The contrast between alternating dark and bright images should not be greater than 20 candelas per square meter.
  • Size of the image on the page. This determines how much of the brain is stimulated by flashing. It’s recommended that any flashing imagery be not greater than 25 percent of the total area.
  • Pattern. Stripes can be perceived as flashes. No more than five pairs of stripes should be used if they are moving and no more than eight pairs if they are static. 

Source: The Epilepsy Foundation

Link text

Readers should be able to understand where a link will take them just by reading the link text alone. Some people who use screen readers listen to a full page of text, while others prefer to skip to the links on the page. So be mindful when choosing which words to highlight with a link. Avoid using “Read more,” “Learn more,” and “Click here” because they may be unhelpful out of context. Instead, choose more specific words. 

For example, let’s say you’d like to link to an article about the risks of homemade dog food. Instead of simply linking the words “read more,” you could craft the link text to help users understand what they will read if they click the link. You could write something specific like “the dangers of homemade dog food.”

Font size

  • Font for body text should generally be 16 pixels or larger. 
  • For legibility, fonts should be no smaller than 12 pixels. 
  • Readers should be able to zoom in on text to 200 percent. Responsive layout designs should enable users to expand the page to 200 percent without breaking the design or the legibility of the page. 

Color contrast 

The color contrast between the text and the background should be large enough to be easily readable. 

  • Body text should have a minimum color contrast ratio of 4.5 : 1. 
  • Large-scale text (120-150% larger than body text) and other components such as icons and graphs should have a minimum color contrast ratio of 3 : 1. 

To ensure that your design has enough contrast, use a tool like the WEBAim Contrast Checker. 

Source: Color contrast, mdn web docs