IAAP Webinar – Web Accessibility techniques for React and Angular

I have the honor of presenting a webinar for IAAP – International Association of Accessibility Professionals. Please see the information below.

Date: Thursday, March 28, 2019
Time: 11:00 a.m. - 12:30 p.m. Eastern (UTC - 4 hours)
Speaker(s): Chris Lane, Accessibility Engineer, VMware
Target Audience:  Web developers working with AngularJS or ReactJS
Skill Level:  Beginner-Intermediate
Register now:  http://bit.ly/webMar19

Overview

Currently, many web developers are not exposed to accessibility requirements until later in their careers. Furthermore, training provided for React and Angular usually does not address accessibility. This webinar intends to fill in these blanks by demonstrating techniques for accessible web development using React and Angular.

This webinar will address page titles, focus management, keyboard event handling, ARIA attributes, React Fragments and provide an introduction to bootstrap-react which is a BETA release of AccDC 4X + React for building advanced accessible ARIA widgets within the React IDE.

Target Audience

Web developers working with Angular or React

Skill Level

Beginner and intermediate

Focus

What is focus?

According to the Google Developer’s Definition

Focus refers to which control on the screen (an input item such as a field, checkbox, button, or link) currently receives input from the keyboard, and from the clipboard when you paste content.

Technically, focus is a state. But the non-technical definition as a noun is “the center of interest or activity”. The definition as a verb as used in “focus on” is to “pay particular attention to”.

There are two ways an element can gain focus, as the result of the user pressing the tab key to iterate through the tab chain, or by programmatic focus movement. In order for programmatic focus movement to work, the element must be a standard interactive elements such as a <button> element

When a element gains focus, ALL users should pay attention to it.

Focus Management

What is Focus Management?

  • Ensuring that all users can tell which element has focus
  • Ensuring that focus is never lost
  • Ensuring that focus is set to the best place for the user at any given time while the application is in use

There is great example at https://reactjs.org/docs/accessibility.html under “Programmatically managing focus”. See the text below.

Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this, we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.

Why do Focus Management?

  • To prevent confusion
  • To direct users to newly added content.

How do screen readers handle browser focus events?

Desktop

If browser focus is set to an active element such as a <button>, the screen reader’s cursor will be set to the <button> and its name. role and state information supplied by the focused element.

If browser focus is set to static content, the screen reader will read the content from beginning to end if the user does not press any keys while it is doing so.

Mobile

The mobile screen reader cursor follows browser focus in most cases. Timeouts have to be used in some cases.

See http://chrislane.info/ng-routing-focus-top-offscreen-text/dist/

See the relevant code below


onRoute(e) {
if(e){
this.elementToFocusAfterRouting.nativeElement.textContent = "Top of " + e.target.innerText;
this.elementToFocusAfterRouting.nativeElement.blur();
setTimeout(()=>{this.elementToFocusAfterRouting.nativeElement.focus();}, 500);
this.setCurrentRouterLink(e.target.innerText);
}
}

Single-Page Application (SPA)

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

See https://en.wikipedia.org/wiki/Single-page_application

See Isomorphic JavaScript

Components

Building blocks …

Routing

What is routing?

The following definition can be found at https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm.

“Routing is where you try to map URLs to destinations that aren’t physical pages such as the individual views in your single-page app.”

Users expect:

  • The URL displayed in the address bar always reflects the thing that they are viewing.
  • They can use the browser’s back and forward buttons…successfully.
  • They can navigate to a particular view (aka deep link) directly using the appropriate URL

Managing the Page Title and Focus in React and Angular

  • Setting page titles in Angular and React
  • Standard HTML link navigation, focus
  • Accessing and setting focus to elements using ReactJS and Angular
Description URL
Basic Page Title Behavior http://www.chrislane.info/examples/basicPageTitleBehavior/
Basic Page Focus Behavior http://www.chrislane.info/examples/basicPageFocusBehavior/page1.html
Programmatic Focus Movement http://www.chrislane.info/examples/programmaticFocusMovement.html
Title and Focus Management with Angular and React

More on Focus Management with Angular and React


Keyboard Events

We will discuss how to implement keyboard event handlers in both the template and component class code in React and Angular.

Description URL
React Demo http://chrislane.info/react-a11y-demo/
Angular Demo https://github.com/clane/Angular-A11y-Examples

ARIA attributes

Declaring and managing ARIA attributes in React and Angular

Description URL
React Accessibility Documentation https://reactjs.org/docs/accessibility.html
Example of aria-current using Angular http://www.chrislane.info/ng-routing-focus-when-components-load/dist/component1
Example of aria-current using React https://github.com/clane/React-routing-focus-when-components-load/blob/master/app/src/App.js

Example of aria-expanded and aria-selected used in an Tablist control implemented with Angular

React Fragments

Learners will be introduced to bootstrap-react which is a BETA release of AccDC 4X + React for building advanced accessible ARIA widgets within the React IDE.

Description URL
React Accessibility Documentation https://reactjs.org/docs/accessibility.html
React Fragments Example http://www.chrislane.info/REACT/React-fragments/

bootstrap-react

Learners will be introduced to bootstrap-react which is a BETA release of AccDC 4X + React for building advanced accessible ARIA widgets within the React IDE.

Description URL
bootstrap-react https://github.com/whatsock/bootstrap-react

About Chris Lane

Chris Lane is an accessibility engineer at VMware and was previously an accessibility developer at Level Access for 7 years. He has 20 years of experience working with web technologies and 7 years of working in accessibility . He enjoys fixing accessibility issues, creating prototypes an training teams and individuals in accessible web development.
His current technical skills include ARIA, JavasScript, React, Angular and CSS. He presented a session called Angular 2: Prototyping & Testing Accessible Widgets at CSUN 2017 that was based on his project A2A11yQuickstart.