Guide to WCAG Compliance

Introduction to WCAG

Web Content Accessibility Guidelines (WCAG) defines how to make Web content more accessible to people with disabilities. These guidelines also make Web content more usable by older individuals, those with low vision, color blindness, and changing abilities due to ageing, and often improve usability for users in general.

WCAG is organized by four main principles: Perceivable, Operable, Understandable, and Robust.

Web Content Accessibility Guidelines (WCAG) Rules:

STEP-1:

Skip to main Content functionality should be implemented, on the click of which focus should land on the first main content element.

STEP-2:

• Landmark identification: Landmarks should be specified in the code so that the same can be narrated and identified using shortcut keys D/R
• Page Titles: Every page of the Application must have a page-specific title.

STEP-3:

Color contrast ratio is the numerical value assigned to the difference in light between the foreground and the background. Minimum luminosity ratio for all colored content should be 4:5 between the foreground color (e.g., text, links, etc.) and the background color.

• AA: Text has contrast ratio of at least 4.5:1 for regular sized text(14px) and at least 3:1 for large scale text(at least 18/24px)
• AAA: Text has contrast ratio of at least 7:1 for regular sized text(14px) and at least 4.5:1 for large scale text(at least 18/24px)

=> Check the color contrast through this tool: Color Contrast Analyzer(CCA).

STEP-4:

• Responsive: The site should support up to 400% zoom view and should also support layout(1024×1280) changes.
• Text Spacing: Content and function retain meaning when users change elements of text spacing.
  
  Line height (line spacing) to at least 1.5 times the font size;
  Space the following paragraphs to at least 2 times the font size;
  Letter spacing (tracking) to at least 0.12 times the font size;
  Word spacing should be at least 0.16 times the font size.

Resize Text: Text can be resized to 200% without loss of content or function.

STEP-5:

• Narration: Name and Value Narration proper labels, titles, and Alt texts for images and IDs must be defined. Consider pagination links at the bottom of the page also. Error message /Success message/Alerts/Warnings ( State )Should be narrated.
• Keyboard Narration: Keyboard Navigation (Focus Mode) Every interactive element must be focusable. Any interactive element, e.g., description, should not be focusable. Keyboard navigation should be accessible using shortcut keys like T(go to the table), H(go to heading), F(go to form), K(go to link), etc. Heading Level Navigation: Headings should be in sequential order using focus mode and shortcut key H.
• Sequential Navigation Order: All elements should be accessible using the TAB key in the same order as they appear on the screen. Duplicate ID issue, Generally identified by Accessibility Insights for Web tool. Every legitimate HTML element should have a UNIQUE value for the id attribute. Links should be underlined throughout the application.

STEP-6

• Form: All mandatory fields should be narrated with Required and state and role narration. The state of interactive controls must be narrated. Example: Expanded, Collapsed, Checked, Unchecked, Unavailable (disabled).
• Drop-down lists handling – All content within the dropdowns (list items/ menu items) should be accessible using the keyboard.

STEP-7

• Dialog Box handling: When the dialog box opens, the focus should be on the interactive element, and the focus should not leave the dialog box until it is closed. The dialog box should be closed by clicking the Cancel/Close button and hitting the ESC key anywhere inside the open dialog box. And when the dialog box is closed, the focus should be set from where it was clicked.

STEP-8

• Testing Tools:

Screen readers (NVDA, JAWS) (Focus and Browse mode)
Colour Contrast Analyzer(CCA)
Accessibility Insights for Web(FastPass)
Lighthouse
Text Spacing