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.
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 )
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
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:
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.
5. Utilize event playback
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 😉