When creating digital products for the web as an experienced digital designer or software tester, you need to be aware of best practice in accessible design. This article can serve as a refresher, or an introduction for junior-level creatives and testers venturing into the arena of digital design, as well as those who may not have had accessibility baked into their training or daily working lives.
Seven accessible items to check for during testing:
Be on the lookout for small font sizes
Although it may be tempting to set your type to a small size for aesthetic reasons or to follow a design trend where fonts are 8pt, you need to consider the reason the words on your design exist in the first place, and that is to communicate to your users. You want all your users to be able to enjoy your website and digest the content with ease. So this means considering people with low vision reading content within your design. Best practice states that a size within 11pt and 16pt is right for paragraph text and body copy.
Also, remember to ensure a good contrast in font size between headers and paragraphs. People scan pages as they read, so creating a good sense of hierarchy is very important in anchoring and guiding the eye.
What about unusual or wacky font choices?
It might look nice using an extravagant font to fit with a specific visual style, but you need to be aware that it might impact legibility. A font in a fancy script might work well for short headings, but you need to avoid these in your paragraph text. The most readable typefaces are sans serif because they do not have any stylistic distractions. With online text, it is always more important to place clarity and legibility above brand and aesthetic.
Check for a lack of contrast between type and background
Another essential aspect to consider when working with type is the distinction between the content and the background on which it sits.
It might be stylish to place light gray text on an off-white background, but this is very risky from an accessible design perspective. People with low vision or color blindness struggle with discerning words from the page background in those circumstances. Reliable black text on a solid white background is standard practice – often simple is best.
Ensure the design doesn’t deviate from expected text link styles
People expect web pages to follow standard practices, and people shouldn’t have to think too hard when reading your content and navigating your site. This is why it is important to follow standard design practices, such as styling links, in a way people expect. A standard hyperlink is shown in blue text (if the rest of the text is black) with an underline so that people can spot a link in a paragraph of text with ease.
Deviating a little from the norm can be acceptable, but you should keep at least one element consistent with the expected link styling, such as the underline or using a differentiation color for the link.
You should also avoid using any of the styling mentioned above to emphasize words if they are not links because people mistake a colored or underlined word as being clickable.
Avoid using a unique navigation system
As with hyperlinks in bodies of text, your website users expect certain design principles to be adhered to when it comes to navigating around your site. People expect the logo to be in the top left (and this to link to your homepage), and for the other navigation links to be along the top, either laid out horizontally or neatly stacked in the right-hand corner. It would be very unusual for the main navigation to be tucked away at the bottom right of the screen, for example.
While it’s ok to occasionally deviate from this in some instances, bear in mind that your website visitors do not want to have to learn a new navigation system. Also, consider that those with visual impairments, and those who use assistive technologies such as screen readers because they may have their experience disrupted if they have to negotiate an unusual or avant-garde menu system.
Make certain hyperlinks look obvious, ensure buttons look like buttons, make arrows and directional navigation look like arrows, and don’t hide the navigation menu unless necessary. Don’t rely on icons alone to convey information but also include a text description to explain what the link it, especially if the icon is heavily stylized or unclear.
Remember, stylistic choices, and pleasing visuals must complement the user experience, not hinder by adding confusion.
Check for images with no alt attributes
It’s important to remember that people who visit your website may not consume your content in the same way you do. Those with visual impairments may rely on alt tags and image descriptions to “see” or better understand the images used on your website. An alt tag is a short description that you write to explain best what a photo, diagram, or illustration on your website is.
Avoid designing for one screen size only
Nowadays, responsive web design is standard practice. If your website does not respond by scaling down to smaller screens and mobile devices, your audience will be very frustrated. They will probably leave after a few seconds, and in search engine rankings such as Google, non-responsive websites are punished. Likewise, it is also essential to consider larger screens and new and upcoming different ways of interacting with your digital products.
It may be tempting to disable pinch-zooming on your website (to disable the ability to zoom into the page on mobile and touch screen devices) because you want to make sure users experience your design just as you want it. However, it’s important to remember that some people may need the ability to zoom in on certain parts of your design. Putting as much control into your users’ hands as possible is only a good thing when it comes to them deciding how they view and interact with your design.