Andrew's Digital Garden

WAI-ARIA vs WCAG

WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications (often referred to as just ARIA) defines ways to make web content more accessible. The attributes center around: roles, properties, and states.

These attributes only affect the accessibility of your website, they don't change structure, DOM, etc.

Ideally you don't use WAI-ARIA attributes unless you have to. It's better to rely on existing semantic HTML elements where possible. However, for more complicated patterns, it's sometimes necessary. [[20220801115655-no-aria-better-than-bad-aria]]

WAI-ARIA also has 'Authoring Practices' - design patterns made by W3C to help implement common patterns accessibly with WAI-ARIA.

WCAG

The Web Content Accessibility Guidelines are a standard for accessible web content. It's based off four primary principles: perceivable, operable, understandable, and robust.

It contains conformance levels, as it's often an important legal requirement for websites to have a standard level of compliance. The levels range from A, to AAA. Note that the general goal for most websites to achieve is AA.

How they mix together

WCAG is more of a standard, and WAI-ARIA is more of a toolset and methods. This means that it makes far more sense to be WCAG-compliant than WAI-ARIA compliant.

WAI-ARIA often focuses more on dynamic content, while WCAG focuses on static content.

Since WAI-ARIA also contains rules on how roles, properties, and states should be used, WCAG has rules pertaining to the use of WAI-ARIA. For example, WCAG 1.3.1 is a rule around WAI-ARIA roles.

[[a11y]]

WAI-ARIA vs WCAG