How to make websites more accessible for users with visual impairments
In response to my first article, “Accessibility of Applications for Visually Impaired Users,” I received a list of issues related to the accessibility of sites that would really be nice to highlight.
By default, almost all HTML elements are available for screen readers, but if you want to make your site fully accessible, follow these guidelines:
A moot point. If you have enough professionalism to make a site with a beautiful design and at the same time with full accessibility, then the need for a separate adapted version will disappear by itself. But even at vk.com turned out not very. The design, after improving accessibility, does not seem to have suffered, but accessibility itself is frankly lame in both legs.
If I had a choice: to make a separate version with ideal accessibility or to combine the usual and adapted versions, I would choose the first one so that neither the design nor the adaptation would suffer.
Definitely not worth the link at the end of the page. And here we have in mind not the bottom of the page visually, but the end of the source code, since it is in the order in which the elements are located in the source code that the screen reader will read them. The best option would be to place the link first element on the page, but make it small. Users of screen readers will notice it in the first place, and it will not interfere with the rest.
I do not know whether such tools exist, in any case I have not heard of them. The easiest way is to put on headphones, close your eyes, turn on a screen reader and try to walk through all the pages on your site. To many, such a method will seem too unusual, but I cannot offer others.
Another way is to call blind people to test the site, but here you risk drowning in meaningless complaints from inexperienced users, so this method should also be used with caution.
Next come the questions, the answers to which I give from the point of view of a blind user, and not a programmer.
The most common problem when working with forms, probably, is that some forms are updated on the extent of their filling. For example, when you select a country, the list of cities is updated, when a city is selected, the list of districts or metro stations is updated. This causes the screen reader to crash and crash the virtual cursor from the form to the top of the page.
Another problem that makes many forms virtually inaccessible is the display of forms in dialog boxes. Such forms are very inconvenient for navigation, they often do not read the text, and many fields are not signed, and the purpose of a checkbox or editor remains a mystery to the user.
In order to correctly answer this question, it is necessary to explain in more detail how a blind user "sees" a web page.
For him, a page is an object model, not a picture. that is, if you can visually make a button, link or plain text identical, then the screen reader will not be fooled, it will say “link entry”, “enter button” or simply “input”. The same situation - with similar letters of the Latin and Russian alphabets. If, for a regular user, the inscriptions “hello” and “device” may seem the same for a quick reading, then for a screen reader these are always different letters, and it reads them differently.
So a phishing page is always, maybe a little bit, very little, but different from the original one, and if an inexperienced user can confuse the original with a fake, then an advanced user, who often makes payments via the Internet, will almost always notice the substitution.
Excess advertising on sites is one of the biggest problems of all blind users. Sometimes it’s just too much, making it difficult to navigate the site, sometimes it is constantly updated, dropping the virtual cursor to the top of the page, and sometimes, if the advertisement is accompanied by sound, this sound drowns out the speech of the on-screen access program, plunging many inexperienced and sometimes experienced users into panic. Imagine that suddenly huge pink bugs are crawling on the monitor, closing the entire review and not even letting you close the page with the advertisement. Unpleasant
I can not give a definite answer. The most accessible is the version already mentioned above for blind users of Yandex mail.
The full version of vk.com is almost available, but there are a lot of gross errors. This is not the fault of the developers, there is more likely an inexperienced user’s dream come true: a lot of unnecessary information, unnecessary reference points, but you won’t get lost. There are many accessible sites, it is easier to call them completely or almost completely inaccessible, for example, the web-version of a telegram already mentioned by me in the first article, the official website of the savings bank. Of course, they can be used, but with difficulties. In the same category can be attributed, and the site GosSlugi, which I also mentioned.
I don't use it because the font size is not important to me. I do not work with a computer visually.
I don’t use Siri, because I don’t have an IPhone, I have never heard of Alexa before, and Cortana in Windows 10, as well as on Windows Phone, is not available in Russian.
I use the smartphone all the time, but I prefer to browse web sites on a computer, because, unfortunately, TalkBack + Chrome & Firefox bundles on Android are extremely unstable and inconvenient. And mobile versions of sites can also be used from a computer, which very often saves from unnecessary content and simplifies navigation. So it was in vk.com, until we made an adaptive full version.
No, I do not use this mode, but maybe in the near future I will try.
The following rule works here: the larger the company, the less it cares about the individual user’s opinion.
for example, a small online store with an audience of 500 people is much more willing to respond to a problem report and fix it than a giant like Samsung or Sony.
Accessibility of the VC was sought by all of Russia for almost a month, and only by collecting more than 200,000 signatures under the relevant petition on change.org, we were able to change something.
I work with sites in English without translation, with the exception of certain cases, and I have not yet met sites in other languages in those quantities to think about autotranslation.
In general, auto-translation features very often kill any accessibility at all, making even the most adapted site inconvenient for non-visual use.
That's all.
What is desirable to do on the site to increase accessibility
By default, almost all HTML elements are available for screen readers, but if you want to make your site fully accessible, follow these guidelines:
- Add the alt attribute to the images, briefly, you can abbreviated by describing the image. In no case do not use labels like "img12345" or "image1948372" - they do not facilitate, but, on the contrary, significantly complicate navigation.
- If you used div containers in the site markup, add the role attribute to them, thereby making it clear to the screen reader that there is a menu (role = "navigation"), main content (role = "main") or site footer (role = " contentinfo "). A list of all possible values of the role attribute and information about its use can be found here .
') - If there are several containers with the same value of role on the page, use the area-label attribute, in the meaning of which briefly describe the purpose of the container in Russian. If you write an <div role = "navigation" area label = "main menu"> something </ div>, then the screen reader will read to the user the "main navigation menu reference point", which is quite convenient.
An excellent example of using adaptive markup using the role and area label can be seen in the source code mail.yandex.ru, in the mode for users of screen programs. - If desired, add hotkeys to meaningful links, for example, to the main menu items. This is done using the accesskey = “X” attribute, where X is any letter of the Latin alphabet.
- If you need to display any text when you hover your mouse over a link, button, or other element, do this using the title attribute, and not using JavaScript.
What not to do
- Do not use headings to change the font size - this complicates navigation and clogs the voice output of the screen reader with unnecessary information.
- Do not make a lot of nested tables, especially with column headers. The screen access program starts reading each cell with its coordinates and column headings of all tables one level higher, which leads to a guaranteed explosion of the brain of a blind user.
- The use of Flash technology completely breaks any accessibility, as the screen reader does not even recognize the elements created using it as separate objects.
- Proper markup is good, but do not overuse the role and area label attributes, their excess also makes navigation difficult.
- As it turned out recently, some HTML5 elements may not be recognized correctly by screen access programs in some browsers. But there are no clear recommendations here yet, this is a topic for a separate study.
Does the site need a separate version for visually impaired users?
A moot point. If you have enough professionalism to make a site with a beautiful design and at the same time with full accessibility, then the need for a separate adapted version will disappear by itself. But even at vk.com turned out not very. The design, after improving accessibility, does not seem to have suffered, but accessibility itself is frankly lame in both legs.
If I had a choice: to make a separate version with ideal accessibility or to combine the usual and adapted versions, I would choose the first one so that neither the design nor the adaptation would suffer.
Where to place a link to an adapted version of the site?
Definitely not worth the link at the end of the page. And here we have in mind not the bottom of the page visually, but the end of the source code, since it is in the order in which the elements are located in the source code that the screen reader will read them. The best option would be to place the link first element on the page, but make it small. Users of screen readers will notice it in the first place, and it will not interfere with the rest.
How to check the site for availability? Are there special tools?
I do not know whether such tools exist, in any case I have not heard of them. The easiest way is to put on headphones, close your eyes, turn on a screen reader and try to walk through all the pages on your site. To many, such a method will seem too unusual, but I cannot offer others.
Another way is to call blind people to test the site, but here you risk drowning in meaningless complaints from inexperienced users, so this method should also be used with caution.
Next come the questions, the answers to which I give from the point of view of a blind user, and not a programmer.
What problems do you encounter when working with forms?
The most common problem when working with forms, probably, is that some forms are updated on the extent of their filling. For example, when you select a country, the list of cities is updated, when a city is selected, the list of districts or metro stations is updated. This causes the screen reader to crash and crash the virtual cursor from the form to the top of the page.
Another problem that makes many forms virtually inaccessible is the display of forms in dialog boxes. Such forms are very inconvenient for navigation, they often do not read the text, and many fields are not signed, and the purpose of a checkbox or editor remains a mystery to the user.
For payment sites use payment gateways or special pages of banks. How do you understand that this is not a phishing page?
In order to correctly answer this question, it is necessary to explain in more detail how a blind user "sees" a web page.
For him, a page is an object model, not a picture. that is, if you can visually make a button, link or plain text identical, then the screen reader will not be fooled, it will say “link entry”, “enter button” or simply “input”. The same situation - with similar letters of the Latin and Russian alphabets. If, for a regular user, the inscriptions “hello” and “device” may seem the same for a quick reading, then for a screen reader these are always different letters, and it reads them differently.
So a phishing page is always, maybe a little bit, very little, but different from the original one, and if an inexperienced user can confuse the original with a fake, then an advanced user, who often makes payments via the Internet, will almost always notice the substitution.
How do you interact with advertising? is it available?
Excess advertising on sites is one of the biggest problems of all blind users. Sometimes it’s just too much, making it difficult to navigate the site, sometimes it is constantly updated, dropping the virtual cursor to the top of the page, and sometimes, if the advertisement is accompanied by sound, this sound drowns out the speech of the on-screen access program, plunging many inexperienced and sometimes experienced users into panic. Imagine that suddenly huge pink bugs are crawling on the monitor, closing the entire review and not even letting you close the page with the advertisement. Unpleasant
Give an example of a great site accessibility.
I can not give a definite answer. The most accessible is the version already mentioned above for blind users of Yandex mail.
The full version of vk.com is almost available, but there are a lot of gross errors. This is not the fault of the developers, there is more likely an inexperienced user’s dream come true: a lot of unnecessary information, unnecessary reference points, but you won’t get lost. There are many accessible sites, it is easier to call them completely or almost completely inaccessible, for example, the web-version of a telegram already mentioned by me in the first article, the official website of the savings bank. Of course, they can be used, but with difficulties. In the same category can be attributed, and the site GosSlugi, which I also mentioned.
Do you use browser settings to increase font size? Does it work often?
I don't use it because the font size is not important to me. I do not work with a computer visually.
Do you use voice assistants like Siri, Alexa, Cortana?
I don’t use Siri, because I don’t have an IPhone, I have never heard of Alexa before, and Cortana in Windows 10, as well as on Windows Phone, is not available in Russian.
Do you often use a smartphone? Is Mobile Desktop Sites More Convenient? Mobile sites contain less trash, is this an advantage?
I use the smartphone all the time, but I prefer to browse web sites on a computer, because, unfortunately, TalkBack + Chrome & Firefox bundles on Android are extremely unstable and inconvenient. And mobile versions of sites can also be used from a computer, which very often saves from unnecessary content and simplifies navigation. So it was in vk.com, until we made an adaptive full version.
Do you use the reading mode in a browser that cuts the husk?
No, I do not use this mode, but maybe in the near future I will try.
Are you trying to inform site owners about accessibility issues? Does it help?
The following rule works here: the larger the company, the less it cares about the individual user’s opinion.
for example, a small online store with an audience of 500 people is much more willing to respond to a problem report and fix it than a giant like Samsung or Sony.
Accessibility of the VC was sought by all of Russia for almost a month, and only by collecting more than 200,000 signatures under the relevant petition on change.org, we were able to change something.
How do you work with sites in other languages? Do you use autotranslate features in the browser?
I work with sites in English without translation, with the exception of certain cases, and I have not yet met sites in other languages in those quantities to think about autotranslation.
In general, auto-translation features very often kill any accessibility at all, making even the most adapted site inconvenient for non-visual use.
That's all.
Used materials
- Site for those who make websites
- Maniyax Responsive Website Development Notes
- Many short articles from different sites
Source: https://habr.com/ru/post/335442/
All Articles