ADA Compliance

Image alt text

1. Always try to provide descriptive, semantic replacement content for images.

2. If your image contains meaningful text (charts, graphs, infographics), definitely include that text in the alt attribute. If it’s it’s too much text, at least include a conclusion or short summary of the data.

3. If the image is the main subject of the surrounding text, you can describe the contents of the image.

4. Not all images need alt text, but they still need an empty alt attribute (alt="") which explicitly tells screen readers to ignore them. You can also use the aria-hidden=“true” attribute in the HTML.

5. Examples of images that need empty alt text:

   1. Images only used for layouts, visual effects, or eye candy (no semantic content).

   2. The content of the image is already captured by surrounding text, so the alt text would be redundant.

Headings

1. Must be in a logical order.

2. Do not skip heading levels.

3. Don’t use headings just for visual effects (font size).

Contrast between text and background color

1. Contrast ratio should always be 4.5 or higher.

2. Contrast calculator: https://leaverou.github.io/contrast-ratio/

3. Watch out for this when adding text on top of hero images.

Descriptive link text

1. Avoid generic text like “Click Here”.

Always include a table header row

1. This can be accomplished easily using Sitecore’s table wizard in the Rich Text editor.

Never use duplicate IDs on HTML elements

1. Watch out for this when creating anchor links on a page.

Always provide descriptive form labels