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
Components
Building blocks …
- https://www.kirupa.com/react/introducing_react.htm
- https://angular.io/guide/architecture-components
- https://reactjs.org/docs/components-and-props.html
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 | https://www.chrislane.info/examples/basicPageTitleBehavior/ |
| Basic Page Focus Behavior | https://www.chrislane.info/examples/basicPageFocusBehavior/page1.html |
| Programmatic Focus Movement | https://www.chrislane.info/examples/programmaticFocusMovement.html |
| Title and 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 | https://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 | https://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.