Accessibility and Single Page Applications

Accessibility and  Single Page Applications Rick Giner Front End Lead,
Australia Post BuzzConf Technology Festival co-founder @RickGiner @BuzzConfio

What we’ll cover •  Document structure •  Focus management • 
Keyboard accessibility •  Visually hidden text •  ARIA

Document structure

Document structure <html ng-app="a11yApp" lang="en"> <head> <title>BuzzConf Festival 2015</title> </head>
<body> <header class="header"> <nav> <ul><li>...</li></ul> </nav> </header> <main class="main" id="main"> <h1>BuzzConf Festival 2015</h1> ... <h2>BuzzConf 2015 in Review</h2> ... </main> <footer>...</footer> </body> </html>

Document structure

Document structure:  Page titles HTML <html ng-app="a11yApp" lang="en"> <head> <title
ng-bind="title">BuzzConf Festival 2015</title> ... JS (AngularJS) .config(function ($routeProvider) { $routeProvider .when('/festival-2015', { templateUrl: 'views/main.html', controller: 'MainCtrl', title: 'BuzzConf Festival 2015' }) .when('/category/buzzconf-nights', { templateUrl: 'views/main.html', controller: 'MainCtrl', title: 'BuzzConf Nights' }) ...

Document structure:  Page titles JS (React) https://github.com/gaearon/react-document-title var App =
React.createClass({ render: function () { return ( <DocumentTitle title='My Web App'> <this.props.activeRouteHandler /> </DocumentTitle> ); } });

Focus management Changing views $rootScope.$on('$viewContentLoaded', function (event, current, previous) {
// Once the template loads set focus to the h1 to manage focus if(previous.$$route){ history = previous.$$route.originalPath; } // if there is no history this is the first page the user sees on the app if (history) { var h1 = document.querySelector('h1'); if (h1) { h1.setAttribute('tabindex', '-1'); h1.focus(); } } } });

Focus management

Keyboard accessibility render: function() { return ( <div onClick={this.handleClick}> I`ve
been clicked </div> ); } <h2{{action 'click'}}>click me</h2> events: { "click #heading" : "submit" } <div ng-click="clickEvent();" class="button"> Perform an action </div>

Keyboard accessibility <input type="button" value="Submit" ng-click="submit()"> <a href="#expandAccordion" ng-click="toggle()"> <span
class="visuallyhidden"> <span ng-if="expanded">hide details for </span> <span ng-if="!expanded">show details for </span> </span> {{ title }} </a>

Visually hidden text .visuallyhidden { border: 0; clip: rect(0 0
0 0); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; } <li ng-repeat="item in items"> ... <a href="#"> Edit <span class="visuallyhidden">{{ item.title }}</span> </a> </li>

ARIA Aria-Live <button aria-live="polite" ng-bind="{{‘searching’ ? searching : ‘search’}}"> </button>
<p role="status" aria-live="polite" aria-atomic="true"> Showing {{n}} of {{x}} </p>

ARIA ngAria, Ember-aria Usually ARIA states and properties can be
set automatically based on other properties, for example aria-checked may be obtained from checked. aria-checked aria-valuemin aria-valuemax aria-valuenow aria-invalid aria-required aria-readonly aria-disabled aria-pressed aria-selected aria-label aria-hidden

Thanks! @RickGiner @BuzzConﬁo https://buzzconf.io ngMelb / AngularJSMelb

Accessibility and Single Page Applications

Accessibility and Single Page Applications

Rick

More Decks by Rick

Other Decks in Technology

Featured

Transcript