People with visual impairments will not buy online where a website is not designed for them. As a result, the business loses customers and profits. Follow a few rules and you can make your site more inclusive and more user-friendly for everyone.

More than 2.7 million people in Ukraine have some form of disability, including visual impairment. These people also use the Internet, but need extra aids, such as a screen reader.

Those with temporary visual impairments may also have to use assistive technology, or require the site to be adapted for their specific needs. If it is not, this eliminates even more users.

All the same, most sites or mobile applications created in Ukraine are not designed to be accessible. This is because the developers did not take into account the needs of the whole range of users, including people with visual impairments.

What are the most common problems during site development and design, and how do you make the use of your platform convenient for visually impaired users? We collected some of the tips that expert Ruslan Iskov presented during the workshop “How do you make work inclusive in the digital world?” organised by UNDP in Ukraine with the support of the Ministry of Digital Transformation of Ukraine on 10 August 2021.

These rules will help you avoid the most common accessibility mistakes and make your site more inclusive.

1. First – the most important thing

Suppose the page has a central part with the main content, along with left and right columns. You need to make it so that the focus falls first in the centre, and then to the left and right columns. This way, users will be able to get to the main content faster.

Already at the design stage, it’s worth working out how the cursor of the keyboard on the web page will move. Determine and specify the order in which the cursor shifts between elements, and the order of the elements in the page layout.

2. “Clear vision”

Do you have good eyesight? Now remember how some sites are almost impossible to view on a smartphone in bright sunlight.

Grey text on a black background is not a good idea. Users with very low levels of vision, as well as “colour blindness” (i.e. the inability to distinguish certain colour combinations), find it difficult, and sometimes impossible, to read text when its colour is not very different from the background colour.

Make sure there is a sufficient level of contrast between text and background. There are techniques that allow you to calculate the level of contrast using a formula and thus assess whether this level is sufficient or not.

Also, leave enough free space between the individual blocks and elements of the web page so that they don’t “merge” into each other.

3. Pictures that “speak”

A blind user cannot see what is shown in a picture. The screen reader can inform the user that there is an image on the web page, but it is not able to recognise and describe it on its own.

You can (and should) add so-called alternative text to each image on your web page. Such text is not displayed visually, but the screen reader reads it so that a blind user can know what is depicted in the photo, diagram or chart.

The alternative text should very briefly and aptly explain the essence of what is depicted. For example, “a woman using a laptop with Windows 10 and OneDrive.”

Avoid the words “image” and “picture” in the alternative text – the screen reader will recognise the presence of a graphic element by itself and report it.

4. Hide the unimportant

Suppose your text on the site is separated by a ribbon of roses – for such an image you can specify the appropriate alternative text. But on the other hand, such an image does not carry any substantial meaning: it plays only a decorative role and is therefore uninformative.

It is better to hide such graphic image from assistive technologies. Then the screen reader will skip this item and the user will not waste their time on it.

You can hide not only images, but also other “unimportant” elements of a web page.

5. Everything has a meaning

Each element of a web page must have its own semantic meaning. The semantic meaning allows you to understand what a particular element on a web page is: a button, a list item, a link, or a heading of a certain level.

If, for example, the designer selects the title text visually (a larger font) but does not specify its corresponding semantic meaning, the screen reader will not recognise it as a title, but will perceive it as plain text.

Individual sections of the web page can be marked with landmarks. Then, when you get to a certain part of the site, the screen reader can give you specific information about it. For example – that you are in the main menu of the site, in the left column, in the main section, or the header or footer of the web page. Having a proper semantic markup provides a lot of information to facilitate navigation.

It is important to give an element its correct semantic meaning. It is necessary to distinguish, for example, that this is a button, and that is a link, and to mark them accordingly. A button is an element that activates a certain action. Whereas a link leads to another page or another place in the current document.

6. Clear links

The text for each link must be unique on a web page. For example, a site might contain a list of news with headlines and announcements, at the end of which there are links “Read in full”. The screen reader allows you to move between links or even view all the links that are present on the web page at once. If they are named identically, they will all be the same for the screen reader user, as it is not clear to which title and part of the site they belong.

The text of the link must also succinctly and clearly define where it leads. A link called “Click here” is a bad idea.

7. Headlines are important

A screen reader user can move through the titles, sequentially, or immediately to the title of a certain level. This allows them to quickly find the information they need on a web page.

Each web page must have one and only one top-level header. Such a title should be located immediately in front of the main content of the web page. Going to such a title, the user immediately views the most necessary content and skips all the “extra stuff.”

The screen reader also allows you to see all the titles of the web page at once. With a certain keyboard shortcut, the user can get a list of all the titles on the page, according to their level and hierarchy. This allows you to understand how the information is organised on the site.

8. Keyboard only

Visually impaired users cannot see a mouse pointer, so they cannot use this method of interacting with the web page. But remembering the location of the keys on the keyboard is, in fact, not so difficult.

Want to check if your site is accessible? Here is the simplest test for you. Disable the mouse – and if you can’t perform an action on the site with just the keyboard, you haven’t passed the test.

But here’s the good news: Any site can be made accessible. At the same time, the site will not suffer in any way, and the business will only benefit from it: A person with visual impairments will not use an inaccessible site. Do you want to lose a buyer? It’s up to you!

For reference

Ruslan Iskov is a Python developer, author and teacher of programming courses for the visually impaired, and an accessibility expert.

The workshop “How do you make work inclusive in the digital world?” was organised by the partners of the Impact.ua ecosystem, together with the authors of the course “Inclusive Design” on the Projector platform – Slava Shestopalov, Yevgeny Shykiryavy, and the author of the course on design Valeria Panina. Its aim was to show the importance of digital accessibility in the process of job seeking, training, and communication for people with full or partial visual impairment.

The event was held on 10 August 2021 with the support of the Ministry of Digital Transformation of Ukraine and the United Nations Development Programme (UNDP) in Ukraine, as part of the “Digital, Inclusive, Accessible: Support to Digitalisation of Public Services in Ukraine (DIA Support) Project,” funded by Sweden.

There is a recording of the workshop.

Authors:

Ruslan Iskov, accessibility expert, Python developer, author and instructor of the “Python Starter” and “Python Essential” programming courses for the visually impaired, and

Olha Matiahina, Communications Associate, DIA Support Project, UNDP