E-mail List Archives
Thread: About Accessibility Test and WAI-ARIA and WCAG
Number of posts in this thread: 2 (In chronological order)
From: Yoandry Collazo
Date: Fri, Dec 14 2018 2:48PM
Subject: About Accessibility Test and WAI-ARIA and WCAG
No previous message | Next message →
I'm a newbie in Accessibility matter, I need to understand how to work with
WAI-ARIA and WCAG, I know the objective of both is the same, but I should
use both documentation? When I use the WCAG checklist
<https://www.wuhcag.com/wcag-checklist/> is enough to say my components is
accessible?
How should I test accessibility on ReactJS components?
Thanks in advance!
Yoandry
From: glen walker
Date: Fri, Dec 14 2018 3:11PM
Subject: Re: About Accessibility Test and WAI-ARIA and WCAG
← Previous message | No next message
WCAG is the "what" and contains the technical requirements (although
technology agnostic). The success criteria are how you measure whether
your site is compliant or not.
WAI-ARIA is the "how", if your implementation is in html (technology
specific) *and* you can't implement it using native html.
For example, WCAG 1.1.1 talks about "non-text content". It does not say
"images" or the <img> tag because WCAG is technology agnostic. And it says
non-text content must have "text alternatives". It does not say your
images must have an ALT attribute.
If your image can't use a native <img> tag and you have to use a
non-semantic element, such as a <div> or <span>, then WAI-ARIA can help.
You can use role="image" and aria-label to help the "non-text content" to
have a "text alternative".
So, you'll want to use WCAG (
https://www.w3.org/WAI/standards-guidelines/wcag/) to test and measure how
accessible your website is.
You'll want to use WAI-ARIA (
https://www.w3.org/WAI/standards-guidelines/aria/) if your website fails
any WCAG success criteria and you can't fix the problem using native html.
Whether you use react or angular or bootstrap or whatever, doesn't matter.
If the component you use from a third party library does not generate
headings or lists or tables or form elements with appropriate semantics,
then they fail. How you fix the problem might be library dependent.
Glen