Quick accessibility tips for designers
Accessibility is a very complex and long time goal.
This is by no means a guide to complete any standard, but it is a summary of some quick tipps that I encountered until now.
Colour Contrast
Text sizes
The colour contrast levels that have been defined by WCAG are regarding small and big Texts. But the definition is not always very clear, so I´ll repeat it.
Normal text (<24px regular text / <18,66px bold text) 4,5:1
Large text (≥24px regular text / ≥18,66px bold text) 3:1
Interactive visual elements, like for example an input box, interactive icons or a search, we need to provide a contrast minimum of 3:1.
Logos and decorative elements are without contrast requirements.
If you´d like some tips on tools for contrast ratio, you can check this article.
Inactive states
The problem with these colour contrasts is, that the remaining colours are pretty close to each other. So they are not very well distinguishable, which means that you´re advised to use some other method than colour to distinguish between active and inactive state.
Could be some underlines, a background or anything of that sort.
Design for screen readers
I know that the main issue for screen readers is mostly the content structure.
But there are a few things that you as a designer should keep in mind, when you work on an accessible product.
Font sizes in an HTML sense
Screen readers analyze your website structure largely by the HTML-Headline sizes. So if you maybe don´t have an H1 in your website, because it is very big, or you have it 4 times, because you use it as a visual Element throughout your page you distract the reader a great deal.
This is why I highly recommend using the H1, H2, H3… tags in your font styles in sketch (or whatever product you use) so you have a better overview of what you are using. The issue is, that the HTML Tags have not necessarily been chosen with the final look in mind. That´s why it might make sense to have a H1 and H2 in the same font size, or to sort the HL styles by matter of use, not by size, so the screen reader can still interpret them.
Focus states
Blind people and people with limited mobility navigate your website by keyboard.
To know where in the page you are, you need to have focus states for every interactive element.
For blind people you need alt texts and aria labels to provide guidance, for mobility handicaps you need a visual indicator. By default that’s a blue boarder, but this boarder can also be re-styled via CSS. It makes great sense to challenge that default in the context of your design since the blue colour doesn´t comply wit the required 3:1 standard on all backgrounds.
Alt Texts
This is not necessarily a design task. But as I mentioned before screen reader users need these labels. For links, for buttons, for icons, for images and videos.
And these labels also have t make sense. It will not help to lablel an icon “icon” instead you should label it “link to more information” “enable dark mode” or similar explanatory texts.
Input labels
Along the lines of screen reader accessibility it is very important to keep the input labels also in the filled in state.
Just imagine navigating a more complex form just by what you filled in, not by the label. You wouldn´t know if you entered the right information.
This also helps everyone else to keep a better overview, so I can recommend this in general.
Responsive Design
Responsive states
When you design a responsive layout (which probably most of our products are) you have another thing to think about.
Your text might be 18px bold on desktop, but it might be smaller on tablet or mobile. To avoid having different colours across the devices, you should opt for the darker colour on desktop as well.
Text on images
Avoid text on images like the plague. There´s no way around it.
Text on images doesn´t work in responsive designs, since you cannot say for sure where on the image the text will end up.
When the content will be entered by someone else you cannot even make sure which image will be there.
So the very least you need is a semi transparent background, that should be opaque enough so it works on black and white alike.
Another thing is the changing order of elements for breakpoints. Sooner or later the text moves off the image.
The screen reader needs to be prepared to interpret that in the right order.
So I hope you maybe found some helpful tips, or you have some additional advice to give? I´d really appreciate the feedback :)
If you have any specific questions regarding web Accessibility, feel free to contact me via: patty.forster.design@gmail.com
