Back to blog posts
Tools and techniques for visually impaired people to be online: screen readers, Braille line, enlagement software and high contrast

How do you ensure that your website is blind-friendly?

In 2018 everyone is online. Unfortunately, this is very often forgotten in the case of visually impaired people. They run into many problems when they visit modern websites. These look really slick on different screens and in different browsers, but how slick is your website for someone who can't see it? Because Spilberg finds knowledge sharing important, we are happy to share tips to make your website accessible to the visually impaired. Curious how a blind person uses a computer at all? In this video Tommy shows how he does that.

How do the visually impaired use the internet?

Now that you know that visually impaired people can also be found online, it is not difficult to imagine that they do this very differently from us. They often use a combination of techniques. First, they use a screen reader, which is software that reads what is on the screen. In addition, a Braille line is often used on the computer so that they can feel what is on the screen. Visually impaired people often also use enlargement software or a high contrast value to make pages easier to read.

​Make sure that the entire website can be operated with a keyboard

The visually impaired do not use a mouse. They can't see the mouse pointer! Often a choice is made for complete control with the keyboard, a joystick or voice control.

The most important thing for you as a developer? The entire website, including menus and forms, must be controllable with the keyboard. Also consider the recaptcha solutions. You stop spam, but also often visually handicapped! Most of the problems are in the use of JavaScript events such as 'onMouseOver' and 'onClick'. These are mouse dependent and users cannot proceed without using the mouse. You can easily solve this by using device independent event handlers (onFocus, onBlur, onSelect, etc.) or by adding extra keyboard event handlers (onKeyDown, onKeyUp, onKeyPress, etc.)

Don't forget to do this in the menus and make sure that the main menu items actually link to something. If main menu items are just headings for the submenus, keyboard navigation will not work.

Only use the H2 and H3 headings for paragraphs and sections

We often come across it, related links are shown as h3 headlines. An ordinary user will not see this, but screen readers will immediately pick it up. In order to scan pages, this software first reads out the h1, h2 and h3. If there is all unrelated information there, it is very difficult for the visually impaired to scan the page. This means that they often really have to have the page read to find out what the content of the page is. Not really handy or user-friendly ...

Present the most important information as soon as possible

Extra features, beautiful animations, search bars and related articles are of course great fun for the click-through value on your website. But for the visually handicapped this is not so much fun at all. The reading software scans a page from top to bottom. Often they have to go through a lot of crap before they know what this page is about. Therefore, make sure that the subject of a page is clear quickly, after which you can show all your extra features.

Put the most important words in front of links and titles

You probably already do this for your SEO, but if not, now is the time to really put the most important words up front in titles and links. Not only does Google use that to scan your page, screen reading software does that too!

Keep alt texts meaningful and put decorative images in the style sheets

Decorative images actually belong in the style sheets anyway, but sometimes you can't help but put it in the html. For SEO it is important that you have good alt text, but that also applies to the visually impaired. So don't put nonsense here, but be descriptive, what do you see? In any case, make sure that the alt text does not cause confusion when you read the rest of the text.

You often see confusing alt texts at online stores. A jacket is fully described in the text. However, the image is called, for example, “JS2018col2.jpg”, if there is no descriptive alt text here, such as, for example, “blue winter coat with side pockets”, it is confusing. A screen reader will read the title of the image and that does not really tempt you to purchase this jacket in this case.

Tables are also often placed as images on a website. A pity, because a visually impaired person cannot see this information that way. Use a physical table (you can generate it with this tool, for example) so that screen readers can also read it.

Search the website

A search function is very useful and nowadays we also build filters in here, but this does not always work well for the visually impaired. Visually you will often find these filters to the left, right or above the results. This often means that the screen reader first reads the filters before reading the actual search results. Therefore, try to ensure that they appear after the search results in the html. You could possibly also build in a skip link, but that is not recommended. It is not very user-friendly to have to click through to the results again on the "search results" page.

More than 350,000 Dutch people have a visual handicap and with the aging population this number will only increase further. It is good to make your websites future proof in that regard. With some minor adjustments you can ensure that you do not exclude this target group and that your client can welcome more people to his website. A win-win situation anyway!