Making an online movie theater 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, just like us.
In this article I will share with you the tools and unusual experience that you can get when creating an online movie theater for visually impaired people. (an example of an adapted theme on GitHub using the link from the image)
This is the standard for site accessibility for people with disabilities. Describes the right approaches to designing interfaces and website 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 websites.
Tiflokommentarii in the movie is an additional sound track containing an off-screen description of the video. Tiflokommentarii are compiled according to certain rules and voiced by a professional speaker in the pauses between dialogs. Films will be shown only to visually impaired people from relevant organizations (but it all really works).
Readers.
Such users hear your site using NVDA and JAWS if they use Win or using the built-in Voiceover on Mac OS X (it is part of the OS and is quite convenient).
VoiceOver description is here , you can read about JAWS here , but here you can learn more about NVDA.
The third product is an open source project and you can help improve it .
Checkers
Checkers are easy to google on request "wcag 2.0 checker" (there are enough of them), I liked this one .
In addition, there is also 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 program and try to use your site with your eyes closed.
1. “Normal site” in the screen reader sounds like a mess, using the standard keyboard navigation is impossible, because no states are visible, so you quickly get lost. However, on sites even with minimal adaptation, you can understand what where and even something to read.
2. The screen readers themselves are not yet perfect enough, and it is unclear whether this program is buggy, or the site is cant.
3. It is interesting to read texts - long and boring you can scroll. If the text is normally marked with subtitles, the scroll is oriented to them and you can catch the general meaning. If not, the readers grab individual words and end up with compote.
4. Responsive sites in the zoom and with “proportional typography” behave in an interesting way - if 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 stable conventions familiar to the sighted are absent: for example, the site header and the “first screen” do not exist, there is only “information at the top of the page”, which is repeated every time if the developers did not insert 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, then the person thinks that the Internet has broken. If some kind of program is buggy or freezes, he thinks that it is frozen, etc. Sometimes developers put some “news” or something else on 404 - and this is even more confusing.
8. Pop-ups: for example, a gallery of the type like-box seems to be accessible because the focus on the thumbnail and everything else is controlled from the keyboard, but for the screen reader there are no special tips and it is not clear how to deal with it.
9. “Sections in development”: it’s very difficult for a person to understand what it is. He does not understand that “there simply is nothing” and thinks that “it is”, but for some reason he doesn’t show him or something has failed.
10. There are interesting bugs: for example, in the FF player - this is a trap - you get into it, but you can’t go back from the keyboard, and wander in a circle around all its buttons until you click somewhere with the mouse (youtube player, any player in iframe). It is impossible to be saved - there is a whole thread on bugsilla about this.
11. The most common browser for such people - IE and a miracle if 9. This is a difficult social phenomenon - there is a social program of the Russian Federation, according to which visually impaired people are provided with specially equipped computers (terrible junk) free of charge, they take it “as is” and use it “as there is". Only more or less young people are thinking of putting something there. Even if there is Chrome, they almost never use it, since IE is more convenient. They are used to it and know what is called, where are some menus and they never change (now especially).
All the new wonderful functions - they’re up to one place because you don’t understand where it became and generally everything is different
12. Priorities are completely different in terms of software: we like the new - it’s more convenient, cool, beauty,
but it’s the other way around - it’s better to leave everything as it would otherwise be lost and you don’t understand anything and you will listen to your screen reader 10 times until you enter.
13. Sometimes they have programs for remote control of the computer - and when it’s really bad - the remote interlocutor can connect and poke the mouse where necessary (proxy or friends).
14. About social networks: Vkontakte is quite difficult, but it’s possible to use it, but in the FB it’s almost impossible — there are a lot of pop-ups and such where you need to navigate the image. By the way, Yandex (according to rumors) has an almost blind person in the state who helps them adapt all sorts of things.
15. If the site is understandable to the screen reader, the rest should be 2 times clearer. The screen reader is a cool thing to test - if something is “strange” in the screen reader, then in most cases this is a mistake. And you begin to write texts shorter and more intelligible.
16. The world (inside the computer) that always says to you: I’m a button, I’m a link, I’m a pop-up, and even with errors and crashes. It
may take minutes for things that seem simple to us (a matter of a couple of seconds - found clicked) .
17. On MacOS, Mavericks - the screen reader calls the image “image”. Write alt text to pictures!
A lot of information on the availability of WordPress projects has been posted here , something else you can get from here - there are a lot of texts in one place.
P.S.
Special thanks to Alexey Vladimirovich Fitisov, who acted as a tester and helped a lot 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 at the level of technical specifications, the project cost will increase by no more than 10%.
In this article I will share with you the tools and unusual experience that you can get when creating an online movie theater for visually impaired people. (an example of an adapted theme on GitHub using the link from the image)
What is WCAG 2.0?
This is the standard for site accessibility for people with disabilities. Describes the right approaches to designing interfaces and website design. Read about the standard: here in English , and here in Russian .
Why is this necessary at all?
Visually impaired people use the Internet with the help of special software that works qualitatively only on specially adapted websites.
Where will the movies be? What is tiflocommentation?
Tiflokommentarii in the movie is an additional sound track containing an off-screen description of the video. Tiflokommentarii are compiled according to certain rules and voiced by a professional speaker in the pauses between dialogs. Films will be shown only to visually impaired people from relevant organizations (but it all really works).
Testing tools
Readers.
Such users hear your site using NVDA and JAWS if they use Win or using the built-in Voiceover on Mac OS X (it is part of the OS and is quite convenient).
VoiceOver description is here , you can read about JAWS here , but here you can learn more about NVDA.
The third product is an open source project and you can help improve it .
Checkers
Checkers are easy to google on request "wcag 2.0 checker" (there are enough of them), I liked this one .
In addition, there is also 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 program and try to use your site with your eyes closed.
Impressions and pitfalls
1. “Normal site” in the screen reader sounds like a mess, using the standard keyboard navigation is impossible, because no states are visible, so you quickly get lost. However, on sites even with minimal adaptation, you can understand what where and even something to read.
2. The screen readers themselves are not yet perfect enough, and it is unclear whether this program is buggy, or the site is cant.
3. It is interesting to read texts - long and boring you can scroll. If the text is normally marked with subtitles, the scroll is oriented to them and you can catch the general meaning. If not, the readers grab individual words and end up with compote.
4. Responsive sites in the zoom and with “proportional typography” behave in an interesting way - if 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 stable conventions familiar to the sighted are absent: for example, the site header and the “first screen” do not exist, there is only “information at the top of the page”, which is repeated every time if the developers did not insert 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, then the person thinks that the Internet has broken. If some kind of program is buggy or freezes, he thinks that it is frozen, etc. Sometimes developers put some “news” or something else on 404 - and this is even more confusing.
8. Pop-ups: for example, a gallery of the type like-box seems to be accessible because the focus on the thumbnail and everything else is controlled from the keyboard, but for the screen reader there are no special tips and it is not clear how to deal with it.
9. “Sections in development”: it’s very difficult for a person to understand what it is. He does not understand that “there simply is nothing” and thinks that “it is”, but for some reason he doesn’t show him or something has failed.
10. There are interesting bugs: for example, in the FF player - this is a trap - you get into it, but you can’t go back from the keyboard, and wander in a circle around all its buttons until you click somewhere with the mouse (youtube player, any player in iframe). It is impossible to be saved - there is a whole thread on bugsilla about this.
11. The most common browser for such people - IE and a miracle if 9. This is a difficult social phenomenon - there is a social program of the Russian Federation, according to which visually impaired people are provided with specially equipped computers (terrible junk) free of charge, they take it “as is” and use it “as there is". Only more or less young people are thinking of putting something there. Even if there is Chrome, they almost never use it, since IE is more convenient. They are used to it and know what is called, where are some menus and they never change (now especially).
All the new wonderful functions - they’re up to one place because you don’t understand where it became and generally everything is different
12. Priorities are completely different in terms of software: we like the new - it’s more convenient, cool, beauty,
but it’s the other way around - it’s better to leave everything as it would otherwise be lost and you don’t understand anything and you will listen to your screen reader 10 times until you enter.
13. Sometimes they have programs for remote control of the computer - and when it’s really bad - the remote interlocutor can connect and poke the mouse where necessary (proxy or friends).
14. About social networks: Vkontakte is quite difficult, but it’s possible to use it, but in the FB it’s almost impossible — there are a lot of pop-ups and such where you need to navigate the image. By the way, Yandex (according to rumors) has an almost blind person in the state who helps them adapt all sorts of things.
15. If the site is understandable to the screen reader, the rest should be 2 times clearer. The screen reader is a cool thing to test - if something is “strange” in the screen reader, then in most cases this is a mistake. And you begin to write texts shorter and more intelligible.
16. The world (inside the computer) that always says to you: I’m a button, I’m a link, I’m a pop-up, and even with errors and crashes. It
may take minutes for things that seem simple to us (a matter of a couple of seconds - found clicked) .
17. On MacOS, Mavericks - the screen reader calls the image “image”. Write alt text to pictures!
Additional links to useful resources:
A lot of information on the availability of WordPress projects has been posted here , something else you can get from here - there are a lot of texts in one place.
P.S.
Special thanks to Alexey Vladimirovich Fitisov, who acted as a tester and helped a lot 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 at the level of technical specifications, the project cost will increase by no more than 10%.