Accessibility Guidelines

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-describedby attribute 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

  • 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

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.