Fundamentals of Accessibility

Last updated by Noel Varanda (opens in a new tab),
semantic HTML

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.


WCAGWeb Content Accessibility Guidelines, which define the standards for accessibility.
Assistive TechnologyRefers to the various technologies and devices that help users access software and the web.
a11yStands for "accessibility". A numeronym is a number-based word with 11 for the number of letters between the letters a and y.


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.


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.


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.


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.


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:

Level A (Minimum)

Focuses on essential accessibility requirements, providing a baseline level of accessibility by addressing basic elements such as alternative text for images and keyboard accessibility.

Level AA (Intermediate)

Builds upon Level A, incorporating additional considerations to improve the accessibility and usability of web content. It includes requirements like providing captions for multimedia and ensuring proper color contrast.

Level AAA (Highest)

Represents the highest level of accessibility compliance, encompassing advanced considerations. Level AAA requirements go beyond Level AA, covering aspects such as sign language interpretation and content that does not cause seizures.

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.

Accessibility Tree

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.

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.