ADA Compliance
-
Image alt text
-
Always try to provide descriptive, semantic replacement content for images.
-
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.
-
If the image is the main subject of the surrounding text, you can describe the contents of the image.
-
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 thearia-hidden=“true”
attribute in the HTML. -
Examples of images that need empty alt text:
-
Images only used for layouts, visual effects, or eye candy (no semantic content).
-
The content of the image is already captured by surrounding text, so the alt text would be redundant.
-
-
-
Headings
-
Must be in a logical order.
-
Do not skip heading levels.
-
Don’t use headings just for visual effects (font size).
-
-
Contrast between text and background color
-
Contrast ratio should always be 4.5 or higher.
-
Contrast calculator: https://leaverou.github.io/contrast-ratio/
-
Watch out for this when adding text on top of hero images.
-
-
Descriptive link text
-
Avoid generic text like “Click Here”.
-
-
Always include a table header row
-
This can be accomplished easily using Sitecore’s table wizard in the Rich Text editor.
-
-
Never use duplicate IDs on HTML elements
-
Watch out for this when creating anchor links on a page.
-
-
Always provide descriptive form labels