As a web designer or frontend developer, you have a duty to make the digital products you create as accessible to as many people as possible. It is tempting to leave accessibility measures to the end, then try to patch quick fixes as they are noticed, but if you design with accessibility in mind from the beginning, your process will be smoother, and the websites you make will function better for everyone.
While there are plenty of areas where accessibility should be considered, here are some best practices to optimize your website for the visually impaired.
Top 10 Tips for Visually Impaired Optimization of Websites
1. Ensure your users can increase the font size
Users with low vision may wish to zoom into to read the text, so consider this feature and make sure this action doesn’t break the page.
2. Avoid using tiny text
It may look elegant, but small text can exclude a lot of your audience. High profile information providers such as BBC TV have published guidelines stating their content must be displayed in at least 11pt; however, 16pt is a little easier to read if you want to be more accessible by default.
3. Long lines of text are difficult to read
Sixty characters per line is a practical length for comprehension, not only for people with visual impairments but for everyone else too. This is because it lessens the strain on the eye as they don’t need to move as much across the page.
4. Logical and consistent visual hierarchy
Ensure headings are visually obvious and make use of H1s to define these. This helps people who may struggle to read or concentrate on written content by providing clear visual anchor points to help them navigate through the page. It is also good practice when structuring your page and will contribute to better search rankings.
5. Remember that content can be presented in various ways
Screen readers may be the only way some people might engage with your content, so your text must be laid out and ordered in a way that not only makes sense to humans reading it but also to assistive technologies like screen readers that crawl down the page. And remember, never present important information as just an image!
6. Design with visual contrast in mind
I may be stating the obvious, but light text on a white background is no good for anyone. It’s also useful to keep in mind that people with color blindness will be reading your website and their needs must be considered too. However, it’s also important to remember that
too much contrast may be detrimental to those with specific learning difficulties or dyslexia, so being aware of needing to find the happy medium is usually the best position to take.
7. Consider the keyboard
Some of your website visitors may use the keyboard to navigate, so ensure all fields and links are accessible using the tab key in the correct order. Remember too that the text associated with each link should be unique and understandable.
8. Add alt tags and descriptions to your images
People with screen readers may need alt tags to be able to understand what your images are. A bonus of correctly using alt tags is that it helps your SEO.
9. Don’t hide navigation
Make menu items and inline links obvious, and use different colors and underlines for text links. Fancy design features are less important than people successfully using your website.
10. Don’t hide content
If you have important information that you want your users to read, don’t stick it in the 3rd slide of your carousel. And if you must use a carousel, ensure the user can control its movement.
Remember that you are designing your products for everybody, from non-disabled people with 20:20 vision, to people who are completely blind, and from older adults who may have low vision, to people with color blindness.
By keeping these 10 tips in mind at the start of any web project, you will ensure that you are designing for as broad an audience as possible. Not only that, your products will look and function better for everybody and you will be a more professional designer because of it.