Deep Dive into Accessibility (Part 1): Design and Development Working Hand in Hand
Since accessibility is getting more and more important, I want to do a little series of articles about it. However, I know that there is already a lot of articles which you can find in the wonderful world wide web. So I was thinking, how can I dive deeper into this topic without risking boring others?
To be clear, I will do my best to avoid things like “why is accessibility important” or “what is accessibility anyway”. I just hope that you already have enough knowledge that we can skip this “blabla” and start right where it hurts, or for others, where the fun begins.
But in the first step, I think you can’t avoid mentioning some superficial aspects.
When you think of accessibility, you might assume that only frontend developers need to deal with this topic. I mean, we (and I think the job name already gives it away) are developing the website. But to be honest, in reality, it’s no longer only the developer’s job. Concept and design teams also need to address accessibility concerns. There are a lot of things that need to be taken into consideration when you think of design and also when you think of concept development.
Okay, let’s start with a deep dive into accessibility, and concentrate on preventing mistakes. And therefore we take a look at how to work together with UX/UI because it already starts with conceptualizing and designing a webpage.
“It’s much much more important to prevent issues than fixing them … and also it is more fun.“ — Dirk Ginader
What Dirk Ginader is basically saying is that the work already starts at the very beginning, and is not anymore something only we developers can do. We can somehow say that we save four hours of dev work post-launch for every hour a UX-Designer invests into accessibility pre-launch. It’s becoming increasingly important for us to collaborate closely with UI/UX.
Accessibility benefits
I think we all know what benefits accessibility can give us, but we still should have a quick look at what kind of disabilities there might be:
- Vision
- Hearing
- Mobility
- Speech
- Cognitive
- Different combinations of all categories
All of these disabilities can be permanent, temporary or situational.
As you can observe, disabilities encompass more than just vision or hearing impairments. While it may be tempting to simplify most issues into these categories, they represent only a fraction of the broader spectrum. It’s imperative that we address all types of disabilities, including combinations of multiple disabilities, and consider varying appearances.
So, let’s say there are two models of disabilities: the medical model and the social model. The medical model is mostly permanent and limiting, the social model has just some discrepancy between the user and for example the design of the product.
Benefits of accessibility
But let’s take a step back, and have a look at the benefits of accessibility.
Besides the obvious things like improving business by reaching more people, we can also create better products for everyone, we can meet compliance rules, drive innovation and can also make sure that there is a better social integration. And not to forget that it enhances the brand’s image and reputation.
And once again, it’s important to emphasize that considering these factors right from the start of a project, particularly during the initial stages of web design by UX/UI teams, is highly beneficial. This proactive approach saves not only time, it also safes a lot of money by addressing potential problems upfront.
To simplify the process, it is advisable to work with personas, although that should not be the only assistance. To ensure that all eventualities are covered, it is also advisable to work with real people the deeper you get into the project. You should also consider that different target groups have unique requirements. While aiming for a basic level of accessibility is essential for any website, there may be instances where a greater focus on accessibility is necessary depending on the specific needs of certain user groups.
Working with personas is good to find a starting point in a project and you don’t need to find people for it. But keep in mind that real people can actually test prototypes, and the feedback you get will be more detailed and you also might get some ideas for a even better approach.
Accessibility tips for UX/UI
Besides a lot of Plug-Ins for e.g. Figma there are some tips you can follow without any fancy Plug-Ins:
- Decide where the autofocus on page load should be
- Decide where the focus goes when you exit a modal
- Touch target sizes should be big enough (48x48px)
- Text should be resizable by 200% without anything breaking
- Stick to the flow the user is used to
- Structure content in the right way
- Keep Headlines in the right hierarchically order (if needed change the look with CSS)
- Make sure that colors have a high color contrast (background and foreground)
- and much more!
Useful Plug-Ins for Designer
Speaking of Plug-Ins for Figma, here are some to have a look into. Please note, I am not a Designer, and therefore, I did not really work with these Plug-Ins. The aforementioned Dirk Ginader came up with these examples, and I didn’t want to keep this from you guys.
Back to development
So now you know that I am no Designer, and that I would like to tell you more about Accessibility for Devs. So in the upcoming articles I want to talk about different landmarks and what they are needed for, how the Voice Over (mostly for MacOS) works and what the difficulties might be, what problems I had in the last years and much more. So stay tuned!
