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="").
- Provide a
<title>tag within all SVGs
- Include the
aria-labelledby="title"attribute on the outer
<svg>element to point to the title tag
- 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.