Making an online cinema for the blind (WCAG 2.0 AAA)
About 275 thousand blind and visually impaired people live in the Russian Federation, 22% are young people, some of them are also Internet users, like us.
In this article, I will share with you the tools and unusual experience that can be obtained when creating an online cinema for visually impaired people.
(an example of an adapted topic on GitHub by the link from the image)
This is the standard of accessibility of sites for people with disabilities. Describes the right approaches to the design of interfaces and site design. Read about the standard: here in English , and here in Russian .
')
Visually impaired people use the Internet with the help of special software that works qualitatively only on specially adapted sites.
Movie commentaries are an additional audio track containing off-screen description of the video sequence. Typing comments are made according to certain rules and are voiced by a professional speaker in the pauses between the dialogues. Films will be shown only to visually impaired persons from relevant organizations (but it all really works).
Readers
Such users can hear your site using NVDA and JAWS if they use Win or using the built-in Voiceover on Mac OS X (it is included in the OS and is quite convenient).
Description VoiceOver is here , you can read about JAWS here , and here you can learn more about NVDA.
The third product is an open source project and you can help improve it .
Checkers
Checking is easy to google on request “wcag 2.0 checker” (there are enough of them), I liked this one .
In addition, there is a special toolbar for FireFox .
It is very convenient if you have a suitable “tester” nearby, but if not, you can use ready-made checkers or turn on the reader and try using your website with closed eyes.
1. “Regular site” in the screen reader sounds like porridge, using standard keyboard navigation is impossible, because states are not visible, so you quickly get lost. However, on sites even with minimal adaptation it can be understood that where and even read something.
2. Screen readers by themselves are not yet perfect, and it is unclear - this is a buggy program, or on the site jamb.
3. It is interesting to read texts - long and boring, you can scroll. If the text is normally marked with subtitles - scrolling on them is oriented and you can catch the general meaning. If not, then the reader snatches the individual words and in the end it turns out compote.
4. Responsive websites in zoom and “proportional typography” behave interestingly - you increase the size - you get such a giant mobile layout, but the proportions between the elements are preserved and everything is still clear.
5. Depending on the browser, screen readers read differently - and in general they are quite different.
6. Many sustainable conventions that we see are missing: for example, the site header and the “first screen” do not exist, there is only “information at the beginning of the page”, which is repeated every time if the developers have not inserted a link to “skip”.
7. The problem with the links in the "new window": a person with a high degree of probability is lost and does not understand what happened and cannot be returned, because the usual back button does not work.
8. 404-page: a person basically understands that something is wrong, but what exactly is difficult to navigate. The first idea is the most common mistake. If the network often breaks, the person thinks that the Internet has broken. If the program is kind of buggy or freezes - he thinks that it is hanging, etc. Sometimes the developers put some “news” on 404 or something else — and this is even more confusing.
8. Pop-ups: for example, a type of laybox gallery seems to be accessible because the focus on the thumbnail is still controlled from the keyboard, but there are no special tips for the screen reader, and it is not clear how to deal with it.
9. "Sections in development": a person is very difficult to navigate what it is. He does not understand that “there is simply nothing there” and thinks that “it is there”, but for some reason he doesn’t show it or something has failed with HIM.
10. There are interesting bugs: for example, in the FF player - this is a trap - you get into it, and you can’t get back from the keyboard, so wander around all its buttons until you poke it with a mouse (youtube player, any player in iframe). It is impossible to be saved - there is a whole thread on bagzilla about this.
11. The most common browser for such people - IE and a miracle if 9. This is a complex social phenomenon - there is a social program of the Russian Federation, according to which visually handicapped people are given free specially equipped computers (creepy junk), they take "as is" and use "as there is". Only more or less young people think to put something there. Even if there is Chrome, then they do not use it almost, it is more convenient for IE. They are used to it and know what the name is, where are the menus and they never change (now especially).
All the new beautiful features - they have to one place because you do not understand where everything has become and in general everything is different
12. Priorities are completely different in terms of software: we like the new - it's more convenient, cool, beauty,
on the contrary, it is better to leave everything as it was otherwise you will be lost and you will not understand anything and you will listen to your screen reader 10 times while you enter.
13. Sometimes they have programs for remote control of the computer - and when things are really bad - the remote interlocutor can connect and push the mouse where necessary (confidant or friends).
14. About social networks: Vkontakte is quite difficult, but it is possible to use, but in FB it is almost impossible - there are a lot of pop-ups and this is where you need to navigate through the image. By the way, Yandex (according to rumors) has an almost blind person on staff who helps them adapt all sorts of things.
15. If the site is clear to the screener, the rest should be 2 times clearer. A screen reader is a cool thing to test - if something is “weird” in a screen reader, then this is in most cases an error. Yes, and you start writing texts shorter and more intelligible.
16. The world (inside the computer) that says to you all the time: I am a button, I am a link, I am a pop-up, and even with errors and malfunctions. Things that seem simple to us (a matter of a couple of seconds — found clicked)
minutes can go away.
17. On MacOS, Mavericks - the screen reader calls the image “image”. Write alt text to the pictures!
A lot of information on the availability of projects on WordPress is posted here , something else can be learned from here - a lot of texts are collected in one place.
P.S.
A special thanks goes to Aleksey Vladimirovich Fitisov, who was a tester and very helpful with his comments and feedback on the work of various reading programs, as well as Anna Ladoshkina from the Greenhouse of social technologies, who did over90% of the work.
Create accessible sites!
Update. On average, if the use of WCAG is laid down at the level of the technical task, then the cost of the project will increase by no more than 10%.
In this article, I will share with you the tools and unusual experience that can be obtained when creating an online cinema for visually impaired people.
(an example of an adapted topic on GitHub by the link from the image)
What is WCAG 2.0?
This is the standard of accessibility of sites for people with disabilities. Describes the right approaches to the design of interfaces and site design. Read about the standard: here in English , and here in Russian .
')
Why do you need it at all?
Visually impaired people use the Internet with the help of special software that works qualitatively only on specially adapted sites.
Where are the movies? What is typing?
Movie commentaries are an additional audio track containing off-screen description of the video sequence. Typing comments are made according to certain rules and are voiced by a professional speaker in the pauses between the dialogues. Films will be shown only to visually impaired persons from relevant organizations (but it all really works).
Testing Tools
Readers
Such users can hear your site using NVDA and JAWS if they use Win or using the built-in Voiceover on Mac OS X (it is included in the OS and is quite convenient).
Description VoiceOver is here , you can read about JAWS here , and here you can learn more about NVDA.
The third product is an open source project and you can help improve it .
Checkers
Checking is easy to google on request “wcag 2.0 checker” (there are enough of them), I liked this one .
In addition, there is a special toolbar for FireFox .
It is very convenient if you have a suitable “tester” nearby, but if not, you can use ready-made checkers or turn on the reader and try using your website with closed eyes.
Impressions and pitfalls
1. “Regular site” in the screen reader sounds like porridge, using standard keyboard navigation is impossible, because states are not visible, so you quickly get lost. However, on sites even with minimal adaptation it can be understood that where and even read something.
2. Screen readers by themselves are not yet perfect, and it is unclear - this is a buggy program, or on the site jamb.
3. It is interesting to read texts - long and boring, you can scroll. If the text is normally marked with subtitles - scrolling on them is oriented and you can catch the general meaning. If not, then the reader snatches the individual words and in the end it turns out compote.
4. Responsive websites in zoom and “proportional typography” behave interestingly - you increase the size - you get such a giant mobile layout, but the proportions between the elements are preserved and everything is still clear.
5. Depending on the browser, screen readers read differently - and in general they are quite different.
6. Many sustainable conventions that we see are missing: for example, the site header and the “first screen” do not exist, there is only “information at the beginning of the page”, which is repeated every time if the developers have not inserted a link to “skip”.
7. The problem with the links in the "new window": a person with a high degree of probability is lost and does not understand what happened and cannot be returned, because the usual back button does not work.
8. 404-page: a person basically understands that something is wrong, but what exactly is difficult to navigate. The first idea is the most common mistake. If the network often breaks, the person thinks that the Internet has broken. If the program is kind of buggy or freezes - he thinks that it is hanging, etc. Sometimes the developers put some “news” on 404 or something else — and this is even more confusing.
8. Pop-ups: for example, a type of laybox gallery seems to be accessible because the focus on the thumbnail is still controlled from the keyboard, but there are no special tips for the screen reader, and it is not clear how to deal with it.
9. "Sections in development": a person is very difficult to navigate what it is. He does not understand that “there is simply nothing there” and thinks that “it is there”, but for some reason he doesn’t show it or something has failed with HIM.
10. There are interesting bugs: for example, in the FF player - this is a trap - you get into it, and you can’t get back from the keyboard, so wander around all its buttons until you poke it with a mouse (youtube player, any player in iframe). It is impossible to be saved - there is a whole thread on bagzilla about this.
11. The most common browser for such people - IE and a miracle if 9. This is a complex social phenomenon - there is a social program of the Russian Federation, according to which visually handicapped people are given free specially equipped computers (creepy junk), they take "as is" and use "as there is". Only more or less young people think to put something there. Even if there is Chrome, then they do not use it almost, it is more convenient for IE. They are used to it and know what the name is, where are the menus and they never change (now especially).
All the new beautiful features - they have to one place because you do not understand where everything has become and in general everything is different
12. Priorities are completely different in terms of software: we like the new - it's more convenient, cool, beauty,
on the contrary, it is better to leave everything as it was otherwise you will be lost and you will not understand anything and you will listen to your screen reader 10 times while you enter.
13. Sometimes they have programs for remote control of the computer - and when things are really bad - the remote interlocutor can connect and push the mouse where necessary (confidant or friends).
14. About social networks: Vkontakte is quite difficult, but it is possible to use, but in FB it is almost impossible - there are a lot of pop-ups and this is where you need to navigate through the image. By the way, Yandex (according to rumors) has an almost blind person on staff who helps them adapt all sorts of things.
15. If the site is clear to the screener, the rest should be 2 times clearer. A screen reader is a cool thing to test - if something is “weird” in a screen reader, then this is in most cases an error. Yes, and you start writing texts shorter and more intelligible.
16. The world (inside the computer) that says to you all the time: I am a button, I am a link, I am a pop-up, and even with errors and malfunctions. Things that seem simple to us (a matter of a couple of seconds — found clicked)
minutes can go away.
17. On MacOS, Mavericks - the screen reader calls the image “image”. Write alt text to the pictures!
Additional links to useful resources:
A lot of information on the availability of projects on WordPress is posted here , something else can be learned from here - a lot of texts are collected in one place.
P.S.
A special thanks goes to Aleksey Vladimirovich Fitisov, who was a tester and very helpful with his comments and feedback on the work of various reading programs, as well as Anna Ladoshkina from the Greenhouse of social technologies, who did over90% of the work.
Create accessible sites!
Update. On average, if the use of WCAG is laid down at the level of the technical task, then the cost of the project will increase by no more than 10%.
Source: https://habr.com/ru/post/250539/
All Articles