Digital Accessibility

Page titles must be distinct and descriptive as they are typically shown in browser tabs, and search results, and are incredibly important for visibility in Search Engine Optimization. Be sure to use titles that completely contextualize the page for users. Otherwise, users may only understand a portion of what the title is meant to convey.

All page content should exist in logical groupings. Organize all page content thematically and format them accordingly. There should not be huge blocks of text on a page. They should be broken into separate sections with subtitles and bullet points to make information readily consumable.

Headings are meant to mark a content grouping meaningfully and logically. For instance, there should be a Heading 1 style dedicated to the top page title, a Heading 2 style dedicated to the next subtitle, and so on and so forth. This allows individuals to scroll through the page with ease and enables screen readers to readily navigate the content hierarchy of a page.

Semantic markup is a way of writing and structuring your HTML (Hypertext Markup Language) to reinforce the content’s semantics or meaning rather than simply its appearance (e.g., <footer>, <header>, and <article>). This detailing communicates to screen readers the layout of items, and it is beneficial for those with low vision.

The text color on a web page should have a contrast ratio of at least 4.5:1 for normal-size text (including text overlay on images).

• WebAIM offers a free color contrast ratio checker to see if your page’s colors pass accessibility requirements. Additionally, avoid using color as the only indicator of meaning (e.g., red and green are commonly used to convey opposing meanings like “stop”/”go” and “good”/”bad”). Try utilizing shapes alongside color to convey meaning (e.g., check marks, crosses, circles, etc.).

Note: If a visual reference is desired, there is a PDF available above with diagrams included.

Users often scan websites instead of reading them. As opposed to “Legibility,” “Readability” refers to the presentation of information. To make pages more readable, consider keeping paragraphs short (less than 150 words), use bulleted lists when appropriate, and use headings/subheadings.

To remain as inclusive as possible, make sure to write clear headings, use plain language (or language according to your audience), and define acronyms upon their first use. Superfluous text, jargon, or figures of speech may be enticing (particularly in academic settings), but to make information more understandable to broader audiences, consider using more simplistic language when trying to convey basic ideas.

When including links on your pages, make sure links are distinct from other text, using both color and underlines. Additionally, write clear and unique link text so that the user knows where the link is going. This is especially important for those who utilize screen readers because they need context for their browsing. For instance, if the link text simply read “Resource Guide” as opposed to “Digital Accessibility Resource Guide,” a screen reader user might be very confused without context.

Whether developing a website or authoring a report, alternative text is essential for creating accessible content. Text alternatives for pictures should be short and concise (about the length of a Tweet[WE1] or 140 characters). Alt-text should be written for an image if the image is a logo, illustration, painting, etc., but should be left blank when the image is purely decorative. Furthermore, alt-text should always end with a period for the sake of screen reader legibility.

• Social media: When collaborating on social media, make it a regular practice to add alt-text to images prior to posting or include image descriptions in captions.

There are three primary media alternatives for videos: captions, transcripts, and audio descriptions.

• Captions: Synchronized text of the audio material provided on screen with the video. This is helpful for those who may have low hearing.
• Transcripts: Non-synchronized text of the audio material provided adjacent to the video or audio file. This is particularly useful for audiences with low hearing and different processing styles.
• Audio description: A separate spoken audio track of what is visually happening in a video. This is particularly useful for audiences with low vision.