OttawaJS: angular accessibility
•
5 likes•1,785 views
Single page apps like those built with AngularJS can cause accessibility issues if not developed correctly. Dynamic page content and lack of focus management can disorient users. The document provides examples of how to address these challenges, such as programmatically setting page titles, binding clicks to native controls, managing focus with JavaScript, hiding non-essential content for screen readers with ARIA, and using ARIA attributes to provide status updates. Semantic HTML, proper use of tabindex, and fallback navigation are also recommended for building accessible single page apps.
Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Viewers also liked (14)
Similar to OttawaJS: angular accessibility
Similar to OttawaJS: angular accessibility (20)
Recently uploaded
Recently uploaded (20)
OttawaJS: angular accessibility
- 1. Single Page Apps, AngularJS and Accessibility
- 5. All this has happened before, and it will all happen again.
- 9. Getting lost
- 14. PROBLEM Creating dynamic page titles What responds to clicks? Focus management/keyboard access Adding ARIA
- 19. <html class="no-js" ng-app="a11yTicketApp" lang="en"> <title ng-bind="title">Accessibility Ticket Tracker</title>
- 20. .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' }); })
- 21. What do we click?
- 22. <div ng-click="doSomething(id);" class="im-a-button"> I'm not a button </div>
- 24. <a href=“#expandDetails—J_vholpQ_vUoGmtAnJR"> Color contrast of form labels </a>
- 25. <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>
- 26. Focus management
- 34. Hiding things
- 36. <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>
- 37. Using ARIA
- 41. <div role="status" id="ticket-table-info" aria-live="polite" aria-atomic=“true"> Showing {{(tickets|filter:search).length}} of {{tickets.length}} </div>
- 42. ngAria
- 45. 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.