IAAP Webinar – Web Accessibility techniques for React and Angular

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

Managing the Page Title

React and Angular applications are rendered inside a parent HTML element and that managing elements such don’t have access to the title element out of the box. This webinar will cover the libraries and services needed to update the page title when needed.

Description URL
react-helmet
https://github.com/nfl/react-helmet
PowerPoint Presentation for my talk “Accessible Routing with React” on 12/12/18 http://www.chrislane.info/A11y_Meetup_Talk_12_12_18/A11yRoutingInReact.pptx
Setting title in Angular https://github.com/clane/ng-routing-focus-top-offscreen-text/blob/master/example/src/app/component1/component1.component.ts

Focus Management

Learners will gain an an understanding of expected focus behaviors by reviewing standard HTML link behavior and applying the understanding to React and Angular developement. Learners will learn how to distinguish navigation from content updates and how each concept relates to expected focus behavior. Learners will also learn specific techniques for accessing and setting focus to elements using ReactJS and Angular.

Description URL
Accessible Routing with React http://chrislane.info/A11y_Meetup_Talk_12_12_18/
Thoughts on focus management

More on Focus Management with Angular and React


Setting Focus in Angular 2 https://www.levelaccess.com/setting-focus-angular-2/

Keyboard Events

Learners will learn how to implement keyboard event handlers in both the template and component class code in ReactJS and AngularJS.

Description URL
React Demo http://chrislane.info/react-a11y-demo/

ARIA attributes

Learners will learn how to declare and manage ARIA attributes in React and Angular

Description URL
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

React Fragments

http://www.chrislane.info/REACT/React-fragments/

Description URL
React Fragments 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
Github https://github.com/whatsock/bootstrap-react

About Chris Lane

Chris Lane is an accessibility developer at Level Access. 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.