Accessible Single Page Applications

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

“The power of the Web is in its universality.  Access
by everyone regardless of disability is an essential aspect.”  Tim Berners-Lee  W3C Director and inventor of the World Wide Web @RickGiner #A11yCamp

Accessibility as a subset of usability “Instead of focusing only
on the technical aspects of accessibility, it is important to recognize that usability is also an important aspect of accessibility. Consciously addressing 'usable accessibility' helps clarify the difference between what meets minimum accessibility standards and what is usable by people with disabilities.” Shawn Lawton Henry  Another-ability: Accessibility Primer for Usability Specialists Presented at UPA 2002, the Usability Professionals' Association Annual Conference @RickGiner #A11yCamp

What we’ll cover •  Design •  Document structure •  Focus
management •  Keyboard accessibility •  Visually hidden text •  ARIA attributes •  Build tools @RickGiner #A11yCamp

Good Design @RickGiner #A11yCamp h"p://www.prac+calecommerce.com/ar+cles/101472-learning-from-bad-web-design

Document structure @RickGiner #A11yCamp h"ps://mdn.mozillademos.org/ﬁles/854/whitespace_tree.png

Document structure @RickGiner #A11yCamp

Document structure <html ng-app="a11yApp" lang="en"> <head> <title>BuzzConf Festival 2016</title> </head>
<body> <header class="header"> <nav> <ul><li>...</li></ul> </nav> </header> <main class="main" id="main"> <h1>BuzzConf Festival 2016</h1> ... <h2>What to expect</h2> ... </main> <footer>...</footer> </body> </html> @RickGiner #A11yCamp

Document structure @RickGiner #A11yCamp

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

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> ); } }); @RickGiner #A11yCamp

Focus management @RickGiner #A11yCamp h"p://i.istockimg.com/stock-photo-10510308-focus.jpg

Focus management @RickGiner #A11yCamp

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(); } } } }); @RickGiner #A11yCamp

Keyboard accessibility @RickGiner #A11yCamp h"p://www.bigstockphoto.com/image-94274747/stock-photo-white-conceptual-keyboard-accessibility-%28blue-key%29

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> @RickGiner #A11yCamp

@RickGiner #A11yCamp

Links vs Buttons Links •  “Click” with the Enter key
•  Have the implicit link role •  :focus, :hover, :active, :link, :visited •  Allow opening in new windows @RickGiner #A11yCamp Buttons •  “Click” with the Space key •  Have the implicit button role •  :focus, :hover, :active, :disabled •  Submit form data •  Disable with the disabled attribute Perfect element for: •  Opening a modal window •  Triggering a popup menu •  Toggling an interface •  Playing media content •  Running a script Should be used for: •  Change the URL or navigate the user to a new page or view •  Cause a browser redraw/refresh •  Support page jumps with internal href a"ributes

Links vs Buttons Consider: •  If a screen reader user
tabbed onto an interactive element, would its role tell them what to expect? (Would it navigate away from the page? They’d want to know.) •  If you are suppressing link features like URL changes or right click consider using a button. •  Encourage routing in your application with href, ng-href, etc. More great tips at: https://marcysutton.com/links-vs-buttons-in-modern-web-applications/ @RickGiner #A11yCamp

Keyboard accessibility <a href="#/a-new-view" ng-click="trackLink()"> New view </a> <button ng-click="toggle()">
<span class="visuallyhidden"> <span ng-if="expanded">hide details for </span> <span ng-if="!expanded">show details for </span> </span> {{ title }} </button> @RickGiner #A11yCamp

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; } @RickGiner #A11yCamp

Visually hidden text <li ng-repeat="accommodation in items"> ... <button ng-click="add()">
Add <span class="visuallyhidden">{{ accommodation.title }}</span> </button> </li> @RickGiner #A11yCamp

ARIA @RickGiner #A11yCamp

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> @RickGiner #A11yCamp

ARIA Aria-Live <h1 aria-live="polite" ng-bind="title"></h1> jQuery $.announce(document.title + ', view
loaded') @RickGiner #A11yCamp

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-hidden aria-valuemin aria-valuemax aria-valuenow aria-invalid aria-required aria-readonly aria-disabled aria-pressed aria-selected aria-label aria-checked @RickGiner #A11yCamp

Build tools @RickGiner #A11yCamp h"p://cdn3.freepik.com/image/th/2324936.jpg

Build tools @RickGiner #A11yCamp Tes'ng AxE (ﬁnd out more in
10 minutes) Protractor plugin •  Accessibility Developer Tools extension for Google Chrome •  Tenon.io

Build tools @RickGiner #A11yCamp Tes'ng PhantomJS grunt-accessibility / gulp-accessibility • 
AccessSniﬀ & •  HTML Codesniﬀer WCAG guidelines

Remember! •  Start with a considered design •  Code semantically
•  Test early and continuously •  Embrace ARIA but try not to rely on it •  Turn your monitor off and try to use your application @RickGiner #A11yCamp

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

References and sources •  https://www.w3.org/standards/webdesign/accessibility •  http://www.uiaccess.com/upa2002a.html •  BuzzConf.io • 
Practicalecommerce.com •  mdn.mozillademos.org •  MarcySutton.com •  https://github.com/angular/protractor-accessibility-plugin •  https://chrome.google.com/webstore/detail/accessibility-developer-t/ fpkknkljclfencbdbgkenhaleﬁpecmb •  Tenon.io •  https://github.com/dequelabs/axe-core •  https://github.com/yargalot/grunt-accessibility •  https://github.com/yargalot/gulp-accessibility •  http://squizlabs.github.com/HTML_CodeSniffer/ •  https://github.com/yargalot/AccessSniff @RickGiner #A11yCamp

Accessible Single Page Applications

Accessible Single Page Applications

Rick

More Decks by Rick

Other Decks in Technology

Featured

Transcript

Accessibility and  Single Page Applications Rick Giner Front End Lead,

“The power of the Web is in its universality.  Access

Accessibility as a subset of usability “Instead of focusing only

What we’ll cover •  Design •  Document structure •  Focus

Good Design @RickGiner #A11yCamp h"p://www.prac+calecommerce.com/ar+cles/101472-learning-from-bad-web-design

Document structure @RickGiner #A11yCamp h"ps://mdn.mozillademos.org/ﬁles/854/whitespace_tree.png

Document structure @RickGiner #A11yCamp

Document structure <html ng-app="a11yApp" lang="en"> <head> <title>BuzzConf Festival 2016</title> </head>

Document structure @RickGiner #A11yCamp

Document structure:  Page titles HTML <html ng-app="a11yApp" lang="en"> <head> <title

Document structure:  Page titles JS (React) https://github.com/gaearon/react-document-title var App =

Focus management @RickGiner #A11yCamp h"p://i.istockimg.com/stock-photo-10510308-focus.jpg

Focus management @RickGiner #A11yCamp

Focus management Changing views $rootScope.$on('$viewContentLoaded', function (event, current, previous) {

Keyboard accessibility @RickGiner #A11yCamp h"p://www.bigstockphoto.com/image-94274747/stock-photo-white-conceptual-keyboard-accessibility-%28blue-key%29

Keyboard accessibility render: function() { return ( <div onClick={this.handleClick}> I`ve

@RickGiner #A11yCamp

Links vs Buttons Links •  “Click” with the Enter key

Links vs Buttons Consider: •  If a screen reader user

Keyboard accessibility <a href="#/a-new-view" ng-click="trackLink()"> New view </a> <button ng-click="toggle()">

Visually hidden text .visuallyhidden { border: 0; clip: rect(0 0

Visually hidden text <li ng-repeat="accommodation in items"> ... <button ng-click="add()">

ARIA @RickGiner #A11yCamp

ARIA Aria-Live <button aria-live="polite" ng-bind="{{‘searching’ ? searching : ‘search’}}"> </button>

ARIA Aria-Live <h1 aria-live="polite" ng-bind="title"></h1> jQuery $.announce(document.title + ', view

ARIA ngAria, Ember-aria Usually ARIA states and properties can be

Build tools @RickGiner #A11yCamp h"p://cdn3.freepik.com/image/th/2324936.jpg

Build tools @RickGiner #A11yCamp Tes'ng AxE (ﬁnd out more in

Build tools @RickGiner #A11yCamp Tes'ng PhantomJS grunt-accessibility / gulp-accessibility •

Remember! •  Start with a considered design •  Code semantically

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

References and sources •  https://www.w3.org/standards/webdesign/accessibility •  http://www.uiaccess.com/upa2002a.html •  BuzzConf.io •