Comet 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

Note on WCAG Success Criterion 1.4.3 (Contrast)

When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size as defined in CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

Handling Focus

Focus Trapping for Modals

In the same way a modal takes over the screen to demand visual attention, a keyboard user must have their attention bound to the modal. If they’re able to navigate away, they may not be able to dismiss or take the required action.

The suggested solution is to trap focus inside the modal so that tabbing or shift-tabbing will loop instead of escaping to the rest of the page.

Implementation:

When a user first opens a modal, focus is moved to the first focusable element in the modal.
- This can be a variety of elements. jQuery UI provides a convenience selector, :focusable.
- When a modal is opened, invisible focusable dummy elements are appended and prepended to the modal. We then listen for focus on those elements and jump them to the opposite end of the modal.
The modal must close with the esc key.
- A keydown listener should be added when the modal is opened, and removed when the modal is closed.
When the modal is closed focus must return to the original element that it was on prior to the modal opening.
- The element that triggered the modal should be saved to a variable for later use.
- When the user closes the modal the saved element should have focus returned to it.

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

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.