10 Tips for Optimizing your Website for the Visually Impaired

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 text and descriptions to your images

People with screen readers may need alt text to be able to understand what your images are. A bonus of correctly using alt text 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.

Finally

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.