ACCESSIBILITY BEST PRACTICES

Accessibility promotes a user-friendly experience and allows the widest range of users to engage with your content. Two vital reasons to ensure your content is accessible:

Alternative Text 

Alternative text (also called alt text) provides a helpful written description of a visual element on your webpage. Accurate alt text is essential for accessibility, UX, and SEO. Screen readers and search engines will crawl this text, so the alt text needs to be clear and concise.

Alt text should be used for:

• Images (non-decorative)
• Graphs
• Diagrams

How to Write Alternative Text 

When writing alt text, ask yourself, “What information am I trying to convey with this image?” Answering this question can help you write clear and helpful descriptions.

Avoid using phrases like “image of…” or "graphic of...” in your alternative text. Assistive technology provides this information automatically.

Avoid applying comments that attempt to editorialize the image. Use “Blonde woman standing alongside a green car” instead of “Blonde woman standing in an alluring pose alongside a green car.”

Alternative text should be:

• Short
• Meaningful
• Descriptive

Descriptive Links 

Descriptive links make content accessible and easy to understand. They should accurately describe where they direct users once clicked.

Descriptive link text should:

• Make sense on its own — Users of screen readers often navigate from link to link, skipping the text between.
• Be concise and meaningful — Similar to alternative text, links should be descriptive so users know exactly where they lead.
• Example: Instead of using https://portal.ct.gov/, use “Visit the Official State Website for Connecticut".

How to Write Descriptive Links 

When creating links, remember the following:

• Links should open in the same window. If a link opens in a different window for any reason, this should be indicated in the link text for screen readers: “External Link,” or “Opens in a New Window.”
• Avoid using non-descriptive words like “click here,” “more,” or “learn more”.
• Avoid using the word “link” as part of the description. Assistive technology will identify a link as such and would be repetitive.
• Avoid using the actual URL as link text. URLs are usually long and can be made of random letters, characters, and numbers which can be tedious and confusing to a screen reader user. They are not human-readable or screen-reader friendly.

Accessible Design 

• Color: Use bold text to highlight important text. If you only use color to mark something as important, a user who is colorblind won’t be able to make that distinction.
• Contrast: If the contrast between colors is too low - for example, a small gray font on a white background - users who have low vision won’t be able to read or see the text. The contrast between text and background color should be a ratio of 4.5:1 for normal text and 3:1 for large text.
• Text formatting: ‘Bold’, ‘italicized’, and ‘strikethrough’, are NOT announced to screen reader users. If a message is important be sure to emphasize it in text rather than style.

Many tools can help check for the right color contrast. TPGi has a helpful color contrast checker with additional information about color contrast.

Using Tables 

Tables are difficult to make accessible, and they’re tricky to make responsive. When a table loses the relationship between the row and column headings and the rest of the content, it may be inaccessible for screen reader users.

If you have other ways to organize information on the page, try those first. Tables are best used for what they were designed for — tabular data.