How to Make Your Website More Accessible for Visually Impaired Visitors

Can visually impaired visitors use your website with ease? Over 1.3 billion people globally suffer from some form of visual impairment, according to the World Health Organization (WHO). With a decreased sense of sight, many of these individuals rely on screen readers to browse the internet and navigate websites. If your website isn't optimized for visually impaired visitors, though, they could struggle to use it.

Optimizing your website for visually impaired visitors is easier than it sounds. Here at SP Marketing, we’ve compiled the top ways to redesign your website with those viewers in mind. If you’re interested in how we can help you get started with a redesign, get in touch with us here.

Avoid Using Embedded Text in Images

Don't embed text in images unless it's absolutely necessary to your website's design. Using text-to-speech technology, screen readers are highly effective at reading text displayed on websites, but they aren't able to recognize text embedded in images. If you embed text in images, screen readers will skip it, meaning the content could go unnoticed by visually impaired visitors.

No text in images

Use a Simple Font Type

There are hundreds of thousands of different fonts, each of which has a unique visual style. While some fonts are simple, others are more complex. Using a complex font type with unnecessary decorative elements will only make your website's content more difficult to read for visually impaired visitors, so stick with a simple font type.

Most font types are either serif or sans serif, the latter of which is recommended because they are easier to read. Serif fonts, such as Times New Roman, are characterized by the presence of decorative lines, whereas sans serif fonts have clean lines without decorations.

Although it's a subtle difference, sans serif fonts are easier to read on computer monitors, smartphone screens and other display devices than their serif counterparts. If you use a serif font, the decorative lines could blur together with the letters, making your content difficult to read.

We’ve put together a full blog post about how to best use fonts. Check that out here.

Some of the best sans serif fonts for visually impaired visitors include:

  • Arial
  • Verdana
  • Tahoma
  • Helvetica
  • Calibri
  • Century Gothic

Use a Large Default Font Size

In addition to a simple and easy-to-read font type, using a large default font size will make your website more accessible to visually impaired visitors. Not surprisingly, small text is more difficult for visually impaired visitors to read than large text. Even when wearing corrective lenses, some visitors may not be able to read your website's content if the text is too small.

To improve your website's usability for visually impaired visitors, use a large default font size of at least 12 points.

With that said, you should also allow visitors to increase or decrease the size of the text displayed on your website. Most web browsers already support scaling. Holding the Ctrl button and pressing the plus (+) sign, for example, will increase the size of a web page's content, whereas holding the Ctrl button and pressing the minus (-) sign will decrease its size.

To ensure that all web browsers, including old versions, can properly scale your website's text, use a relative unit of measurement like em or percentage.

Interested in what we’ve designed for clients with this in mind before? Check out our website design gallery here.

Design With a High-Contrast Color Scheme

According to a survey conducted by Jakob Nielson, low contrast is the most common legibility problem from which websites suffer. If there's insufficient contrast between your website's text and the background on which it's presented, visually impaired visitors may have trouble reading it.

Contrast refers to the difference in light between two colors or visual elements, such as text and the background. Using dark blue text on a black background is a low-contrast color scheme. In comparison, black text on a white background is a high-contrast color scheme.

Use High Contrast Design

High-contrast color schemes are easier to read because the text is more pronounced against the background, making it ideal for visually impaired visitors.

The World Wide Web Consortium's (W3C's) Web Content Accessibility Guidelines (WCAG) 2.0 says websites should feature a color contrast ratio of at least 4.5-to-1 for regular text or 3-to-1 for headings. To put those figures into perspective, a black-and-white color scheme offers the highest color contrast ratio at 21-to-1, whereas using two of the same colors offers the lowest color contrast ratio at 1-to-1.

To choose a high-contrast color scheme, play around with the free tool at colorsafe.co. On the right-hand side of the tool, you can select from either the "AA" or "AAA" WCAG standard. The AA standard is the minimum color contrast ratio required for WCAG compliance, making it less restrictive than the AAA standard. Choosing the AAA standard, however, will reveal color combinations with a higher contrast ratio, which is ideal when optimizing your website for visually impaired visitors.

Use Alt Text to Describe Images

Screen readers can't decipher text embedded in an image, but they can read the image's alt text. An attribute supported by HTML and XHTML pages, alt text is the alternative text for an image. While you can upload and publish images on your website without using this attribute, adding alt text is highly beneficial for several reasons.

First, alt text is used as a ranking signal by all major search engines. When search engines visit your website, they'll scan the alt text of your images. Using this information, they'll choose relevant keywords for which to rank your website.

Second, alt text is used by screen readers to describe images using audio. When a visually impaired visitor accesses a web page with images, his or her screen reader will read aloud the images' alt text.

Add Closed Captions for Videos

If your website has videos, you must add closed captions to make them accessible to visually impaired visitors. Not to be confused with subtitles, closed captions consist of all spoken dialogue, music and other sounds in a video.

The steps to adding closed captions to a video vary depending on the platform used to host the video. If your website's videos are hosted on YouTube, meaning you embed them on your website, you can use the Creator Studio to add closed captions.

If your videos are hosted on Vimeo, you can add closed captions by accessing your video's settings and clicking "Advanced," followed by "Choose file" below "Add Captions & Subtitles." If you host your own videos directly on your website, on the other hand, you'll have to add closed captions manually by editing them into your videos.

It’s important to optimize your website to be seen by as many people as possible. This includes making the right changes for visitors who may be visually-impaired. With just a few adjustments, you can make your website ready to be seen by everyone.

Ready to get started on your next project? Reach out to us and see what we can do for you!

TOP