Digital Accessibility Compliance

• Add an alt tag to all of your images, which describes the image for visually impaired users. Some content management systems will put an identifier or file name into the alt tag. You must change this to descriptive text.
• Use appropriately sized images. Web browsers will download the entire full-size image and then size it to fit the display. When the image is significantly larger than the display size, the page loads slower than necessary.
• Text content should not be in an image. For example, a graphic banner image promoting an event, which was created for printed material, is not appropriate on a website. Instead, you can write the text content in html and set a background image. Be mindful of color contrast, and test for multiple screen sizes as the text may overlay different parts of the image depending on the screen size and resolution.

See the images and graphics checklist for more best practices.

• Make links visually distinct from surrounding text. Color alone is not enough, and must be paired with a visual difference such as underline, bold, or change in font.
• Use descriptive link text.
  • Avoid urls as link text. Screen readers read out the entire url character by character, which is time-consuming and frustrating for users.
  • Avoid generic text like "Click Here" and "Learn More".
  • How to write descriptive links.
• For icon-only links with no text, add  aria-label.
• Users can navigate to links using only a keyboard.

• Use a player that is fully keyboard accessible.
• Neither audio nor video plays automatically without user input.
• Provide captions and a transcript.
• Note that YouTube is considered a social media platform, which means that all new videos must be accessible, but content posted prior to the compliance date is exempt.

See the audio and video checklist for specific requirements on pre-recorded and streaming content. The Web Accessibility Initiative (WAI) provides in-depth information on how to create new AV content that is accessible.

• Add controls to pause, stop, or hide animations lasting over 5 seconds. This includes carousels and banner videos.
• Avoid excessive motion and flashing. Remove/replace anything that flashes more than three times in a one-second period.
• Provide text alternatives.
• Respect user settings that turn off animations by implementing the prefers-reduced-motion CSS media query .

Accessible headings reflect page structure and act like an outline of your content. Heading levels must be properly nested, without skipping levels. For example, if you have an H2, then the next header nested under it must be H3, and you can't skip to H4 just to get a particular font or font size.

Beware of heading tags in the page footer. These are usually not part of the page structure, rather they are implemented to achieve a certain look (font, font size, color, etc.) In such cases, CSS styles should be used to replace the heading tags.

Read more about the correct use of heading tags.

• Ensure source code order matches visual page flow to make the website keyboard accessible.
• Use semantic HTML elements, such as <nav> for navigation menus, to help screen readers interpret content correctly.
• Use ARIA attributes (Accessible Rich Internet Applications) where necessary, such as aria-labeled-by for form input.
• Use a skip link to provide quick access to the main content of each page. This allows a person to bypass globally repeated content such as navigation menus and banners.

See the websites checklist for more requirements.

• Don't use color as the only way to indicate meaning or convey information.
  • This video on use of color alone explains why it's a problem and how to fix it.
• Use a contrast ratio of at least 4.5:1 between text color and background color. Large font (18 pt or larger) has a minimum ratio of 3:1.
  • This video on color contrast explains color ratios and how to check color contrast in your browser.
• Test colors with a contrast checker.
• Using  UC San Diego brand color combinations will ensure compliance and is preferred for all sites. Division and departmental sites are required to conform to the UCSD brand.