Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OttawaJS: angular accessibility

1,472 views

Published on

Slides from my overview talk at OttawaJS Sep 9, 2015 on Angular and Accessibility.

Published in: Technology

OttawaJS: angular accessibility

  1. 1. Single Page Apps, AngularJS and Accessibility
  2. 2. Derek Featherstone
 
 feather@simplyaccessible.com @feather
  3. 3. All this has happened before, and it will all happen again.
  4. 4. Single page apps
  5. 5. Focus management
  6. 6. Getting lost
  7. 7. Angular and Accessibility
  8. 8. examples.simplyaccessible.com/angular-ticket-tracker
  9. 9. PROBLEM
 Creating dynamic page titles
 What responds to clicks? Focus management/keyboard access
 Adding ARIA
  10. 10. sateach.es/spangular
  11. 11. Dynamic page titles
  12. 12. <html class="no-js" ng-app="a11yTicketApp" lang="en"> <title ng-bind="title">Accessibility Ticket Tracker</title>
  13. 13. .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' }); })
  14. 14. What do we click?
  15. 15. <div ng-click="doSomething(id);"
 class="im-a-button">
 I'm not a button
 </div>
  16. 16. <input type="button"
 value="Cancel"
 class="btn btn-primary"
 ng-click="go('main')">
  17. 17. <a href=“#expandDetails—J_vholpQ_vUoGmtAnJR">
 Color contrast of form labels
 </a>
  18. 18. <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>
  19. 19. Focus management
  20. 20. $('h1').attr("tabIndex", -1) $('h1').focus();
  21. 21. Hiding things
  22. 22. <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>
  23. 23. Using ARIA
  24. 24. <div role="status"
 id="ticket-table-info"
 aria-live="polite"
 aria-atomic=“true"> Showing {{(tickets|filter:search).length}} of {{tickets.length}}
 
 </div>
  25. 25. ngAria
  26. 26. SUMMARY
 Semantic 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.
  27. 27. Derek Featherstone
 
 feather@simplyaccessible.com @feather

×