StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Any webpage that <em>requires</em> javascript in order to get the content out of it will likely be met with accessibility-related challenges. The accessibility of JavaScript frameworks is definitely an issue of contention, though really, any web application suffers drawbacks when content is provided dynamically, regardless of the framework used.</p> <p>There's no silver bullet to ensure your site will be accessible, and I certainly can't account for every JavaScript framework. Here's a few thoughts about how you can prevent your site from being totally inaccessible when using JavaScript:</p> <ul> <li><p>Follow the guidelines from <a href="http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/">WCAG 2.0 on client-side scripting</a>, and <a href="http://www.w3.org/WAI/WCAG20/quickref/">WCAG 2.0</a> in general.</p></li> <li><p>Avoid frameworks that require you generate the page's UI, controls and/or content entirely through javascript such as <a href="http://ukijs.org/">Uki.js</a>, or ones that use their own proprietary markup, like <a href="http://joapp.com/">Jo</a>. The closer you can stick with static(-ish), semantic HTML content, the better off you'll be. </p></li> <li><p>Consider using <a href="http://www.w3.org/TR/wai-aria/roles">ARIA roles</a> such as <a href="http://www.w3.org/TR/wai-aria/roles#application"><code>role="application"</code></a> and the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-live"><code>aria-live</code></a> attribute to indicate the areas of your page which are dynamic. More and more aria roles are being supported by assistive devices as time goes by, so using these aria attributes makes sense when you can add them to your app appropriately.</p> <p>In terms of JS libraries, check their source and see if they output any aria roles. They might not be perfectly accessible, but it would demonstrate they're considering assistive devices. </p></li> <li><p>Wherever possible, treat JavaScript as an enhancement rather than a necessity. Try to provide alternative methods or workflows to accessing the important information that don't require dynamic page updates.</p></li> <li><p>Test and validate your app with your users! Do some user testing sessions with people who use assistive devices or have other difficulties using web software. Nothing will help you prove your site is accessible more than watching real people use it.</p></li> </ul> <p>The last point is the most important, though many try to escape it. Regardless of the technology, the fact remains that you're developing an application that people will use. No machine or theory will ever be able to perfectly validate your application as being usable, but you're not building it for machines anyway. Right? :) </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload