Contrast
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.
| Score | Contrast Ratio | Result |
|---|---|---|
| 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 |
Heading Structure
- 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.
Hiding Elements
Use a span with class .comet-screenreader-only to contain text alternative for informational icons or background images.
Tables
Provide descriptive table headers, <th> to allow parsing by screen readers.
Forms
- 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.
Images
Provide an 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
- 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
aria-hidden=trueandfocusable=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 havearia-labelledby="title"to indicate the relationship to non-visual users
Links
- Ensure text links have an underline in the hover state
- Display a focus state for all links when tabbing
Media
- Provide audio descriptions and transcripts of video content
- Make playback controls keyboard navigable
Javascript
Use Javascript to progressively enhance and, when possible, ensure components still function without Javascript enabled.
CSS
Ensure a page loaded without CSS is still navigable and usable.