Accessibility Checklist and Guidelines for Entries

Just as headings help sighted users navigate content and understand its hierarchy on the web, in email, digital documents and on other digital platforms, headings help people who use assistive technology (such as screen readers) navigate content as well.

Setting the correct heading level order for your digital content is crucial for screen reader users, as the content is read back to them in the order specified in the heading tags (H1, H2, H3, etc). Properly numbered headings also helps assistive technology users jump to sections of the page in their intended order.

An added benefit of maintaining a proper heading order on your page is better Search Engine Optimization (SEO), because search engines rely on the hierarchy of headers to understand the structure of web pages and rank them accordingly.

In the Today story template, the story title always serves as the H1 and is pre-coded into the template. If your story has a subtitle or dek (Subtitle / Dek field), it will serve as the H2 and will also be coded into the template. If there is not a subtitle or dek for your story, there is a hidden H2 in the place that alerts screen readers that the content begins.

You are responsible for adding the remaining heading levels to the body of your stories starting with H3s. Avoid using bolds or italics for this purpose, as they do not work for screen reader technology. If other subheads are nested underneath the H3s, use H4s for those, etc.

You can see how the H1 through H6 appear visually in the Today story template in the Example Story with Layout Elements.

• Heading Level 1 (H1): the H1 is the title of the story is pre-coded to be an H1
• Heading Level 2 (H2) Story Subtitle / Dek: the optional subtitle / dek is pre-coded to be an H2 in the template.
• Heading Level 3 through 6 (H3 — H6): make all headings in the story body content H3 through H6s. Please note H4 through H6 should be used rarely and sparingly.

The questions in Q&As should be assigned a heading level to make it easy to scan for people using screen readers. In most cases, the questions will be H3s, unless it falls under a H3 and then should be set as an H4.

Name your image files with a short description with a hyphen in between each word. Consider adding the date to the filename as well to avoid duplicated images in the database. You can also include the image size to make identifying the correct image to upload easier. Some examples of a good naming convention are: irwin-jacobs-thumbnail-090922.jpg, dancing-bear-on-beach-1200-091322.jpg

The image alt text should briefly describe the image. Best practice is for the alt text to be under 10 words. This pertains to all images in story entries, including the Hero field, and slideshow entries. If the image needs a longer description, it is best to include it in the caption or within the story content.

Best practice is to avoid having text embedded on an image. Text that is embedded on images is not responsive for mobile. In addition, embedded text is not readable by screen readers. If the image must have text on it, make sure not to include more than a few words and that all text is included in the alt text description or elsewhere on the page.

Screen reader technology brings up a list of links for users. The links in the list are uncoupled from surrounding content, therefore links in stories need to be descriptive, such as: Visit the Native American Heritage Month website to learn more versus just “Learn More” linked. Also avoid linking long URLs as the screen reader reads back every single character for users. The general rule is to link descriptive text instead of the URL, if it is beyond one “segment.” For example, this is OK: "ucsd.edu/about" but "https://docs.google.com/document/d/1ioFmXF9UvgLC9hmXJslsDWicxFgbZrlkdfjd" is not.