Comet aims to meet WCAG standards for color contrast for all essential content, which is 4.5:1 for normal text and 3:1 for bold or larger text. Test component contrast using Tanaguru Contrast-Finder.
|AAA||7.0+:1||Passes WCAG 2.0 AAA|
|AA||4.5+:1||Passes WCAG 2.0 AA|
|AA18||3.0+:1||Passes WCAG 2.0 AA Large Text Only (18pt or 14pt bold)|
|Does Not Pass||<3.0||Does Not Pass|
- Provide logical, semantic headers as an outline of the document.
- Disable page CSS to understand what the document outline will look like.
- Use headings to effectively describe content that follows.
Use a span with class
.comet-screenreader-only to contain text alternative for informational icons or background images.
Provide descriptive table headers,
<th> to allow parsing by screen readers.
- When help text is placed after an input, use the
aria-describedbyattribute on the input to link the adjacent help text.
- Ensure form controls have descriptive labels and instructions.
- Ensure all form controls are keyboard-navigable.
alt attribute for all images. In some cases, like decorative or non-meaningful images, may be given an empty or null
alt attribute (e.g., alt="").
- SVGs are often used as decoration to give further visual meaning to a link, button, or other interactive elements. When the interactive element with SVG contains descriptive text, it is not neccessary for the SVG itself to be identified by screen readers or keyboard navigators. Give SVGs with sibling text alternatives
focusable=false, so that users relying on keyboard navigation will not focus on the non-informative SVG. This will also prevent screen readers from reading the uniformative path of the SVG
- When an SVG is used as for a logo or infographic without a text equivliant, provide a
<title>tag within the SVG. The SVG tag itself must then have
aria-labelledby="title"to indicate the relationship to non-visual users
- Ensure text links have an underline in the hover state
- Display a focus state for all links when tabbing
- Provide audio descriptions and transcripts of video content
- Make playback controls keyboard navigable
Ensure a page loaded without CSS is still navigable and usable.