Accessibility and Performance

View Github Repository Open presentation in a new window

marcysutton

See all presentation from marcysutton

Accessibility and Performance

0 5

a11y-perf

Slides and demos for my talks on Accessibility and Performance

On Github marcysutton / a11y-perf

Accessibility and Performance

By Marcy Sutton / @MarcySutton Senior Front-End Engineer, Deque Systems

Who is Marcy Sutton?

CNN VoiceOver demo

Black out screen and play audio only?

Performance?

Steve Souders: The Performance Golden Rule 90% of resource loading impacts the front-end, and coincidentally that has a lot of impact on accessibility too.

Accessibility

W3.org

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. SET UP QUOTE: "You can't optimize what you can't measure."

Who are we talking about?

  • Limited Mobility
  • Blind, Low Vision
  • Color Blind
  • Cognitive/Learning
  • Deaf, Hard of Hearing
  • AND EVERYONE ELSE

Note about aging population

Accessibility and Performance?

Accessible interfaces Quicker operability Fewer steps to task completion

Navigation Timing API

“Letting a website know you’re using a screen reader means running around the web waving a red flag that shouts “here, I’m visually impaired!”… It would take away the one place where blind people can be relatively undetected without our white cane or guide dog…and therefore giving others a chance to treat us like true equals.”

Marco Zehe: Why Screen Reader Detection is a Bad Thing

A11y + Performance:

What do we have?

  • Known user impact
  • Optimizations
  • Universal apps

User Impact:

Interacting with the keyboard

  • Are you waiting for JS to load?
  • Is the UI thread blocked?
  • Does the UI depend on JS for everything?
Do as much enabling of functionality without JS as possible. Use native HTML and let it load on the server-side. How long does it take to become interactive? What is in the critical path code: is it just visual style stuff?

“I keep spending 20 seconds staring at a page that has not yet executed the bulk of its code”

https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/

User Impact:

Assistive Technology

  • Are you waiting for JS to build the DOM?
  • What is the loading experience like?
  • Is the Accessibility Tree slow to update?
Loading of the accessibility tree, how it is impacted by slow loading. Explanation of the CNN example

What is the Accessibility Tree?

Objects impacted by HTML, CSS and JavaScript

chrome://accessibility "We expose a property, AXLoadingProgress, which tracks the loading progress. This is tracked by a class in Blink which is used in a variety of places, not just for accessibility. My guess is that VoiceOver queries this property and doesn't show the rotor until that reaches 1.0. That state seems to happen when the page is fully loaded including all resources, although it treats the first page layout as the halfway point (but we probably shouldn't rely on that behaviour)." - Alice Boxhall

Chrome Accessibility Inspector

bit.ly/chrome-a11y

Mozilla's Gecko rendering engine main flow

HTML5 Rocks: How Browsers Work

Mozilla's Gecko rendering engine main flow (updated)

HTML5 Rocks: How Browsers Work

Things that impact the Accessibility Tree:

Changes in JavaScript that impact layout/reflow

  • display: none;
  • elem.computedRoleelem.computedName
  • elem.scrollTop, other scrolly things
  • window.getComputedStyle()

...and much more. Use sparingly while loading.https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Anything that causes a reflow will most likely create or recreate an accessible object for it. (under discussion: flexbox) ARIA state changes don’t recreate objects, but they do send events.

Optimizations

Optimization:

Use as many browser defaults as possible

  • Buttons & links
  • HTML5 inputs
  • Focus styles

Everything you customize has to be sent over the wire.

Optimization:

Include keyboard supportin the critical rendering path

Prioritize accessible interactions.

Full-screen GIF and no login modal

Universal Rendering

a.k.a. "isomorphic JavaScript"

Load the same app from both the server and client

Render HTML from JavaScript app on server Browser loads with full HTML JavaScript loads then bootstraps the application

Frameworks

Hotness

Buzzwords

Don’t: Hide Content on Load

Display: none impacts accessibility objects

Do: Use progressive enhancement

Do: Utilize event playback

https://github.com/angular/preboot

Make sure events include the keyboard! Bad Example: link tracking only (for analytics) How does event playback impact AT? AX tree read/write

Conclusion

  • Think beyond visual performance
  • Optimize for accessible actions
  • Simplify your interfaces
  • Use technology to help more users

By optimizing for slow and no-js experiences, we can make websites more accessible to all people. We can strike a balance between modern technology and wide usability by enabling universal/isomorphic rendering for (lately) client-side only apps.

Accessibility and Performance By Marcy Sutton / @MarcySutton Senior Front-End Engineer, Deque Systems