ottawajs: angular accessibility
TRANSCRIPT
Single Page Apps, AngularJS and Accessibility
All this has happened before, and it will all happen again.
Single page apps
Focus management
Getting lost
Angular and Accessibility
examples.simplyaccessible.com/angular-ticket-tracker
PROBLEMCreating dynamic page titles What responds to clicks? Focus management/keyboard accessAdding ARIA
sateach.es/spangular
Dynamic page titles
<html class="no-js" ng-app="a11yTicketApp" lang="en"><title ng-bind="title">Accessibility Ticket Tracker</title>
.config(function ($routeProvider) { $routeProvider .when('/main', { templateUrl: 'views/main.html', controller: 'MainCtrl', title: 'Accessibility Ticket Tracker' }) .when('/edit/:id', { templateUrl: 'views/edit.html', controller: 'EditCtrl', title: 'Edit Ticket' }) ... .otherwise({ redirectTo: '/main' });})
What do we click?
<div ng-click="doSomething(id);" class="im-a-button">
I'm not a button </div>
<input type="button" value="Cancel" class="btn btn-primary" ng-click="go('main')">
<a href=“#expandDetails—J_vholpQ_vUoGmtAnJR"> Color contrast of form labels </a>
<a href="#expandDetails-{{ ticket.$id }}" ng-click="toggleTicketDetails($event,$index)"> {{ ticket.summary }}
<span class="visuallyhidden">{{ index==$index ? " - click to hide details" : " - click to show details"}}</span>
</a>
Focus management
$('h1').attr("tabIndex", -1)$('h1').focus();
Hiding things
<a href="#/edit/{{ ticket.$id }}" class="edit-btn"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> <span class="visuallyhidden"> Edit {{ ticket.summary }} </span></a>
Using ARIA
<div role="status" id="ticket-table-info" aria-live="polite" aria-atomic=“true">
Showing {{(tickets|filter:search).length}} of {{tickets.length}} </div>
ngAria
SUMMARYSemantic markup still matters. Bind your clicks to natively clickable controls. Take control and manage focus. Provide backup mechanisms for way finding and navigation Use ARIA to your advantage.
