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:

It’s the law.

The Americans with Disabilities Act requires state/local governments and programs that receive federal funding to provide an equal opportunity to benefit from all of their programs, services, and activities. Title II of the ADA requires all digital content to be accessible to make that happen.

Thousands are impacted.

In the US, 26% of adults have a disability that can impact the way they use the internet. In the State of Connecticut alone, 24% of adults – that’s almost 672,000 people – are affected (CDC, 2021). Digital accessibility improves access to resources and services for everyone.

Screen shot showing alt text for an image.

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

NOTE: A big part of best practices for alt text is to be neutral with regard to gender, color, age, and sexual orientation unless the related content is specifically about one of those areas.

How to write descriptive links 

 

When creating links, remember the following:

  • Let users know what to expect: When creating a link to a downloadable document or spreadsheet, follow the link with the file format in parentheses: (XLS), (CSV), (PDF), (DOC), or (PPT) added after the human-readable link to the file lets the user know what to expect.
  • 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”. This includes call-to-action links (CTAs). The text in the CTA should include text to clarify the purpose. For example, instead of ‘Read more’ at the end of an article about the annual budget, use ‘Read more about the budget’.
  • 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.
  • Do not add a ‘title’ to the link properties when you link text.

 

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. To make sure a blind person knows something is important, use words like “Important:” or “Notice:” before the important statement.
 

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

Helpful Tips

Check out the Web Content Accessibility Guidelines (WCAG) 2.2 (w3.org) for the latest updates on making content more accessible.

Sitecore makes it easy to include alternative text to any images, graphs, or diagrams you upload into the system. It will also alert you when alt text is missing and needed.

Sitecore allows you to insert a table for tabular data using the Table Wizard.

How well your web content can be accessed and received by all users, including users with a disability. This is especially important, and legally mandated, for our government websites. It is a great idea to take a deeper dive into accessibility standards when writing content for CT.gov.

Text describing the appearance of a visual element on a webpage. It is indexed by search engines (SEO) and read aloud by screen readers (accessibility).

Decorative images don’t add any unique content or message to a page. They are only used to accent a message or make a webpage more attractive. These types of images should be classified with an empty alt tag (alt="") to avoid audible clutter for screen readers. 

Please note: Right now, Sitecore (our CMS) does not allow these types of alt tags. Instead, use a brief description for the image that related it to the content it represents. For example, for an article about the upcoming immunization schedule for school with a picture of a mom and child at the doctor’s office, use “child getting shots for school”.

Dynamic changes to the layout of a webpage depending on a user’s device, behavior, etc. Responsive design makes websites faster and more accessible.

Responsive design ensures that web pages are readable and make sense without losing content when used on devices of different kinds such as laptops, PCs, and phones.

(Search engine optimization) Improving web content for rankings in search engines. Common SEO practices include keyword research and link building. Alt text and descriptive links are crawled by search engines.

ALT text fields are never the place to pad keywords. They are specifically for users who cannot see the images.

This CMS houses most of the web content for our CT.GOV-Connecticut's Official State Website sites. Sitecore is where you can edit pages, add alt text, etc.

(User experience) How the user interacts with/ experiences your web content.

Related pages

On-page content structure 

Make it easy for the user to find what they need by structuring content clearly.

Plain language guidelines 

Write content that is clear, concise, well-organized, and follows best practices.