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.
Web developers working with Angular or React
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.
|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|
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.
|Accessible Routing with React||http://chrislane.info/A11y_Meetup_Talk_12_12_18/||Thoughts on focus management||
||Setting Focus in Angular 2||https://www.levelaccess.com/setting-focus-angular-2/|
Learners will learn how to implement keyboard event handlers in both the template and component class code in ReactJS and AngularJS.
Learners will learn how to declare and manage ARIA attributes in React and Angular
|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|
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.
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.