Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the <noscript> element accessible?

I'm testing my App with the WAVE (Web Accessibility Evaluation Tool) Chrome extension, and I get a warning for my <noscript> element. Specifically, the warning tells me to: "Ensure that scripted content is accessible. The content will be presented to very few users, but must be accessible if used."

Now, I've been trying to find a viable solution (tried with aria-hidden="true"), but can't seem to find a definitive one. Any idea?

Edit: my <noscript> element contains only a string of text: "You need to enable JavaScript to run this app."

Thanks!

like image 374
Bruno Mazza Avatar asked Aug 04 '18 10:08

Bruno Mazza


1 Answers

When the noscript element looks just as follows, it is perfectly accessible:

<noscript>You need to enable JavaScript to run this app.</noscript>

However, the WCAG 2 Techniques hardly use the noscript element. The only example I could find was in technique SCR19: Using an onchange event on a select element without causing a change of context, even though it is not more relevant here than in other JavaScript techniques.

The point of the warning in the WAVE extension is not that you need to add an ARIA attribute; the noscript dates from the HTML 4.10 specification from 1999, long before the introduction of WAI-ARIA, and it worked perfectly fine without ARIA attributes.

What you need to do is making sure that the JavaScript-enabled content on your site is accessible. (This is where WAI-ARIA may be relevant.)

How you deal with user agents that don't support JavaScript depends on your approach to website design. Assuming that you want to offer a useful fallback in user agents that don't support JavaScript, you can do the following:

  • Either you provide a functional alternative in the noscript element. However, in many cases (depending on what the JavaScript actually does), this will not be an equivalent fallback.
  • Or you use "progressive enhancement": i.e. you provide a baseline of functionality that works without JavaScript and then add JavaScript to provide a richer experience.

(Advocacy for progressive enhancement is one of the reasons why the noscript element is not used a lot (if at all) in "modern" accessibility techniques. However, progressive enhancement itself has also become the subject of debate. In 2013, its proponents already felt the need to defend it against the assumption that everyone has JavaScript enabled; see e.g. Progressive enhancement is still important from July 2013.)

like image 66
Tsundoku Avatar answered Sep 28 '22 06:09

Tsundoku