Skip to Main Content

Considering A11y in Modern Javascript Applications

taught by: Louise Clark

Session Summary:

Modern Javascript web applications, particularly single page applications or SPAs, can stand in the way of accessibility by creating a multitude of road blocks for disabled users. In this presentation we will: discuss common accessibility concerns around SPAs, learn how to set up a Javascript application using best practices that include keyboard support, focus management, live region announcements and reduced motion animation, dreate custom interactive UI widget examples using WAI-ARIA and Javascript, and finally look at debugging an application using the Axe-Core plugin.

Description:

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” ~Tim Berners Lee

“Universal Design is the design and composition of an environment so that it can be accessed, understood and used to the greatest extent possible by all people regardless of their age, size, ability or disability.” ~Center for Universal Design

Digital accessibility is a fundamental civil right that allows all people access to digital content and applications. This means user access to websites, mobile applications, video games, electronic documents and more. Of the more than 1.31 billion people globally who have disabilities, more than half use either a desktop computer or mobile phone in their everyday lives. Valuing accessibility and baking it into development workflows creates applications that increase findability (love that SEO), improves user experience, and promotes inclusivity.

Unfortunately, modern Javascript web applications, particularly single page applications or SPAs, can stand in the way of accessibility by creating a multitude of road blocks for disabled users. In this presentation we will:

  • Discuss common accessibility concerns around SPAs

  • Learn how to set up a Javascript application using best practices that include keyboard support, focus management, live region announcements and reduced motion animation

  • Create custom interactive UI widget examples using ARIA and Javascript

  • Look at debugging an application using the Axe-Core plugin

Practical Skills:

  • semantic html
  • focus management
  • javascript best practices