Accessibility Developers' Guide

WCAG 1.1.1 (A)

Images

WCAG 1.1.1.b (Informative Images)

Images that convey content MUST have descriptive alternative text (alt attribute value, title attribute value, aria-label property or aria-labelledby property) that serves the same purpose and presents the same information as the image.

Meaning:

• Alt text is required on all images and AREA elements.
• A linked dynamically changing image must have alt text that corresponds to the visually displayed image.
• Alt text must always serve the same meaning — if text is embedded in an image, the alt text must include the exact text that is embedded in the image. See 1.4.5.a for Images of Text.
• Alt text must not have typos and punctuation differences. (e.g. missing spaces)
• A server-side image map must have an equivalent set of text links and/or text alternative to alert the user that these links are available.

Implementation:

Implement informative images in the foreground and use the image element with the alt attribute.

Avoid using images of text, unless a particular presentation of text is essential to the information being conveyed. (Not Common; but will be for Logos, Trademarks, Copyrights,and Service Marks. See 1.4.5.a for Images of Text

For best customer experience, ensure that:

• Alt text for a linked image should not duplicate the adjacent link text for the same resource / destination.
• Alt text for an image inside a link or button should not duplicate the text content of the link or button. The alt text should be null.
• Alt text value should be less than 150 characters.
• Alt text should include text to represent the trademark, service mark, registered trademark or copyright symbol that is embedded in the image.
• Alt text should succinctly describe the image content without being too verbose.

Serious

WCAG 1.1.1 (A)

Images

WCAG 1.1.1.c (Complex Images)

Images that are too complex to be fully described in a short text alternative MUST have their purpose described using alt text. Equivalent text alternatives to complex images MUST be provided in context or on a separate page (linked and/or referenced via longdesc or aria-describedby property).

Meaning:

• If short alt text is not sufficient, ensure a long description has been provided:
  • In the context of the page OR
  • In a link adjacent to the complex graphic OR
  • Via the longdesc attribute.
• The long text alternative must be appropriate and adequately convey the images meaning.
• The long text alternative must not have typos and punctuation differences.
  See 1.4.5.a for Images of Text.

Implementation:

Create a separate page to describe complex images. If the same visual representation can be created without using an image — create with HTML, CSS, and real text.

For best customer experience, ensure that:

• Alt text value should be less than 150 characters.
• Alt text should include text to represent the trademark, service mark, registered trademark or copyright symbol that is embedded in the image.
• Alt text should succinctly describe the image content without being too verbose.

Serious

WCAG 1.1.1 (A)

Images

WCAG 1.1.1.d (Decorative Images)

Images that do not convey content, are decorative, or with content that is already conveyed in text MUST be given null alternative text (alt=""), ARIA role="presentation" or implemented as CSS backgrounds.

Meaning:

Alt text is not appropriate. Decorative images must have an empty alt attribute (alt="") or role="presentation" and if applicable, have an empty title (title="") attribute. OR implement the decorative image in CSS.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

• Alt text for a linked image should not duplicate the adjacent link text for the same resource / destination because it creates a stutter effect.
• Alt text for an image inside a link or button should not duplicate the text content of the link or button. The alt text should be null.

Moderate

WCAG 1.1.1 (A)

Images

WCAG 1.1.1.e (CSS Images)

CSS images are either pure decoration or MUST have an aria-label or aria-labelledby on the containing element such as a div, which provides the text alternative.

Meaning:

A CSS image must not convey information.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

• Alt text for a linked image should not duplicate the adjacent link text for the same resource / destination because it creates a stutter effect.
• Alt text for an image inside a link or button should not duplicate the text content of the link or button. The alt text should be null.
• Alt text should include text to represent the trademark, service mark, registered trademark or copyright symbol that is embedded in the image. In these cases, it is best to ensure these images are foreground images and not in CSS.

Critical

WCAG 1.1.1 (A)

Images

WCAG 1.1.1.f – (Input Type Images)

Input type image form fields MUST have a non-empty alt attribute (alt attribute value, title attribute value, aria-label property or aria-labelledby property). Form buttons MUST have a descriptive value. Form inputs MUST have associated text labels or, if labels cannot be used, MUST provide a descriptive title or aria-label attribute.

Meaning:

• Input type image form fields must have a non-empty alt attribute (alt attribute value, title attribute value, aria-label property or aria-labelledby property). Form buttons must have a descriptive value. Form inputs must have associated text labels or, if labels cannot be used, must provide a descriptive title or aria-label attribute. See 1.3.1.c (Programmatic Labels); 3.3.2.a (Visible Labels) and 2.4.6.b (Descriptive Labels)
• Alt text is required on all images and AREA elements.
• Alt text must always serve the SAME meaning — if text is embedded in an image, the alt text must include the exact text that is embedded in the image. See 1.4.5.a for Images of Text.
• Alt text must not have typos and punctuation differences. (e.g. missing spaces)
• A server-side image map must have an equivalent set of text links and/or text alternative to alert the user that these links are available.

Implementation:

Avoid placing text in button elements. Use CSS or background images, and HTML text to lay over the image that will become a button, or other form input element.

For best customer experience, ensure that:

• Alt text value should be less than 150 characters.
• Alt text should include text to represent the trademark, service mark, registered trademark or copyright symbol that is embedded in the image.
• Alt text should succinctly describe the image content without being too verbose.

Serious

WCAG 1.1.1 (A)

• Images
• CAPTCHA

WCAG 1.1.1.g (Captcha)

CAPTCHA tests MUST have descriptive text alternatives describing the purpose of the CAPTCHA, and alternate forms using different modalities MUST be provided to address the needs of people with different disabilities.

Meaning:

Two human senses must be used to solve the CAPTCHA. For example, the CAPTCHA has a visual and audible puzzle option so the user is able to choose one or the other.

Implementation:

CAPTCHA's should be avoided when possible. BUT, if a CAPTCHA must be used, implement re-CAPTCHA: https://www.google.com/recaptcha/intro/

For best customer experience, ensure that:

Avoid use of CAPTCHA elements. If bots are of concern, implement a hidden field after the form(s) submit button, then hide it with CSS display:none (so screen readers would not read it), and give it a descriptive explicit label that clearly indicates that the user should not place anything within the field. Pair this technique along with a basic naughty word list and a form submission time detection (if form is submitted n less than 3 seconds or more than 30 minutes).

Important Note: A CAPTCHA is not available that can not be solved by bots. - Computer software that mimics how the human visual cortex works can solve text-based CAPTCHA challenges

Critical

WCAG 1.1.1 (A)

• Images
• Audio and Video

WCAG 1.1.1.h (Audio or Video)

Text alternatives MUST be provided to identify the purpose of the video or audio content.

Meaning:

• Alt text must be present to describe the media element to assistive technology.
• Alt text must be appropriate and match the intent of the media.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 1.2.1 (A)

Audio and Video

WCAG 1.2.1.a (Prerecorded Audio Only)

Prerecorded audio web-based files such as mp3 files and audio podcasts MUST come with an adjacent or easily reachable descriptive text transcript or verbatim.

Meaning:

• A text transcript of all dialogue must be provided and be clearly visible on the page and within the same container media element.
• A text transcript must provide textual representations of important sound effects or visual cues and identify all speakers.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.2.1 (A)

Audio and Video

WCAG 1.2.1.b (Prerecorded Video Only – No Dialogue)

Prerecorded video files that contain no dialog MUST come with an adjacent or easily reachable text or audio description of what happens on the visual track.

Meaning:

A text OR audio description must be provided:

• that adequately describes the video content;
• is easy for all users to locate and
• that describes important video only content.

Implementation:

Provide a link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.).

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.2.2 (A)

Audio and Video

WCAG 1.2.2.a (Prerecorded)

Prerecorded, web-based video files MUST come with text-based synchronized captions.

Meaning:

• Open (always visible) OR closed captions must be provided.
• Captions must include all dialogue, important sound effects and identify speakers.
• If a multimedia alternative is available with captions the alternative must be synchronized with the captions and be labeled as an alternative.

Implementation:

• Use open (always visible) captions on by default.
• If the clip has no sound, provide a note saying “No sound is used in this clip”.
• If there are audio tracks for different languages, provide captions using Synchronized Multimedia Integration Language or SMIL.

For best customer experience, ensure that:

A full text transcript should be available that includes information that would be in both the caption and video description, so that it is a complete representation of the material.

Critical

WCAG 1.2.3 (A)

Audio and Video

WCAG 1.2.3.a (Prerecorded Video – with Dialogue)

Prerecorded video files containing essential information that is only conveyed visually MUST come with an adjacent or easily reachable full text alternative describing the important visual details OR an audio description track.

Note: If conforming to Level AA, this checkpoint is a duplicate and considered "N/A". See 1.2.5.a Audio Descriptions (prerecorded) for requirement.

Meaning:

• Prerecorded video files containing essential information that are only conveyed visually must come with an adjacent or easily reachable full text alternative describing the important visual details OR an audio description track.
• The audio description must be correct and appropriate for the video.
  See 1.2.5.a - (Audio Descriptions (Prerecorded))

Implementation:

Use SMIL to provide audio description in multiple languages

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.2.4 (AA)

Audio and Video

WCAG 1.2.4.a (Captions (Live))

All live multimedia files that contain audio MUST come with text-based synchronized captions.

Meaning:

Not Applicable to general at this time, as no live broadcasts are made to the public.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.2.5 (AA)

Audio and Video

WCAG 1.2.5.a - (Audio Descriptions (Prerecorded))

All web-based video files containing essential information that is only conveyed visually MUST come with a synchronized soundtrack with audio description in which gaps in dialogue are used to convey essential information regarding the visual content.

Meaning:

Video files containing essential information that is only conveyed visually must come with a synchronized soundtrack with audio description which conveys essential information regarding the visual content during gaps in dialogue.

See 1.2.2.a (Prerecorded)

Implementation:

• If the clip has no sound, provide a note saying “No sound is used in this clip”.
• If there are audio tracks for different languages, provide captions using SMIL.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.3.1 (A)

• Links
• Markup Validity
• Other Semantics

WCAG 1.3.1.a (Semantics)

Elements MUST be used according to their meaning, not because of the way they appear visually.

Meaning:

If the technology used provides semantic structure to convey the relationships between information:

• Use semantic markup to mark emphasized or special text.
• Use text to convey information that is conveyed by variations of presentation of text.
• Separate information and structure from presentation.
• Convey relationships between information by using web page structure:
  
  • Semantic markup when color cues are used
    
  • ol, ul and dl for lists
    
  • h1-h6 to identify headings
    
  • Functions of the Document Object Model to add content to a page.

Implementation:

• Use native HTML whenever possible and according to the W3C specifications.
• Implement a correct hierarchical heading structure.
• Use STRONG to indicate importance. Use EM to indicate emphasis. Use STRONG or EM as a last resort.

For best customer experience, ensure that:

Use HTML according to the W3C specifications.

Moderate

WCAG 1.3.1 (A)

Tables

WCAG 1.3.1.b (Data Tables)

Data cells MUST be explicitly associated with header cells for data tables, and descriptive table captions and summaries MAY be provided where appropriate.

(Simple Data Tables: <TH> Complex Data Tables: <TH> Header/ID [SCOPE - optional])

Meaning:

General requirements for all data tables:

• Tabular data must be marked up in a table.
• Tables must have header cell markup.
• Tables must not contain blank <th> cells. Use <td> element instead.
• The relationship between data cells and the corresponding header cells must be properly associated.
• If caption elements are present, caption elements must associate with the data table.
  

Specific to Simple Tables:

• The scope attribute must have a valid value and properly convey the header-cell relationships. Valid values are row, col, rowgroup, or colgroup.
• The scope attribute must not be used on <td> elements. Use <th> element instead.
  

Specific to Layout Tables:

• Header cell (<th>) markup must not be used within a layout table.
• A non-empty <caption> element or summary attribute must not be used on a layout table.
  

Specific to Complex Tables:

• Complex tables must use the headers + id method to mark up column and row header cells.
• The headers + id association must be correct. Headers must not reference a non-existent id or the wrong id.
• All <td> elements must contain a headers attribute. Each headers attribute must list the id values of all associated <th> elements.
• All <th> elements must contain an id attribute. The id allows the header cells to be referenced by data cells.

Implementation:

• Avoid complex tables when possible - When a data table is complex, try breaking the complex table into separate simple tables.
• Avoid Layout Tables! — Use CSS and Semantic Markup to create layout
• Avoid complex tables when possible - When a data table is complex, try breaking the complex table into separate simple tables.

For best customer experience, ensure that:

• Tables should use the caption element to programmatically associate a visual name with the data table.
• Super complex tables should be separated into simple tables.
• Layout and data tables should not be nested.
• SUMMARY attribute and CAPTION element should not be identical.
• Tables should only be used for tabular data. Avoid layout tables.
• Name value pairs should be marked up as a data table.
• A table that has both row and column headers should use the SCOPE attribute in each header.

Critical

WCAG 1.3.1 (A)

Form Validation and Feedback

WCAG 1.3.1.c (Programmatic Labels)

Labels MUST be programmatically associated with form input elements, using label (explicit or implicit), title, aria-labelledby or aria-label.

Meaning:

• Form elements must have visible labels that are explicitly or implicitly associated with the form input. Label input fields using a method that defines their accessible text, such as an implicit/explicit label, aria-label, or aria-labelledby attribute. See 3.3.2.a (Visible Labels)
• Button elements are self labeling, so button elements do not require a separate label.

Implementation:

• Label input fields using the LABEL element.
• Associate the label with the corresponding form element using the explicit for/id method.

For best customer experience, ensure that:

• Avoid the TITLE attribute as it duplicates the LABEL.
• Avoid orphaned form labels. Each form LABEL should be associated with its corresponding form element.

Critical

WCAG 1.3.1 (A)

Form Validation and Feedback

WCAG 1.3.1.d (Group Related Form Elements)

For groups of related controls where the individual labels for each control do not provide a sufficient description, fieldset and legend (or ARIA) MUST be used to describe the relationship.

Meaning:

A group label (fieldset and legend or role="group") must be associated with groups of controls such as checkboxes, radio inputs or other related inputs to help completely convey the purpose of individual checkboxes in the grouping. See 3.3.2.a (Visible Labels)

Implementation:

Use native HTML whenever possible and according to the W3C specifications.

For best customer experience, ensure that:

FIELDSET should always have a LEGEND element.

Critical

WCAG 1.3.1 (A)

Headings

WCAG 1.3.1.e (Headings)

Headings MUST be marked up using real HTML heading elements

(<H1>-<H6> or <div role="Heading" Aria-level="1">).

Meaning:

• Text that does not define a section of the page, or an area of content must not use H1-H6 elements.
• If text indicates structure, level or architecture to the page — that element must use H1-H6 elements. Text size is irrelevant for headings. (Size and style can be implemented via CSS).

Implementation:

• Use native HTML whenever possible and according to the W3C specifications.
• Implement a correct hierarchical heading structure.

For best customer experience, ensure that:

• All heading elements should have content.
• Heading levels should not be skipped.
• There should be at least one H1 per page.
• There should only be one H1 per page.

Serious

WCAG 1.3.1 (A)

Lists

WCAG 1.3.1.f (Lists)

Lists MUST be marked up using real HTML list elements

(<ul>, <ol>, <dl> or <div role="list"> & role="listitem").

Meaning:

• Lists must be marked up using real HTML list elements (ul, ol, dl, or div role='list' and role='listitem').
• List elements must be used according to the semantic meaning.

Implementation:

Use native HTML whenever possible and according to the W3C specifications.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 1.3.2 (A)

• Reading, Focus Order
• Within-Page Navigation
• Dynamic Content (JavaScript, AJAX)

WCAG 1.3.2.a (Reading Order)

The reading and navigation order (determined by code order) MUST be logical and intuitive.

While it is BEST PRACTICE to make reading order and visual order match (identical), It is NOT a true failure UNLESS meaning is really changed by the order.

Meaning:

• The order of the content on a web page must be ordered in such a way that provides a meaningful sequence.
• Mark meaningful sequences in content using one of the following techniques AND order the content in a meaningful sequence for those sequences:
• Use Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
• Make DOM order match visual order (exceptions may be applicable on a case by case basis.)

Implementation:

• Use left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left
• Provide a link to linearized rendering
• Provide a style switcher between style sheets that affect presentation order.

For best customer experience, ensure that:

Linked in page references, such as footnotes, should add a return-to-trigger link back to the footnote.

Critical

WCAG 1.3.2 (A)

WCAG 1.3.2

Dynamically generated content following user interaction MUST meet one of the following: assistive technology is automatically made aware of the new content OR the new content is the very next thing the assistive technology will encounter on the page.

Meaning:

• Content must not be inserted into the page at an incorrect location.
• When modals open, the content of the modal must be immediately announced by assistive technology.
• If dynamically added content is inserted or appears on a page without the user's action or knowledge - that new content must be announced immediately.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 1.3.3 (A)

Visual Cues

WCAG 1.3.3.a (Visual Cues)

Instructions provided to users MUST rely on more than just visual cues.

Meaning:

• Information/instruction must not rely on visual cues to locate a location or shape without the use of an equal text description to convey the information.
• Information/instruction must not be presented in a manner that requires the user to see - without a secondary method to convey the same information.

Implementation:

Use an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.3.3 (A)

Visual Cues

WCAG 1.3.3.b (Sound Cues)

Instructions provided to users MUST rely on more than just sound or auditory cues.

Meaning:

Information/instruction must not be presented in a manner that requires the user to hear sound - without a secondary method to convey the same information.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.4.1 (A)

• Color and Contrast
• Links

WCAG 1.4.1.a (Color as Information)

Color MUST NOT be used as the sole method of conveying content or distinguishing visual elements.

Meaning:

• Color alone must not be used as the SOLE method to identify error(s) on form field(s).
• Color alone must not be used to convey meaning or information that can not be determined in another way.

Implementation:

Ensure that all CTA elements (like buttons) are not placed on backgrounds that do not meet or exceed the 4.5:1 contrast ratio

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 1.4.1 (A)

Color and Contrast

WCAG 1.4.1.b (Link Color Contrast)

Color alone MUST NOT be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation is provided when the link is hovered or receives focus.

Meaning:

• On hover AND focus (hover with a mouse, focus with a keyboard) a link has an additional visual clue that identifies the element as a link. An example is changing the text to appear with an underline .
• The link color contrast AND its surrounding text (and background color) must be at least 3:1 or greater when not interacted with.
  See 1.4.3.a (Color Contrast (regular text)) and 1.4.3.b (Color Contrast (large text))

Implementation:

Always use an additional indicator other then color on links and use colors that meet or exceed 4.5:1 contrast ratios

For best customer experience, ensure that:

Linked text that is surrounded by non-link text (falling within a paragraph) should use more than color alone to indicate action to user. This can be done by:

• Ensure the link has an underline always displayed, when it is surrounded by plain text. (with our without focus)
• Change the color of the link to a third color when the link has been previously selected as defined by the browsers history.

Serious

WCAG 1.4.2 (A)

Audio and Video

WCAG 1.4.2.a (Audio Control)

A mechanism MUST be provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.

Meaning:

• Media or sound must not auto-play without the user triggering the action.
• A control must be available for users to stop, pause, or adjust the volume of the audio.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

Critical

WCAG 1.4.3 (AA)

• Color and Contrast
• Links

WCAG 1.4.3.a (Color Contrast (regular text))

Regular text and images of regular text MUST have a contrast ratio of at least 4.5 to 1 with the background.

Meaning:

Regular text (text sized below 18 point or text sized below 14 point bold) and images of regular text must have a contrast ratio of at least 4.5 to 1 with the background.

Exceptions: Color Contrast is not required on Disabled/Inactive form controls and on Logotype.

Implementation:

• When using gradients or background images with varied colors use one CSS Pixel of sufficient color contrast separating the font from the background colors.
• Or using a color contrast picking tool pick the worst contrast pixel in the gradient (that is still within the height of the actual letter) + at least 1 pixel below the lowest letter and at least 1 pixel above the highest letter). If the worst pixel fails then the color contrast is not sufficient.
• Hover/focus states must have sufficient color contrast.

For best customer experience, ensure that:

• The visual focus indicator should have at least a 4.5 to 1 color contrast ratio. While the minimum requirement for WCAG is any visual focus must be present including the simple default browser 1 px dotted outline, this may be very difficult to see.
• The color contrast of visual information in icons should have a 4.5 to 1 color contrast ratio.

Serious

WCAG 1.4.3 (AA)

• Color and Contrast
• Links

WCAG 1.4.3.b (Color Contrast (large text))

Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.

Meaning:

• Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.

Exceptions: Color Contrast is not required on Disabled/Inactive form controls and on Logotype.

Implementation:

• When using gradients or background images with varied colors use one CSS Pixel of sufficient color contrast separating the font from the background colors.
• Or using a color contrast picking tool pick the worst contrast pixel in the gradient (that is still within the height of the actual letter) + at least 1 pixel below the lowest letter and at least 1 pixel above the highest letter). If the worst pixel fails then the color contrast is not sufficient.
• Hover/focus states must have sufficient color contrast.

For best customer experience, ensure that:

• The visual focus indicator should have at least a 4.5 to 1 color contrast ratio. While the minimum requirement for WCAG is any visual focus must be present including the simple default browser 1 px dotted outline, this may be very difficult to see.
• The color contrast of visual information in icons should have a 4.5 to 1 color contrast ratio.

Serious

WCAG 1.4.4 (AA)

Text

WCAG 1.4.4.a (Resize (200%))

The page MUST be readable and functional when browser zoom is set to 200% of its initial size.

Meaning:

The page must be readable and functional when browser zoom is set to 200% of its initial size.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

• Pages are developed in a responsive design - upon change of screen size, or browser port size — the responsive layout appears.
• If a page is not developed in a responsive way — avoid horizontal scrolling when the page content is resized to 200%. The content should be visible without scrolling horizontally.

Serious

WCAG 1.4.5 (AA)

Images

WCAG 1.4.5.a (Images of Text)

If the same visual presentation can be made using text alone, an image MUST NOT be used to present that text.

Meaning:

Images must not contain text, unless it is required because of a Trade Name, Service Mark, Copyright, or Registered Trademark or there is a technological limitation (such as location/time based content).

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 2.1.1 (A)

• Device-Independent Input
• Links

WCAG 2.1.1.a (Keyboard Navigation)

Page functionalities MUST be available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard.

Meaning:

• Page functionalities must be available using the keyboard alone unless the functionality cannot be accomplished in any known way using a keyboard.
• Server-side image map must have text links for each active region.
• Elements must not use device-dependent event handlers.
• Instructions must be provided to explain non-standard keyboard interactions that are required to access an element.
• Modal must have a method to dismiss/close it AND dismiss/close without submitting data.

Implementation:

Do not use technologies where a keyboard user can't interact with said element

For best customer experience, ensure that:

Modals or layers that appear should close on ESC.

Critical

WCAG 2.1.1 (A)

Device-Independent Input

WCAG 2.1.1.b (Shortcut Keys)

Page-specified shortcut keys and accesskeys MUST NOT conflict with existing browser and screen reader shortcuts.

Meaning:

Accesskey attribute value must be unique and not be repeated elsewhere on the same page. See 4.1.1.c Duplicate Attributes

Element must not conflict with existing browser or screen reader shortcut(s).

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

Avoid accesskey attributes.

Critical

WCAG 2.1.2 (A)

Device-Independent Input

WCAG 2.1.2.a (Keyboard Trap)

Keyboard focus MUST NOT be locked or trapped in a particular page element and the user MUST be able to navigate to and from all navigable page elements using only a keyboard.

Meaning:

Using only a keyboard, the user must be able to move freely in and out of objects or content without having to use another tool or device to interact with the element; and is otherwise not stopped using only the keyboard.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 2.2.1 (A)

Animation, Motion, and Timed Content

WCAG 2.2.1.a (Timing Adjustable)

If a page or application has a time limit, the user MUST be given options to turn off, adjust, or extend that time limit.

Meaning:

• The user must be able to extend the session with the use of a keyboard.
• The user must be allowed 20 seconds or more to extend the session with a single simple action (Ex: spacebar keypress) and must be given the ability to extend the time limit no less than 10 times.
• Users must be warned before the time-out is reached through a textual notification - generally a modal window.
• The mechanism (ie. Modal) must be visually accessible with a mouse, function and gain immediate focus with a keyboard and screen reader, and allow for the extended time to be selected.

Implementation:

Give a user a minimum of 90 seconds to make a selection to a timeout warning message.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 2.2.2 (A)

• Animation, Motion, and Timed Content
• Images

WCAG 2.2.2.a (Pause, Stop, or Hide Content)

Automatically moving, blinking, or scrolling content that lasts longer than 5 seconds MUST be able to be paused, stopped, or hidden by the user.

Meaning:

• The element must not contain moving or blinking content that lasts more than 5 seconds and does not have a mechanism to pause, stop or hide it.
• Content not have text decoration:blink or use the BLINK element.
• Marquee elements must not be used.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

Avoid anything that moves, blinks, or changes without the user's control. (ie Auto changed carousels)

Critical

WCAG 2.2.2 (A)

Animation, Motion, and Timed Content

WCAG 2.2.2.b (Automatically Updating Content)

Automatically updating content MUST be able to be paused, stopped, or hidden by the user or the user can manually control the timing of the updates.

Meaning:

• Carousel must have a mechanism to pause, stop, or control the changing content.
• Element must not contain automatically updating content that does not have a mechanism to pause, stop, hide, or control the timing of the updates.

Implementation:

Structure: Use semantic structure for the carousel to support proper function of assistive technology.

Functionality: Add functionality to display and announce carousel items.

Animations: Add a transition animation between items and ensure users can stop and resume it.

Styling: Style the carousel to make sure it’s usable and readable by everyone.

For best customer experience, ensure that:

Avoid anything that moves, blinks, or changes without the user's control. (ie Auto changed carousels)

Critical

WCAG 2.3.1 (A)

Animation, Motion, and Timed Content

WCAG 2.3.1.a (Flashing Content)

A page MUST NOT contain content that flashes more than 3 times per second unless that flashing content is sufficiently small, the flashes are of low contrast and do not violate general flash thresholds.

Meaning:

Flashing content must not be used.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 2.4.1 (A)

• Headings
  
• Links
  
• Within-Page Navigation

WCAG 2.4.1.a (Skip Navigation, Headings or Landmarks)

A method MUST be provided to skip navigation and other page elements that are repeated across web pages. If a page has a proper heading structure and/or ARIA landmarks, this is a sufficient technique instead of a 'Skip to main content' link.

Meaning:

• The page must have a skip link, proper heading structure OR ARIA landmarks.
• The skip link provided must function as expected and not be broken.
• The skip link provided must become visible when it receives focus.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

• ARIA landmarks should be used.
• Page sections should be defined within ARIA landmarks.
• A skip link should not be included when there is no repetitive block of content/links on the page. The presence of a skip link (when it is not needed) is confusing.
• A skip nav link should be available to screen reader users and keyboard only users. While WCAG Success Criteria 2.4.1 can be passed with ARIA Landmarks and/or good heading structure, these methods are not as accessible to keyboard only users.
• The skip link to the main content should be the first link on the page.
• The skip nav link should work in webkit browsers. There is a bug in some versions of webkit. This is a browser bug, not a WCAG failure.

Serious

WCAG 2.4.1 (A)

iframes

WCAG 2.4.1.b (Titles on Frames)

Frames MUST have descriptive, informative and unique titles.

Meaning:

• Frames and iframes must have a unique <title>
• Frame titles must not be duplicated on the same page.
• The title must be meaningful to users, similar to a pages' <title> attribute.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 2.4.2 (A)

Page Titles

WCAG 2.4.2.a (Titles on Pages)

Pages MUST have descriptive and informative page titles.

Meaning:

Pages must have a <title> attribute that is meaningful and descriptive to the page's content.

Implementation:

The title of each Web page should:

• Identify the subject of the Web page
• Make sense when read out of context, for example by a screen reader or in a site map or list of search results

Be short

It may also be helpful for the title to:

• Identify the site or other resource to which the Web page belongs
• Be unique within the site or other resource to which the Web page belongs

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 2.4.3 (A)

• Within-Page Navigation
  
• Links

WCAG 2.4.3.a (Focus Order)

The navigation order of links, form elements, etc. MUST be logical and intuitive.

Meaning:

• When a field specific form error message is returned, focus must be moved to that error message or the field specific to the error.
• Focus must be maintained (trapped) within a modal or overlay. Using only a keyboard, the user must not be able to interact with anything outside of the modal area.
• When the modal is activated, focus must be automatically placed inside of the modal.
• When the modal is closed, keyboard, screen reader and visual focus must be placed on the triggering element; or the element that last had focus before the modal appeared.
• Content that is not in focus, must not be able to be interacted with by any user - unless it is brought into focus for all users.
• A modal must not be the next thing in the sequential navigation order after the control that triggered the modal. For instance, a modal div container must not be inline of the code source directly following the triggering element; (ie. Link, button, timeout, etc.) but instead have that code must be placed at the bottom of the page code source.
• Tab Order must be logical and intuitive, and follow the visual order and natural reading order of the page.
• Tab Indexes with a POSITIVE integer (0(zero) or greater) must not be used.

Implementation:

• Always ensure the code source order matches to the visual reading order of Top to Bottom and Left to Right. Do not use .js to insert visual elements outside of the code source natural order.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 2.4.4 (A)

Links

WCAG 2.4.4.a (Link Purpose (In Context))

The purpose of each link MUST be able to be determined from the link text alone, or from the link text and the context. Context = same sentence, paragraph, list item, or table cell as the link, or in the table header cell for a link in a data table or ARIA techniques to associate additional text on the page with the link.

Meaning:

The purpose of each link must be able to be determined from the link text alone, or from the link text and the same sentence, paragraph, list item, or table cell as the link, or in the table header cell for a link in a data table or ARIA techniques to associate additional text on the page with the link.

Implementation:

Avoid "Click Here" or "Learn More" or multiple links with the same link text.

For best customer experience, ensure that:

The purpose of each link should be able to be determined from the link text alone.

Serious

WCAG 2.4.5 (AA)

Site Navigation

WCAG 2.4.5.a (Multiple Ways)

Multiple ways MUST be available to find other web pages on the site - at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages.

Meaning:

Multiple ways must be available to find other web pages on the site - at least two of:

• a list of related pages,
• table of contents,
• site map,
• site search,
• or list of all available web pages.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

Moderate

WCAG 2.4.6 (AA)

Headings

WCAG 2.4.6.a (Descriptive Headings)

Page headings MUST be informative.

Meaning:

Headings must be informative and clearly describe the purpose or topic that follows it.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Moderate

WCAG 2.4.6 (AA)

• Form Validation and Feedback
  
• Custom Widgets

WCAG 2.4.6.b (Descriptive Labels)

Labels for form and interactive controls MUST be informative.

Meaning:

• Labels for form and interactive controls must clearly describe the purpose of the control.
• If multiple buttons on the page have the same name but perform different actions it must be conveyed via text associated with the individual button the distinct purpose of the individual button.
  See 3.3.2.a (Visible Labels) and 1.3.1.c (Programmatic Labels)

Implementation:

• Avoid duplicating label text on the same page.

Use explicit form labels on form elements (select menu, inputs, checkboxes, radio buttons, buttons etc.,) and always make the text label for that control visible on form elements at all times. See 1.3.1.c (Programmatic Labels)

For best customer experience, ensure that:

No Best Practice Recommendations

Moderate

WCAG 2.4.7 (AA)

WCAG 2.4.7.a (Focus Visible)

It MUST be visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

Meaning:

At the minimum, the browser's default visible focus indicator must not be disabled.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

Consider enhancing the browsers default visible focus indicator.

The visual experience for keyboard only users should be identical to the visual experience for mouse users.

The visual focus indicator should have at least a 4.5 to 1 color contrast ratio. While the minimum requirement for WCAG is any visual focus must be present including the simple default browser 1 px dotted outline, this may be very difficult to see.

Critical

WCAG 3.1.1 (A)

Language

WCAG 3.1.1.a (Default Page Language)

The language of the page MUST be identified using the HTML lang attribute.

Meaning:

• The language of the page must be identified using the HTML lang attribute.
• The value of the lang attribute must be valid.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 3.1.2 (AA)

Language

WCAG 3.1.2.a (Language of Parts)

The language of sections of content that are a different from the page’s default language MUST be identified, using the HTML lang attribute.

Meaning:

• The language of sections of content that are different from the page’s default language MUST be identified, using the HTML lang attribute.
• The value of the lang attribute must be valid.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Serious

WCAG 3.2.1 (A)

Dynamic Content (JavaScript, AJAX)

WCAG 3.2.1.a (Context Changes (on Focus))

When a page element receives focus, it MUST NOT result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

Meaning:

• The loading of a webpage must not cause another window or popup to automatically gain focus.
• If an element receives visual focus, the keyboard focus must also be focused and not moved or redirected.
• Elements on a page that receive focus using a keyboard must not cause an unannounced change on the page.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 3.2.2 (A)

Dynamic Content (JavaScript, AJAX)

WCAG 3.2.2.a (Context Changes (on Input))

When a user inputs information or interacts with a control, it MUST NOT result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.

Meaning:

When the user selects or inputs a value, a substantial change must not occur without warning the user first before the action is initiated.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

• A submit button should be provided on forms, even if the form can be implicitly submitted.
• Links that open in a new window should indicate this in the link text.

Critical

WCAG 3.2.3 (AA)

Site Navigation

WCAG 3.2.3.a (Consistent Navigation Patterns)

Navigation patterns that are repeated on web pages MUST be presented in the same relative order each time they appear and MUST NOT change order when navigating through the site.

Meaning:

Navigational elements that appear across pages must be presented in the same relative order across all pages of the website.

Implementation:

Implement a template and code library to be reused across the website to avoid changing components.

For best customer experience, ensure that:

No Best Practice Recommendations

Moderate

WCAG 3.2.4 (AA)

• Site Navigation
  
• Custom Widgets
  
• Links
  
• Forms: User
• Input and Validation

WCAG 3.2.4.a (Consistent Identification)

Elements such as labels, names, and text alternatives for content that have the same functionality across multiple web pages MUST be consistently identified.

Meaning:

Interface elements (such as links, buttons, active icons, informational icons, objects, error handling, etc.) that are repeated across webpages share and the same function are identified using a consistent implementation.

Implementation:

Implement a template and code library to be reused across the website to avoid changing components.

For best customer experience, ensure that:

No Best Practice Recommendations

Moderate

WCAG 3.3.1 (A)

Form Validation and Feedback

WCAG 3.3.1.b (Errors Identification)

Efficient, intuitive and clearly identified text based alerts MUST be provided to users for form validation cues and errors.

Meaning:

• Error message must identify which field has the error.
• The error icon next to a field that has failed validation must identify the field; or the error must be described in text.
• The message that indicates that form submission failed must be exposed to assistive technologies.
• Input validation failures must be described in text.
  See 3.3.3.a (Error Suggestion)

Implementation:

Markup each field that has a data entry error with aria-invalid="true".

For best customer experience, ensure that:

• Error messages should be programmatically associated with the corresponding form field.
• Error message should describe precisely why the element failed validation.
• Position error message near the corresponding field so it is easy to visually associate it with the related field, especially when zooming or magnifying the screen.

Critical

WCAG 3.3.2 (A)

Form Validation and Feedback

WCAG 3.3.2.a (Visible Labels)

Sufficient labels for form field elements MUST be provided for all users (sighted and blind).

Meaning:

• The visible label must be persistent. For example, a placeholder can not be used as the only visual label for a text field. The placeholder is not visible after data is entered in the text field.
• The visible label must convey the purpose of the form control clearly. Visible label or visible label icon (ie. hourglass for search) must be marked up as an HTML LABEL element or aria-labelledby must be used to associate the visible label with the form control. See 1.3.1.c (Programmatic Labels)
• The visible label must be properly positioned - directly next to or above the form field.
• A visible group label must be present and the purpose of the group must be clear. See 1.3.1.d (Group Related Form Elements)
• Title attribute or visibly hidden labels do not suffice as a visible label.

Implementation:

Use explicit form labels on form elements (select menu, inputs, checkboxes, radio buttons, buttons etc.,) and always make the text label for that control visible on form elements at all times. See 1.3.1.c (Programmatic Labels)

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 3.3.2 (A)

Form Validation and Feedback

WCAG 3.3.2.b (Missing Instructions)

Sufficient instructions for form field elements MUST be provided.

Meaning:

• Essential instructions, needed for successful form element validation must be available in text for all users.
• Instructions must be complete, accurate and not misleading.

Implementation:

For best customer experience, ensure that:

Labels or instructions should specify when an input field requires a specific format.

When an input is limited to a range of values, the label or instructions should convey this.

When additional instructions/descriptions are provided for a control, they should be programmatically associated with the control.

Instructions for controls should be clear and sufficiently descriptive.

Position instructions/descriptions near their corresponding element(s) so it is easy to visually associate them with the related element, especially when zooming or magnifying the screen.

Critical

WCAG 3.3.2 (A)

Form Validation and Feedback

WCAG 3.3.2.c (Required Form Fields)

Labels, instructions, or error messages must be provided when form fields require user input.

Meaning:

The label or legend for each form field indicates it is a required field OR text instructions at the beginning of the form or set of fields describes which fields are required (or optional) AND an error message is provided that indicates the required field(s) was not completed. See 3.3.3.a (Error Suggestion)

• Optional fields must not be marked up with any visual or offscreen element that defines it as “Required” unless it truly is required to complete form validation.

Implementation:

Markup each required field with aria-required="true".

For best customer experience, ensure that:

• Labels or instructions should specify when an input field requires a specific format.
• When an input is limited to a range of values, the label or instructions should convey this.
• When additional instructions/descriptions are provided for a control, they should be programmatically associated with the control.
• Instructions for controls should be clear and sufficiently descriptive.
• Position instructions/descriptions near their corresponding element(s) so it is easy to visually associate them with the related element, especially when zooming or magnifying the screen.

Critical

WCAG 3.3.3 (AA)

Form Validation and Feedback

WCAG 3.3.3.a (Error Suggestion)

If input errors are automatically detected, suggestions MUST be provided in text for fixing the input in a timely and accessible manner before the data is submitted to the server.

Meaning:

Error messages must:

• indicate expected data format.
• indicate expected range of data values.
• instruct users how to fix the error.

Implementation:

Define a way for creating error messages, and use the same format throughout the website to make this more familiar to all users.

For best customer experience, ensure that:

• Error messages should be programmatically associated with the corresponding form field.
• Error messages should describe precisely why the element failed validation.
• Position error message near the corresponding field so it is easy to visually associate it with the related field, especially when zooming or magnifying the screen.

Serious

WCAG 3.3.4 (AA)

Form Validation and Feedback

WCAG 3.3.4.a (Error Prevention (Legal, Financial, Data))

If the user can change or delete legal, financial, student exam responses, or unrecoverable/unintentionally modified or deleted data, the changes/deletions MUST be reversible, verified, or confirmed.

Meaning:

• "Delete"/"Cancel" button must not immediately trigger the deletion of legal, financial, or data transaction in a database.
• Users must have the ability to undo an accidental deletion of the aforementioned data types.
• Users must be given the opportunity to review and edit information before data is submitted.

Implementation:

Deque has no further recommendation beyond WCAG Normative Standard.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 4.1.1 (A)

Markup Validity

WCAG 4.1.1.a (Formatting Errors)

Elements MUST have complete start and end tags.

Meaning:

Elements must not be missing closing tags.

Implementation:

Use HTML according to the W3C specifications.

For best customer experience, ensure that:

Use HTML according to the W3C specifications. Verify that the HTML passes the W3C validator. https://validator.w3.org/

Moderate

WCAG 4.1.1 (A)

Markup Validity

WCAG 4.1.1.b (Well-Formed)

Elements MUST be nested according to their specifications.

Meaning:

• DIV or P element must not be nested within a LABEL element.
• Elements must not be missing closing tags.

Implementation:

Use HTML according to the W3C specifications.

For best customer experience, ensure that:

Use HTML according to the W3C specifications. Verify that the HTML passes the W3C validator. https://validator.w3.org/

Moderate

WCAG 4.1.1 (A)

Markup Validity

WCAG 4.1.1.c (Duplicate Attributes)

Elements MUST NOT contain duplicate attributes.

Meaning:

Element must not contain duplicate attributes.

Implementation:

Use HTML according to the W3C specifications.

For best customer experience, ensure that:

Use HTML according to the W3C specifications. Verify that the HTML passes the W3C validator. https://validator.w3.org/

Moderate

WCAG 4.1.1 (A)

Markup Validity

WCAG 4.1.1.d (Unique IDs)

Element ID attribute values MUST be unique.

Meaning:

Element ID attribute values MUST be unique.

Implementation:

Use HTML according to the W3C specifications.

For best customer experience, ensure that:

Use HTML according to the W3C specifications. Verify that the HTML passes the W3C validator. https://validator.w3.org/

Moderate

WCAG 4.1.2 (A)

• Links
• Custom Widgets
  
• Custom Widgets (Javascript, ARIA)
  
• Form Validation and Feedback

WCAG 4.1.2.a (Name, Role, Value)

The name, role and value of page components MUST be programmatically determinable by assistive technologies.

Meaning:

• Generic Regions or custom controls must have appropriate text labels.
• Generic Regions or custom controls must have appropriate roles (ie. role=“generic” or role=“navigation”)
• The user state of an element must be correctly conveyed. (ie. Expanded / Collapsed; selected, etc...).
• When native HTML elements are not available, such as for tabs, modals and other dynamic widgets - ARIA must be used to indicate name, role and value.

Implementation:

Use native HTML whenever possible and according to the W3C specifications.

For best customer experience, ensure that:

• Use buttons to allow users to activate scripted functionality (form submission, play/pause, etc).
• Use links to allow users to activate the user-agent to change focus or to navigate to a new URL.
• If an element looks like a link, it should act like a link (change browser focus or URL) and be a link (or have a role="link")

Critical

WCAG 4.1.2 (A)

• Custom Widgets (JavaScript, ARIA)
• Form Validation and Feedback

WCAG 4.1.2.b (Custom Controls)

HTML markup MUST meet W3C specifications and facilitate accessibility support with assistive technologies.

Meaning:

• Elements using ARIA, must have all the ARIA attributes required for it’s role and must use valid ARIA attribute and values as defined by the WAI-ARIA group of the W3C.
• An element that visually appears like a button or has an ARIA role of button must function the same as a native button. The custom button must activate with enter.
• When native HTML elements are not available, such as for tabs, modals and other dynamic widgets - ARIA must be used to indicate name, role and value.

Implementation:

Use native HTML whenever possible and according to the W3C specifications.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical

WCAG 4.1.2 (A)

• Custom Widgets (JavaScript, ARIA)
• Form Validation and Feedback

WCAG 4.1.2.c (Compatibility)

Document features and components MUST be compatible with assistive technologies.

Meaning:

Features, content and components must be compatible with the use of ONLY assistive technology. If something is not available and compatible with assistive technology changes to the design, development, or UX are required.

Implementation:

Use native HTML whenever possible and according to the W3C specifications.

For best customer experience, ensure that:

No Best Practice Recommendations

Critical