Designing accessible websites
TLDR
- Communicate interaction clearly
- Test the color contrast of your design
- Layout flexibility is important (it shouldn’t break if the user zooms in)
- Provide explanations to your content
- Provide alternative ways to execute the same actions
- Add an Accessibility Statement to your website
According to a Deque case study (2020), 67% of all accessibility bugs for a website or app can be avoided when accessibility is part of the design process. It is therefore quite clear that designers have an essential role to play when it comes to creating a more accessible internet.
Giving feedback on interactivity
While thinking about accessibility, one of the most known aspects is that colors should have enough contrast with the background, to be readable. A less-known aspect is that this is also valid for displaying change between states. So if you create a link, and the only difference between the normal state and the hover state is that they have different colors, those colors should have a contrast ratio of 3:1 between themselves and the background (to be readable) but also between themselves so that the visual change is obvious. That is, if the font has a minimum font size of 18px, if it is below it should have a minimum contrast ratio of 5:1.
This is required by the BITV test (which is used as the standard for accessible websites in Germany).
Furthermore, the visual changes displaying interactivity should be accumulative and consistent. For example, if you decide that buttons on your website will have white text on a black background, all buttons should preferably be that way (or variations of it, with other colors).
A bad way to add interactivity would be to always change the background color to show the new state. Not only would you need to find different colors that all have enough contrast with the background and between themselves, but you can only show one state at once. However, let’s say you decide to invert the color on hover (black text, white background with a black outline so that we still understand that it’s a button with a background color), add a drop shadow on the active state (when the user clicks on the button), and an outline on the focused state (which shows which element is currently selected if the user chooses to navigate with the keyboard) you could show 3 different states at once since the button can hover, active and focused all at the same time. This gives the user a lot more information on the element’s state.
Creating some general guidelines (or memo) for yourself can be helpful since it’s easy to forget all the possibilities we have to show interactivity (drop-shadow, color change, inverting colors, adding dots to the borders, or the underline, scaling the element, rotating the element…). Having a list of all those possibilities can help speed up the design process, and make it more consistent all while still allowing you to choose what best fits the current design.
Color contrast
To evaluate the color contrast of your design, you can use tools like Colour Contrast Analyzer. The same contrast rules that are applicable for texts work for icons and other graphic elements. So an icon bigger than 18px will need a minimum contrast ratio of 3:1 and an icon smaller than that will need a contrast of 5:1.
Color blindness
To experience a website as a color-blind person, various tools are available: chrome has an extension called colorblindly which helps you see websites the way a color-blind person would see them, or with various color deficiency options. I find that using the color blind option is the most helpful since it’s the most extreme. It’s faster than previewing color deficiencies one by one.
If you’re using Figma, multiple plugins can also help you design an accessible experience.
Responsive layouts
Any website designer is used to making responsive layouts and searching for the most commonly used screen sizes for all devices. The design should also work, regardless of the format (square, portrait, landscape).
What is more rarely taken into account, however, is what the layout will look like if the user zooms in. Accessible websites should be usable, even with the user zooming in up to 200%. If you zoom in that much, the browser will generally use the design made for mobile, even while displaying the website on a desktop.
For some websites, this will work just fine. Problems start appearing when there is content with a fixed position, or a sticky position (menu…). If they’re too big, they will be cut off at this zoom level. Since they’re in a fixed position, it will not be possible to move it, and therefore a part of it stays inaccessible to the user.
This also causes issues while using different scroll mechanics such as scroll-snapping. The CSS scroll-snap allows you to decide how the content will be positioned when you’re scrolling near it. You can decide to center it, for example, and it will become automatically centered if you scroll to a position, that is close enough. This will be useful to create some sort of slideshow mechanic (having one section of the website take the entire screen height, and going through them one by one) but is potentially bad for accessibility, if the content gets too big for the planned area, and the user can not scroll it the way he/she would want to, because of the scroll-snapping and some contents stays hidden or unreachable.
The zoom level is not the only thing the layout should take into account. The user should also be able to change the font size and the line height without the layout breaking. This can be a problem if the text is trapped in containers with fixed values. This is both the responsibility of the designers and the developers, developers can choose to add responsive values, which will respond appropriately to those changes, but depending on the design, it’s not always possible. For example, if the content mixes pictures and text and does not take into account that the text could be displayed at a much bigger size than it was planned for, the layout might still break.
Animations & sound
There should be no flashing animations on the website (an element that flickers 3 times or more in one second is considered a flashing animation). And if an animation lasts more than 5 seconds, there should be the option to pause it.
In the same way, users should be able to turn out or pause music that plays for more than 5 seconds.
Designing explicit elements
Designers often fully embrace the “less is more” principles, suggesting what needs to be done, using commonly known patterns instead of explicitly writing them out. This will make the experience more difficult for users, especially if they have cognitive disabilities.
For example, a lot of functionalities (log-in, search, menu button…) will be represented only with icons, and having explanatory text could simplify the User Experience.
It is also better if the explanation is placed directly next to the element it is describing. It will make it more intuitive for the user to know those elements are related, and avoid wasting time by having him/her look around for it. It can also help create a good alternative of the content, for screen readers. Indeed, screen readers will read the text in the same order as it is placed in the Document Object Model. So if it is placed next to one another in the design, and it is also implemented that way in the code, it will create a good screen reader experience out of the box. Otherwise, the text might need to be hidden from screen readers (because it will be read at the wrong moment) and then put back in, as an accessible text, somewhere else.
Providing more controls
Same as providing more explanations, we can often see User Experience suggestions, like a carousel, where the user can tell that there’s more content to see since one of the pictures is only partially visible. In this case, adding arrow buttons to navigate left and right would not only make the navigation more intuitive to the user but also give an alternative way to navigate. Having diverse ways to do the same action always helps make the experience more accessible.
Multiple ways to navigate
Most websites have one menu to navigate the entirety of their content. That’s often not enough to provide a good experience to all users.
Users with visual impairments may find it easier to navigate to the correct part of the site by using a search, rather than scrolling through a large navigation bar using a screen magnifier or screen reader. A person with cognitive disabilities may prefer a table of contents or site map that provides an overview of the site rather than reading and traversing through several Web pages. Some users may prefer to explore the site in a sequential manner, moving from Web page to Web page in order to best understand the concepts and layout.
Web Accessibility Content Guidelines
The BITV test requires at least 2 different ways to navigate the website (menu, table of contents, breadcrumb navigation, search bar…).
Cancelable actions
Allowing users to cancel their actions can avoid a lot of frustration. This is especially true for time-consuming activities like filling out a form. The user should be able to update their choices and go back to the previous page without having to fill out everything over again.
Accessibility Statement
Accessibility statements are important to show users that you care about providing an accessible experience. It is mandatory to provide one in countries that implement the EU Web Accessibility Directive. It should therefore be taken into consideration during the planning of a website and its design.