Building for Accessibility
•
2 gefällt mir•5,429 views
This document discusses designing for accessibility in web applications. It begins with examples of designing and links to accessibility concepts. It then covers exploring ways to focus the screen reader on the appropriate content when routes change dynamically in Ember applications. Potential solutions are proposed, such as having routes call a focus hook and setting the focus after transitions. Research into screen readers and Ember is presented. An API is designed to call the focus hook and integration details are discussed. The changes are contributed back via an RFC. Usage notes caution that all content must be wrapped in elements and automatically generated templates may have issues. Learnings focus on the differences from static sites and controlling focusing programmatically.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Building for Accessibility
Ähnlich wie Building for Accessibility (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Building for Accessibility
- 1. Designing
- 6. Yes.
- 10. Universal Design Stokke Tripp Trapp
- 11. Universal?
- 22. Demo
- 23. Learnings • Screen readers start reading from the top of the page on each page load. • Dynamically updating the DOM results in no information being passed to the user by default. • Markup is still important. Ember's real links and the code you write in your templates is important. • ARIA roles still do what we expect.
- 25. Page Loading We want to emulate the page load behavior demonstrated with static pages.
- 26. End-User Goals • Have the screen reader automatically start reading the content of the page. • Have it start reading the content from the best point in the application hierarchy. • Make it clear to the user that the content on the page has changed. • Follow other recommended patterns that screen reader users are familiar with.
- 27. Ember Goals • Have the solution work with current idiomatic Ember code or minimize migration cost. • Make the change in a backwards compatible way to meet Ember's stability without stagnation goal. • The default approach should be accessible, API design is a feature. • Provide for extensibility with hooks enabling enhancement of this higher-level feature.
- 28. Exploration
- 29. Inventory Router, Transitions, Routes, Templates, Outlets, HTMLBars
- 30. Outlet Focusing What if we set the focus on the route's outlet immediately after the transition completes?
- 31. Research
- 32. Screen Readers • It's like the Internet Explorer and Netscape HTML/ CSS/JS compatibility workarounds all over again. • Screen readers tend to read whatever you focus. • Nobody likes being dumped into forms mode. • Screen readers are aware of content on the page changing, but don't present that to the user until it is asked for.
- 33. Ember • The top level outlet is generated and wrapped in a containing DIV. • All other outlets are populated by their templates without first being wrapped in a containing DIV. • Routes have no reference to their rendered output. • You can have multiple outlets in a single route. • No-op transitions trigger no route hooks.
- 34. Solution Design
- 35. API Design It'd be nice if every route had a `focus` hook that was called with the outlet contents.
- 36. Ember.Route.reopen({! focus(morph) {! var elem = morph.firstNode;! ! try {! if (!elem.getAttribute('tabindex')) {! if (isInteractive(elem)) {! elem.setAttribute('tabindex', 0);! } else {! elem.setAttribute('tabindex', -1);! }! }! ! elem.focus();! } catch (e) {}! }! });
- 37. Development How do we call the `focus` hook?
- 38. Ember.Route.reopen({! enter(transition) {! var route = this;! ! // Focus "up one level" for index routes.! if (! transition.pivotHandler &&! this.routeName === transition.pH.routeName + '.index'! ) {! transition.pivot = transition.pivotHandler.routeName;! route = transition.pivotHandler;! this._focus(route, transition);! }! ! // Handle fresh entries.! if (!transition.pivot) {! transition.pivot = this.routeName;! this._focus(route, transition)! }! ! return this._super(...arguments);! }! });
- 39. Ember.Route.reopen({! _focus(route, transition, parent) {! var focus = new Ember.RSVP.Promise(function(resolve, reject) {! this.focusPromiseResolve = resolve;! }.bind(route));! ! // Set up our context for after the transition completes.! var transitionResolve = (function(transition, route) {! return function(result) {! delete transition.pivot;! ! Ember.run.scheduleOnce('afterRender', route, function() {! route.focus(result.focus)! });! };! })(transition, route);! ! // Clean up after ourselves in case there is a transition.retry() call.! var transitionReject = (function(transition, route) {! return function() {! delete transition.pivot;! };! })(transition, route);! ! Ember.RSVP.hash({ focus, transition })! .then(transitionResolve)! .catch(transitionReject);! }! });
- 40. Integration What happens when Ember needs to be modified.
- 41. diff --git a/packages/ember-htmlbars/lib/keywords/outlet.js b/packages/ember-htmlbars/lib/ keywords/outlet.js! index 317e899..6b01753 100644! --- a/packages/ember-htmlbars/lib/keywords/outlet.js! +++ b/packages/ember-htmlbars/lib/keywords/outlet.js! @@ -17,6 +17,10 @@ export default function(morph, env, scope, params, hash, template, inverse, visi! + if (env.outletState.main.render.focusPromiseResolve) {! + env.outletState.main.render.focusPromiseResolve(morph);! + delete env.outletState.main.render.focusPromiseResolve;! + }! keyword('@real_outlet', morph, env, scope, params, hash, template, inverse, visitor);! ! diff --git a/packages/ember-routing/lib/system/router.js b/packages/ember-routing/lib/ system/router.js! index bb157c1..5600f99 100644! --- a/packages/ember-routing/lib/system/router.js! +++ b/packages/ember-routing/lib/system/router.js! @@ -202,10 +202,18 @@ var EmberRouter = EmberObject.extend(Evented, {! for (var j = 0; j < connections.length; j++) {! + delete connections[j].focusPromiseResolve;! var appended = appendLiveRoute(liveRoutes, defaultParentState, connections[j]);! liveRoutes = appended.liveRoutes;! if (appended.ownState.render.name === route.routeName || appended.ownState.render.outlet === 'main') {! ownState = appended.ownState;! + // Pass forward the focus promise resolve hook from the route to the appropriate connection.! + if (route.focusPromiseResolve) {! + ownState.render.focusPromiseResolve = route.focusPromiseResolve;! + delete route.focusPromiseResolve;! + }
- 43. Write an RFC! You've created and tested a feature! It's time to get it shipped!
- 45. Usage Notes • You can use this today! http://bit.ly/outletfocusing • All template content must be wrapped in a `<div>`. Child outlets must also appear inside that `<div>`. • Automatically generated templates are just `{{outlet}}` and will thus have problems. • Provide feedback on RFC #66!
- 46. Demo
- 47. Learnings • It's a different experience from the static site. • We have programmatic control over the focusing behavior. • Setting the focus has additional consequences in terms of scrolling behavior.
- 48. Challenge