Accessibility & Performance: how to unite these concepts on your website

If you work with content for the web, you probably know how important is the performance of a website not only for users but also for SEO. But take a moment and think about people with disabilities. How important do you think is the performance of your website for them? In this post, I will share some thoughts from the Senior Front-End Engineer and Co-Leader of the non-profit organization Girls Develop It, Marcy Sutton, on how to make the internet fast for everyone. 

Marcy Sutton FFConf 2015 Seb Lee-Delisle

Quelle: Seb Lee-Delisle

In 2016, Marcy Sutton had a great talk on the Generate Conference in New York about how slow-performing web applications impact user experience for people with disabilities. But before starting with it, do you know why is accessibility so important? Here is a quote from w3.org:

The impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.

So the web is this great space where everybody has equal access to information, but if developers, designers or content creators don’t do their job well, it won’t reach everyone. Regardless of hardware, software, language, location, or ability, it should be designed to work for all people. Including people with:

  • Limited mobility 
  • Low vision or blind
  • Color blindness
  • Cognitive/ learning disabilities
  • Deaf or hard of hearing

Accessibility can actually help everybody. What if you break your arm? What if you are holding a baby? Even if you don’t find yourself in any of these categories, you probably know someone that is or you will probably also be in it in the future. Do you hear music too loud? Maybe in some years, you will need some hearing aid…

How do I think about accessibility at the beginning of a project?

We already saw that accessibility affects everyone’s life. Here is how you start your project with it in mind:

  • Creating accessible interfaces, to begin with.
  • Creating a quicker operability: Making things work faster.
  • Creating fewer steps to task completion. What is not only good for users with disabilities but, again, for all users. Fewer clicks mean more task completion.

Now that you have an accessible mindset, here are some practical examples from Marcy, for what you should do on your website on your client’s side, to optimize your webpage and make it more accessible. 

1. Customize your accessibility tree and make sure it updates fast 

You don’t know what an accessibility tree is? We got you! The Accessibility Tree is a hierarchical construct of objects that include accessible names and descriptions, plus supporting states and properties, which Assistive Technologies, like screen readers, can interface with to enhance accessibility. ( Whatsock ) 

It sounds super technical but what you can do is talk to your development team and ask them what changes in JavaScript can impact layout and the accessibility tree. Or show this link to them: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

2. Use as many browser defaults as possible

It can be hard for designers not to create their own visual language for everything or re-style everything but ask yourself or your team “is it really necessary?”. New designs can be very hard to make it accessible and to make it work across platforms. It can be done, but it can go wrong very easily.

3. Include keyboard support in the critical rendering path

 In performance, a lot is spoken about chunking related things to view things above the fold. Check what is the most important thing on your webpage, make CSS and JavaScript load it first and try to add some keyboard support on that initial load. Prioritize accessible interactions. 

4. Use Universal Rendering a.k.a. “Isomorphic JavaScript”

Universal rendering loads the same application from both server and client. If it sounds too complicated here is an easy picture to make you understand:

Screen Shot 2018-07-30 at 12.23.13

Because of this, you can write the code once and then execute it on the server to render static pages and on the client to allow for fast interactions. Besides better performance, this technique is good for SEO and code maintenance.

One best practice example can be observed on the Airbnb website. They use progressive enhancement. Progressive Enhancement is the principle of starting with the base of user experience for the website or application, and then adding enhancements to it if the browser can support the improved experience. Airbnb enables core functions on their website even if you don’t have JavaScript running.

5. Utilize event playback

Imagine you are a keyboard user and you type something before the JavaScript is loaded completely. When you are done writing, the pages finishes loading and your inputs are gone. Not with the preboot library. The preboot library uses events playback. That means that it keeps track of what the user typed before JavaScript loaded, so no user inputs are lost.

Conclusion:

We hope that after reading this post, you are ready to think about accessibility and performance together for your next project. Here are the main learnings you should take with you:

  • All that glitters is not gold: think beyond visual performance. You want to make sure things look good but mainly load and perform fast.
  •  Optimize for accessible actions, so users can start interactions quicker.
  • Less is more: simplify your interfaces. Make sure there are not too many steps to complete a task.
  • Use some empathy: use technology to help more people.

 

Btw Marcy Sutton‘s full speech is worth watching 😉

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: