Skip to main content Skip to navigation

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

  • 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=true and 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

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.

Navigation Menu