4

I'm creating the analysis for a web application using AngularJS. The application needs to be 508 standards compliant.

I know that certain devices used for accessibility read the HTML directly and using alt and longDescr attributes in elements, they get the content of the website.

The problem I see is that if you see the page source (not the generated source), when using certain functionality in Angular like ng-view and ng-include the content of the templates inserted in the page will not show in the source code, only in the generated source.

My question is, is there a problem in compliance with 508 standards by dynamically inserting templates?

In general, how compliant are AngularJS's features with 508 standards?

3
  • 1
    Assistive technologies such as screenreaders (JAWS, NVDA, VoiceOver etc) work against the live DOM, not the original source; dynamically inserting templates isn't itself a blocker; but still need to make sure that templates themselves are accessible and that the code that inserts the template uses appropriate techniques to notify screenreaders as appropriate: screenreaders typically don't announce new content or changes unless told to; so alerts, menus, dialogs, error messages, and sometimes field updates need special handling. I'm not familiar with what, if anything, angular does here.
    – BrendanMcK
    Nov 25, 2014 at 6:08
  • Thanks for the answer. The part about assistive technologies reading the live DOM is the main part of my question. I could add that at least for the part of the syntax in HTML, Angular can be compliant with 508 standards if you add "data-" to "ng-*" and change {{data}} for data-ng-bind. But still, as you say, I still have to know if DOM updates made by Angular can be detected by those assistive technologies.
    – pfernandom
    Nov 25, 2014 at 18:58
  • 1
    The changes can be detected, but will typically be ignored by default, so the bigger question is what the desired behavior is from anuser point of view for that piece of UI; for some UI, it may be appropriate to read it out immediately, for other, it may be appropriate to leave it as-is until the user navigates there - reading out every change could be excessively noisy! Check out the aria-live attribute that's part of WAI-ARIA; this can be used to signal to ATs that they should read a specific tag when its contents change.
    – BrendanMcK
    Nov 25, 2014 at 21:53

1 Answer 1

2

Angular.js can be used accessibly in practice, although it does take some work.

However, Section 508 in the current form is still referencing WCAG 1.0 with some minor differences.

Neither is very friendly to scripting, the section 508 text for 1194.22 (part i) is:

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

Not very practical with Angular.

Section 508 will update to use WCAG 2 at some stage (which specifies that JavaScript based interfaces should be accessible), it has been in the works for years, but the "rulemaking" has not completed yet as of Dec 2014.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.