Coming soon: Google and PwC share best practices on inclusive customer experience. Register now!
AngularJS by Google logo

Recently I had the pleasure and privilege of attending my first Annual International Technology and Persons with Disabilities conference, commonly referred to as CSUN. CSUN is a fabulous opportunity to learn from, network with and engage other practitioners in the accessibility and assistive technology fields. I had a wonderful time connecting with friends – both old and new – and learning how each of them strives to use technology to empower people with disabilities.

The first session I attended was entitled Diving into the Deep End: A Discussion on SVG, Angular, and Accessibility, presented by the fine Simply Accessible team. Sessions were limited to 40 minutes this year, and as these topics are rather complex, we dove deep but didn’t have time to swim very far on either of them. Still, I learned a lot and got some great pointers during the session.

SA’s fearless leader, Derek Featherstone, opened the session by proclaiming that the session title was akin to a SEO ploy to get a bunch of smart people in the room and invite discussion. Honestly I felt a bit rickroll’d, but Derek and team delivered and ended up having plenty of material and examples to present.

Accessible SVG

Derek began by talking about accessible SVG. SVG, or scalable vector graphics, is an XML markup language specification from the World Wide Web Consortium (W3C) for describing two-dimensional vector graphics. SVG has a few metadata features specifically intended for accessibility. Other SVG features lend themselves to accessibility as well, including the ability to use actual text in place of images of text, scalability and navigation features. (See the full list of SVG accessibility features.) Derek used an accessible SVG map as an example. He made several points concerning the map:

  • Not everything should be made responsive – for example, images can degrade when the resolution changes.
  • For formats that cannot be made completely accessible as in the case of a map, an alternative should be provided. In his example he furnishes an alternative in the form of a drop-down that can be used to select the state.
  • Pull in defaults that you can assume to minimize user effort (for example, use geolocation to set the default selection to the user’s current location).
  • SVG currently is missing functionality to make it fully accessible such as keyboard and focus management. If a feature is missing for a development environment, pull it from somewhere else. In the map example, the XML namespaces were pulled in and wrapped in anchors to permit keyboard and focus management.

We were fortunate to have Doug Shepers in attendance at the session. Doug has been doing a lot of work as part of the W3C SVG working group. He informed us that the SVG 2 Working Draft has been published. It seeks to overcome some of the accessibility limitations of SVG 1 by incorporating focus and tab order management and by mapping SVG to accessibility APIs. Check out the Describler experimental data visualization screen reader Doug developed for auditory description of charts and other SVG images without the need to write narrative descriptions which he also demonstrated at CSUN.

Angular Accessibility

The bulk of the session was spent talking about accessible SVG, leaving little time for discussion of Angular accessibility, yet it was still addressed. AngularJS is an extensible JavaScript framework from Google that lets developers extend their HTML vocabulary for declaring dynamic views of web applications. Derek pointed out that the accessibility issues that are occurring with AngularJS accessibility are the same issues that we saw when Ajax came out:

  • Mouse clicks are being bound to elements that are not natively keyboard-operable such as div and span elements and as such, controls cannot be operated from the keyboard.
  • Page titles within dynamic Single-Page Applications (SPAs) often remain constant from one screen to another because the view updates without loading a new document.
  • Issues with management of programmatic focus and automatic announcement of content changes within dynamic web applications.

These challenges and some solutions are further described in the Simply Accessible article Single page applications, Angular.js and accessibility.

Dylan Barrell of Deque Systems provided insight into the forthcoming AngularJS 2.0 release:

  • Angular 2.0 is a completely different code base. All web applications written using Angular 1.0 will have to be rewritten.
  • Angular 2.0 seeks to completely abstract away the browser document object model (DOM).

I’d like to thank the Simply Accessible team for a very informative session and look forward to attending more sessions in the future.

What are your thoughts on the accessibility of SVG and AngularJS? Leave your comments below.