Fundamentals of Accessibility

The POUR fundamentals, also known as the principles of web accessibility, are a set of guiding principles that help developers create inclusive and accessible websites.

Glossary

POUR

Read The Web Accessibility Introduction I Wish I Had (opens in a new tab) to understand POUR in depth.

By following the POUR fundamentals, developers can ensure that their websites are accessible and usable for all users, regardless of their abilities or disabilities.

Perceivable

The principle of perceivability focuses on making web content accessible and perceivable to all users, regardless of their abilities.

• Provide alternatives for non-text content (alt text for images, transcripts for audio/video).
• Ensure information can be perceived through different senses.
• Make content accessible for individuals with visual or hearing impairments.

Operable

The operable principle ensures that web content is operable by people with various abilities.

• Support keyboard navigation for users who cannot rely on a mouse.
• Allow users sufficient time to read and interact with content.
• Avoid content that may trigger seizures.
• Design with considerations for individuals with motor disabilities.

Understandable

The understandable principle emphasizes creating web content that is easy to understand and navigate.

• Use plain and concise language to make the content easily comprehensible.
• Organize information in a logical and intuitive manner.
• Avoid jargon and complex terminology.
• Provide clear instructions or assistance when needed.

Robust

The robust principle focuses on building web content that can be interpreted and used reliably by a wide range of user agents, including assistive technologies.

• Adhere to web standards and specifications.
• Use semantic markup to enhance compatibility.
• Follow best practices in coding and development.
• Ensure content can be reliably interpreted by different user agents and assistive technologies.

Levels of conformance

We recommend reading W3C's Understanding Levels of Conformance (opens in a new tab) to gain a deeper understanding.

The three levels of conformance, as defined by the WCAG, categorize the accessibility requirements for web content. Here's a brief overview of each level:

The levels of conformance offer a progressive approach, allowing organizations to work towards achieving higher levels of accessibility compliance, with Level AA being the recommended target for most websites.

The accessibility tree

Why the Accessibility Tree is key to understanding accessible applications (opens in a new tab).

Think of the Accessibility Tree as a parallel structure to the DOM tree in your React app, but with additional information related to accessibility.

Just like the DOM tree represents the structure of your app's elements, the Accessibility Tree represents the accessibility-related information of those elements.

It includes details about the purpose, role, properties, and states of elements from an accessibility perspective and enables assistive technologies, like screen readers, to understand and interact with your app. Essentially, it ensures that users with disabilities can access and use your app's content, functionalities, and controls.

Impact on your React app

Changes made to the DOM tree dynamically should be accurately reflected in the Accessibility Tree. This ensures that assistive technologies can convey updated information to users as they interact with your app.

Inspecting the Accessibility Tree using browser developer tools and accessibility testing tools helps identify accessibility issues. By addressing these issues, you create a more inclusive experience for users with disabilities.