What are the accessibility implications of using a framework like angularjs?

Question

Where we stand

We are under a push for web accessibility in order to conform to certain laws governing public/educational institutions. Until now we've been getting by just making sure:

1. our layouts were logically ordered ;
2. images had alt="" tags. but are quickly learning that we need to get in gear and really think about this.

What we are considering

We've been looking at AngularJS as a framework for dynamic web applications, but are concerned about what it may mean for our accessibility standing.

I understand that a browser with no JavaScript will likely break a highly dynamic Angular app (e.g. expressions such as {{ item.something }} embedded in the markup, using ng-repeat to build lists from a single <li>, client-side partial views as empty tags, etc.).

Question

I'm wondering if there is a well-understood best-practices or information resources for these kinds of frameworks that rely heavily on dynamic markup and inline-tagging that could be perceived as gibberish to something like a screen-reader or even a browser with JavaScript and CSS turned off.

Answer 1

All the same principles apply, such as using alt text for images, good use of headings, use the appropriate HTML(5) structures for content.

You might be creating it via JavaScript, but screen readers of the last ~5 years understand that, and use the browser's accessibility API to access the DOM. The non-JavaScript aspect is simply not an accessibility issue. The number of screen reader users without JavaScript is the same as the general population, therefore it comes across as fully formed HTML rather than the raw markup you see in development.

NB: I consider progressive enhancement a good approach, but with Angular.js you are deciding up-front not to take that approach. If you want to know about performance and progressive enhancement, I think this answered it.

Of course, you don't use Angular.js just to create standard content pages, so you need to get up to speed with the WAI-ARIA specification, and how to use ARIA in HTML. The specifies how to dynamically markup things that are not covered by traditional HTML practices, such as tabs, trees, grids etc.

For a practical example of WAI ARIA techniques in practice, I would have a look at the Whatsock technical style guide.

One difference compared to traditional websites are how you manage page updates, as you manage the keyboard focus rather than refresh the page. But apart from that, WAI-ARIA is the thing to read up on.