Web Content Accessibility Guidelines (WCAG)

The WCAG has three levels of standards A, AA, and AAA. At Amex we aim for WCAG 2.1 A and AA standard with 11 additional AAA. On this page we will cover WCAG’s four principles and illustrate some of the most important standards (including the 11 AAA) to watch out for when making sure your experiences comply with WCAG accessibility guidelines.

Although the DLS provides accessible components, we can’t guarantee that by using DLS your experiences will be accessible. Accessible websites need to provide logical hierarchy, keyboard navigation, and many other inclusive patterns. By using WCAG 2.1 as your guide, you are setting up your product to be inclusive and provide an experience for all.

For a comprehensive overview of Amex success criteria, including market specifics, check our digital accessibility policy AENB77 and TECH06.26

For further details on how to interpret the standards check out the quick reference guide “How to meet WCAG2.1”.

Four Principles of Accessibility

WCAG base their guidelines and success criteria around 4 principles: perceivable, operable, understandable, and robust. The four principles lay a foundation necessary for anyone to access and use web content.

As you read through the principles, consider how this relates to your product and user journeys. When prioritising accessibility work, question what will make the difference between someone using your product or going to a competitor.

Principle 1 - Perceivable

Can users perceive the content? For example, an experience that relies on a user’s sense of sight will not be perceivable to those with limited or no ability to see. Offer alternative ways of perceiving information and user interface components. Keep in mind that many assistive technologies, such as screen readers and closed captioning, can interpret text in a way meaningful to their users.

Tips:

• Provide captions and other alternatives for multimedia. See Video for example.
• Provide text alternatives for non-text content.
• Create content that can be presented in different ways without losing its meaning.
• The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, with a 3:1 ratio for large-scale text.
• Interactive elements must have a 3:1 ratio with their background. For more details on color accessibility read our Color accessibility blog.

Perceivable - WCAG Guidelines

Here are some of the most important perceivable standards to watch out for when making sure your experiences comply with the latest WCAG accessibility guidelines. For a comprehensive overview, check out the quick reference guide for “How to meet WCAG 2” and our Digital accessibility policy.

Text Alternatives

Most accessibility devices rely on text to turn in to audio or braille

Example - Provide text alternatives for non-text content

      <button
  class="glyph dls-glyph-close"
  aria-label="Close"
></button>
    

      <button
  class="glyph dls-glyph-close
></button>
      
    

Time Based media

Provide text and audio description for non-live multimedia.

Adaptable

Build alternative ways of presenting content into markup, labels, navigation and instructions.

Distinguishable

Be aware of how color, contrast, and text size affect accessibility.

Example - Text Color Contrast

Typography must adhere to WCAG 2.1 guidelines level AA, which requires a contrast ratio of at least 4.5:1 for text and 3:1 for large-scale text. For more details on of text styling and color accessibility read our Color accessibility blog.

Principle 2 - Operable

User interface components and navigation must be operable. Can users use the UI components and navigate the content? For example, someone who can’t use a mouse or touch screen will be unable to interact with a component that requires a hover interaction. Always offer alternative methods.

Tips:

• Give users enough time to read and use content.
• While you should make all functionality available by keyboard, offer non-keyboard alternatives as well.
• Dont title override, dont use non-operation HTML elements.
• Remember that hardware or software directional controllers (such as a D-pad, trackball, or keyboard) allow users to jump from selection to selection in a linear fashion.
• Support all interaction types when using custom js (if you are using J.S to add custom functionality upon user action, remember to not only handle clicks, but keyboard and touch input as well).
• Don’t use non-focusable html elements as actionable elements.
• Don’t use css for logical/meaningful ordering. Markup should always have elements in logical order for those using keyboard navigation, css element ordering should only be used for decorative purposes.
• Do not use content that causes seizures or physical reactions, anything that flashes more than three times in any one second, or the flash is below flash and red flash thresholds.
• Help users navigate and find content, by providing the correct headings H1, H2, H3.
• Don’t use CSS for logical/meaningful ordering. Markup should always have elements in logical order for those using keyboard navigation, CSS element ordering should only be used for decorative purposes.
• Touch targets should be a minimum of 44x44px.

Operable - WCAG Guidelines

Here are some of the most important operable standards to watch out for when making sure your experiences comply with the latest WCAG accessibility guidelines. For a comprehensive overview, check out the quick reference guide for “How to meet WCAG 2” and our Digital accessibility policy.

Keyboard Accessible

Card Members should be able to operate everything using just a keyboard.

Enough Time

Provide users with the time they need to read and use content.

Example - Give users enough time to read and use content

Seizure Avoidance

To avoid causing seizures, do not flash page content more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red.

Navigable

Users should easily be able to find content and navigate the site.

Example - Don’t use non-focusable html elements as actionable elements

      
        <button>Do something</button>
      
    

      
        <div tabindex='1'>Do something</div>
      
    

Example - Don’t use CSS for logical/meaningful ordering

      
        <ul>
          <li>Step 1</li>
          <li>Step 2</li>
        </ul>
      
    

      
        <ul style="display: flex">
          <li style="flex-order: 2;">Step 2<li>
          <li style="flex-order: 1;">Step 1<li>
        </ul>
      
    

Example - Provide correct headings h1, h2, h3

      
        <h1>Page Header</h1>
        <h2>Section Header</h2>
        <h3>Subsection Header</h3>
      
    

      
        <h1>Page Header</h1>
        <h1>Large Text</h1>

      
    

Input Modalities

Make it easier for users to operate functionality through various inputs including keyboard.

Example - Touch targets

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 28x28px, but the padding surrounding it is actually 44x44px providing an appropriate touch target.

Principle 3 - Understandable

The information you provide and the operation of the user interface must be understandable. Can users understand the content? Can users understand the interface, and is it consistent enough to avoid confusion? By using DLS components and guidelines, you help provide a consistent experience to the customer.

If you want to read more into cognitive and learning disabilities, check out Techniques for The Cognitive and Learning Disabilities Accessibility Task Force (COGA) (w3c.github.io)

Tips:

• When using icons use them for the same semantic meaning throughout a website.
• Make text readable and understandable.
  • Don’t use a URL as a link.
  • Avoid using blocks of all-capitalised letters in your content.
  • Be succinct: Keep content and accessibility text short and to the point. Screen reader users hear every UI element read aloud. The shorter the text, the faster the screen reader users can navigate it.
  • Don’t use “learn more” or “click here.”
• Help users avoid mistakes and make sure they know how to correct them with clear messaging specific to the type of error.

Understandable - WCAG Guidelines

Here are some of the most important understandable standards to watch out for when making sure your experiences comply with the latest WCAG accessibility guidelines. For a comprehensive overview, check out the quick reference guide for “How to meet WCAG 2” and our Digital accessibility policy.

Readable

Make sure text content is understandable

Predictable

Users should know what to expect as they navigate through a journey.

Input Assistance

Help a user to provide accurate information by clearly identifying errors and suggesting how to fix them, as well as verifying changes and making them reversible, if possible.

Example - Help users avoid and correct mistakes

Principle 4 - Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents (browsers), including assistive technologies. Robust standards aim to maximize compatibility with current and future users tools.

Tips:

• Using exact semantic elements will ensure maximized compatibility as sometimes different technologies’ interpretations of aria roles/attributes vary
• In content implemented using markup languages:
  • Elements have complete start and end tags.
  • Elements are nested according to their specifications.
  • Elements do not contain duplicate attributes.
  • Any IDs are unique, except where the specifications allow these features.
• For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined.
• States, properties, and values that can be set by the user can be programmatically set.
• Notification of changes to items is available to user agents, including assistive technologies.

Robust - WCAG Guidelines

Here are some of the most important robust standards to watch out for when making sure your experiences comply with the latest WCAG accessibility guidelines. For a comprehensive overview, check out the quick reference guide for “How to meet WCAG 2” and our Digital accessibility policy.

Compatible

Make content compatible with current and future assistive technologies.