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?

pfernandom
  • 929
  • 10
  • 22
  • 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 '14 at 06: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 '14 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](http://www.w3.org/TR/wai-aria/states_and_properties#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 '14 at 21:53

1 Answers1

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.

Community
  • 1
  • 1
AlastairC
  • 3,277
  • 21
  • 15
  • What's your take on this in 2021? – Paulito.Bandito Apr 01 '21 at 14:38
  • Section 508 has updated to use WCAG 2.0, so JS frameworks are not ruled out. However, see https://stackoverflow.com/questions/18853183/what-are-the-accessibility-implications-of-using-a-framework-like-angularjs/18861097#18861097 – AlastairC Apr 08 '21 at 15:29