Web site developers to adapt for the visually impaired (and other people with disabilities) are twofold.
On the one hand, I have not met a person who would say "too little to
spend time on them," on the other - in a fixed budgets and tight
deadlines is exactly what happens. Moreover, the fact that this is necessary to study any rules, guidelines, often frightening. Meanwhile, most of the recommendations from the consortium WCAG 2.0 W3C (Web Content Accessibility Guidelines, Guidelines for Web Content Accessibility
) on closer examination corny coincide with the rules of etiquette,
recommendations for adapting websites for mobile devices, and just not
that difficult to implement.
In this case, follow these guidelines will simplify the work with the
site not only to users with disabilities, and people with limited
technical capabilities (low speeds, the lack of a mouse, as on
smartphones, the small screen), and the elderly. So I decided to write arbitrary description of the twelve positions WCAG 2.0, which also bring to your attention.
The easiest and most versatile way of perception of information for any man - typed text. He is not always optimal for conditionally healthy people (quite well, as we know, does not happen): best song to listen to, video - watch. But the text format is good in that it is easily perceivable can be improved: with low vision magnifier or increase the font by the operating system, the blind - with the help of computer programs, screen readers or Braille display it on the screen. Therefore, all the content that lends itself to presentation in text form, and to provide (or offer a textual representation as an alternative way to deliver information.) Exceptions to this rule - special forms of content:
Have you had a situation where you need to quickly understand what has long video to decide whether to watch it? Or find a specific fragment that "somewhere"? Or a man speaking the audio, making it too fast or illegible? Agree, always useful to have a text equivalent content of audio or video clip. Or at least a description of what was written.
It should be understood that the transcript audioryada not fully describes the content of the video. Text equivalent should also include a description of what is shown on the screen important to convey to the reader a full sense of the video. In addition to text-only version of video clips and still create audio versions, according to the same principles.
And the usefulness of subtitles in the video has not been canceled.
Assistive technologies for computer screen readers, accept HTML-page as a sequence of text, not as a set of blocks that are geometrically arranged on the page. It is therefore very important in the source code of the page that this same sequence of blocks, it is implied by the mapping. For example, at the absolute positioning div-s they have shown in the same order as shown on the page. Also, it imposes restrictions on the sensory characteristics of the content (color, location, etc.). Example of instructions that can create problems for users with disabilities, "if you an individual, fill in the second column of the table," or "press the green button if you agree to the terms of the offer."
Also useful to provide the user with a simplified page design (eg, print).
And, of course, it is important to use semantically correct markup. Not only for assistive technology, but also for other cases automatically extract content, such as search engines.
Let's start with color. Colour coding - a good thing. For example, the button / icon conservation can be green, and the delete button - red. Or the user is prompted to select the color of a problem: a much clearer display colored squares and asked to press on like the color, you choose a value from the drop down list "green", "red", etc.
But you can not use color as the only way to transmit information or denote the action. On the red button should be clearly written, "delete" (or it should have a corresponding attribute title), the same applies to the colored squares. Another example, which, unfortunately, is very common: in red border of the filled form fields. Color-coding is not enough: you need at least to list all the wrong field, and specify in what error (in the phone number little numbers, email does not fit).
This provision also applies to audio content being played automatically. Surely you, like me, met obtrusive banners or other page elements that will not only show and tell aloud his message. And no doubt you, like me, most of it is annoying. Personally, I believe that these elements on the page can not be used (except in rare cases such as browser games or online broadcasts), but if they do exist, it is necessary to provide the means to turn off the volume or decrease in the volume directly on the page, not the operating system button or turn off the speakers.
It is also desirable to abandon the background sound, or if you really really want to make it quiet and off.
Also, this position include the following simple rules:
When I first sat down at the computer, the most popular medium of text was Norton Commander. Without exception, the operation it was easy to do on the keyboard and the mouse, we used much less frequently than at present, graphical operating systems. The reason is clear: try without a mouse, one Tab-th to get to the eighty-third icon on the desktop or to the links in the footer of your site.
However, for old time I use the keyboard not only for text input key "down" in the input fields and drop-down lists, ctrl-c/ctrl-v, Tab, Enter, etc. And although I feel light, but discontent, if not by pressing Enter when sending the form, and after entering the login Tab key does not put the cursor on the password field.
That's set to WCAG also speaks providing content management functionality with the keyboard. This primarily refers to the forms. A separate issue - fashion today one-page site (when the transition to sub-site is without a page reload: new page or creeps on the right or bottom, or float over the old one), parallax-effects, loss of the menu when the mouse, etc.
To verify compliance with this provision of your page is very simple: move the mouse, and try all the important steps to make the page only the keyboard.
This provision deals with the content, time-limited. For example, it may be shifting frames of special offers or new products, online tests, online board game with a restriction on running time or batch, automatic listalki slide presentations, etc. These restrictions may create a problem not only visually impaired, but also the elderly, and people for which the language of the content is not native. If possible, time limits should be avoided, and if you do not - give the user the ability to manually pause or extend the content, advance notice of the expiration of his time.
Of course, there are times when it is impossible to renew, for example, online auctions, the choice of the plane in real time. In such cases, too, have ways: to give more time to move the auction block user-selected location to give him excessive time to confirm, etc.
If the time limit due to safety issues (eg, client-bank terminates the session when the user is idle for a long time), in addition to warning of imminent rupture of the session if the gap is still there was a need to re-authenticate after return the user to the place where he was before, without causing re-run all the way from the beginning.
We are talking about outbreaks or too frequent blinking or its elements onto the page. (This also, I would add sharp unexpected sounds.) I think the undesirability of such methods for conditionally healthy people is clear. If for some reason, and without such outbreaks can not do, one should at least make them not very frequent.
Again, an experienced web developer will not find in this position, nothing that would contradict the logic of the design of the site without an audience of people with disabilities:
Also during the layout, we must remember that if you move around the page using the keyboard sequence of movements should be the same as using the mouse, with the meaning of the page should not be violated.
If the main page content precedes a large amount of background information (header, advertising, navigation elements, minor elements), as high as possible on the page should be an item, when clicked, the visitor will see the main content. However, the massive use hats and hide content on the second scroll the screen - and so a bad taste.
First, the language (or languages) pages must be defined in the HTML-code of your page. If a page contains a block of text in a different language (eg, citations), their container should have an attribute xml: lang, defining language. Secondly, if you see there are rare words, abbreviations or specific meaning of the words, it makes sense to clarify immediately.
If the content is too specific (for example, uses the formula, scientific, medical, or financial lexicon), but is focused not only on the professional audience, it would be nice to provide alternative content content, easier and meaning, and possibly read.
In developing avoid unexpected behavior or page elements that can be confusing. Examples of erroneous behavior of the page:
In other words, changing the page context (opening a new window, go to the next page, the dynamic change of a sizeable amount of content) should be predictable for the user, and his action that caused this change (form submission, the translation of focus, move mouse over the item, scrolling) understanding of user needs is explicitly associated with the consequences.
Surely you have seen the error messages in the spirit of "Error number 355" or "stack overflow" or "form properly filled out." You'll see a window with a label and look at her as a new gate, each time thinking, well, it was really hard to write it so that it was clear that I do with this? But these labels are not written secretaries and programmers, and, good programmers. Have you noticed that as the professional level of the developers move away from the "common people"? We know that the field of the star - required that the date is filled in Russia in the format "dd.mm.yyyy" that if after the field "Password" is the same field without a signature, it will retry a password, and the box next to tsiforkami - CAPTCHA.
If we stand on the place of the person, the perception that our form is difficult for one reason or another (second language, low vision, age, lack of experience on the Internet), it will be much easier to make the form so that they were clear for all categories of users. Under the filed form, I mean not only the layout of it, but the reaction to the incorrect filling: place the contents of the output and error messages, tips and templates.
It is also very important principles confirm and reversibility, especially in cases when it comes to legal or financial transactions (consent of the offer, sending payment, etc.): the user must, first, to provide the ability to test the entered data and correct errors before sending and Second, if possible, the ability to review posted information (undo).
Sometimes, in order to replace the standard decorations developers HTML elements by alternative means. For example, instead of the drop-down list - an invisible layer that appears when you click on an element, instead radiobatonov - pictures on / off circles, instead of the submission - the picture with onclick-ohm. Such methods should be avoided, the benefit features HTML / CSS powerful enough for such visual effects, and if you do not - check for compatibility with assistive technologies.
And here it is again: semantically correct layout is very important!
As you can see, nothing exotic Guidelines for Web Content Accessibility from the developer is not required. Of course, the document itself is more complex and detailed, with the levels of compliance, glossary, etc. Unfortunately, most of the accompanying content (explanations, examples) has not been translated into Russian, but there is an excess in the original .
Russia has registered more than 13 million people with disabilities, that is, 10% of the population. That is, with certain assumptions, we may assume that every tenth visitor to your site has any restrictions on health. And when you consider the users of different gadgets, for which the principles described also apply, as well as older people, their share in the audience of the site can grow up to 30-40%. Agree, even ten (not to mention the forty) percent of visitors - more than the tangible figure to take care that they should be easy to read your site, to write, to make it a purchase.
Personally, I think that is exactly the letter of the Guidelines in any project is not necessary: in some cases it may be too time consuming. Но если вы будете держать в голове основные принципы и учитывать их в работе, ваши проекты будут гораздо более дружелюбны к самым разным пользователям.
Provide a text version of any non-text content for possible conversion to alternative forms that are suitable for different users
The easiest and most versatile way of perception of information for any man - typed text. He is not always optimal for conditionally healthy people (quite well, as we know, does not happen): best song to listen to, video - watch. But the text format is good in that it is easily perceivable can be improved: with low vision magnifier or increase the font by the operating system, the blind - with the help of computer programs, screen readers or Braille display it on the screen. Therefore, all the content that lends itself to presentation in text form, and to provide (or offer a textual representation as an alternative way to deliver information.) Exceptions to this rule - special forms of content:
- Controls and input (input fields, combo boxes, radio buttons). These elements can not be represented in the form of text, they need to use the label tag and attributes alt, title. This program will help to associate the input box giving explanations and, as a consequence, to convey to the user the meaning of the element.
- Tests or exercises that can not be represented as text. In this case, must have at least a short-text explanation of this exercise. The same applies to the content, create a specific sensory perception (pictures, music without words).
- CAPTCHA. First, a clear explanation of why you need the input field and as that is where the input (surely you've seen "austere" captcha, consisting only of pictures and text boxes without text explanation?). Second, to have an alternative to CAPTCHA output information (audiokapcha).
- Non-text elements for decoration, format, or not at all visible. Such items must be described so that the auxiliary (assistive) technologies (eg, sound text) were ignored. That is, for example, to make design in CSS or not to prescribe attributes alt and title.
Provide an alternative version of media content, time-limited
Have you had a situation where you need to quickly understand what has long video to decide whether to watch it? Or find a specific fragment that "somewhere"? Or a man speaking the audio, making it too fast or illegible? Agree, always useful to have a text equivalent content of audio or video clip. Or at least a description of what was written.
It should be understood that the transcript audioryada not fully describes the content of the video. Text equivalent should also include a description of what is shown on the screen important to convey to the reader a full sense of the video. In addition to text-only version of video clips and still create audio versions, according to the same principles.
And the usefulness of subtitles in the video has not been canceled.
Create content that can be presented in various forms without loss of data or structure (for example, with a simple page layout)
Assistive technologies for computer screen readers, accept HTML-page as a sequence of text, not as a set of blocks that are geometrically arranged on the page. It is therefore very important in the source code of the page that this same sequence of blocks, it is implied by the mapping. For example, at the absolute positioning div-s they have shown in the same order as shown on the page. Also, it imposes restrictions on the sensory characteristics of the content (color, location, etc.). Example of instructions that can create problems for users with disabilities, "if you an individual, fill in the second column of the table," or "press the green button if you agree to the terms of the offer."
Also useful to provide the user with a simplified page design (eg, print).
And, of course, it is important to use semantically correct markup. Not only for assistive technology, but also for other cases automatically extract content, such as search engines.
Simplify your viewing and listening to content, separating the important parts of the secondary
Let's start with color. Colour coding - a good thing. For example, the button / icon conservation can be green, and the delete button - red. Or the user is prompted to select the color of a problem: a much clearer display colored squares and asked to press on like the color, you choose a value from the drop down list "green", "red", etc.
But you can not use color as the only way to transmit information or denote the action. On the red button should be clearly written, "delete" (or it should have a corresponding attribute title), the same applies to the colored squares. Another example, which, unfortunately, is very common: in red border of the filled form fields. Color-coding is not enough: you need at least to list all the wrong field, and specify in what error (in the phone number little numbers, email does not fit).
This provision also applies to audio content being played automatically. Surely you, like me, met obtrusive banners or other page elements that will not only show and tell aloud his message. And no doubt you, like me, most of it is annoying. Personally, I believe that these elements on the page can not be used (except in rare cases such as browser games or online broadcasts), but if they do exist, it is necessary to provide the means to turn off the volume or decrease in the volume directly on the page, not the operating system button or turn off the speakers.
It is also desirable to abandon the background sound, or if you really really want to make it quiet and off.
Also, this position include the following simple rules:
- text should be enough contrast with the background, except for minor elements such as text and logos
- the user should be able to enlarge the text to at least 200%, and at the same page should not disperse
- no need to write text in a picture (if it has no clear justification)
- it is desirable to fit the text of the general rules of typography for the web: the line width is not greater than 80 characters, the text is not aligned to both edges, line spacing should be small and significantly less than the spacing between paragraphs, etc.
Provide the ability to manage all the functionality of the keyboard
When I first sat down at the computer, the most popular medium of text was Norton Commander. Without exception, the operation it was easy to do on the keyboard and the mouse, we used much less frequently than at present, graphical operating systems. The reason is clear: try without a mouse, one Tab-th to get to the eighty-third icon on the desktop or to the links in the footer of your site.
However, for old time I use the keyboard not only for text input key "down" in the input fields and drop-down lists, ctrl-c/ctrl-v, Tab, Enter, etc. And although I feel light, but discontent, if not by pressing Enter when sending the form, and after entering the login Tab key does not put the cursor on the password field.
That's set to WCAG also speaks providing content management functionality with the keyboard. This primarily refers to the forms. A separate issue - fashion today one-page site (when the transition to sub-site is without a page reload: new page or creeps on the right or bottom, or float over the old one), parallax-effects, loss of the menu when the mouse, etc.
To verify compliance with this provision of your page is very simple: move the mouse, and try all the important steps to make the page only the keyboard.
Provide users enough time to read and work with the content
This provision deals with the content, time-limited. For example, it may be shifting frames of special offers or new products, online tests, online board game with a restriction on running time or batch, automatic listalki slide presentations, etc. These restrictions may create a problem not only visually impaired, but also the elderly, and people for which the language of the content is not native. If possible, time limits should be avoided, and if you do not - give the user the ability to manually pause or extend the content, advance notice of the expiration of his time.
Of course, there are times when it is impossible to renew, for example, online auctions, the choice of the plane in real time. In such cases, too, have ways: to give more time to move the auction block user-selected location to give him excessive time to confirm, etc.
If the time limit due to safety issues (eg, client-bank terminates the session when the user is idle for a long time), in addition to warning of imminent rupture of the session if the gap is still there was a need to re-authenticate after return the user to the place where he was before, without causing re-run all the way from the beginning.
Do not use a known hazardous to health design elements
We are talking about outbreaks or too frequent blinking or its elements onto the page. (This also, I would add sharp unexpected sounds.) I think the undesirability of such methods for conditionally healthy people is clear. If for some reason, and without such outbreaks can not do, one should at least make them not very frequent.
Provide users with the help and support to navigate, find content and determine their current location on the site
Again, an experienced web developer will not find in this position, nothing that would contradict the logic of the design of the site without an audience of people with disabilities:
- Each page should have a title that describes the content
- Text links should quite clearly describe the page where you will get a visitor when you ("detailed product information is here" - a bad example, "see also detailed information about the product" - nice)
- visitor should have several ways to find the right page it (the standard navigation, site map, the search string)
- as you move through the form of the keyboard (key Tab) is an active field of the form should be clearly identified
- on any page the visitor should be clear what this page and website
Also during the layout, we must remember that if you move around the page using the keyboard sequence of movements should be the same as using the mouse, with the meaning of the page should not be violated.
If the main page content precedes a large amount of background information (header, advertising, navigation elements, minor elements), as high as possible on the page should be an item, when clicked, the visitor will see the main content. However, the massive use hats and hide content on the second scroll the screen - and so a bad taste.
Make all your text content readable and understandable
First, the language (or languages) pages must be defined in the HTML-code of your page. If a page contains a block of text in a different language (eg, citations), their container should have an attribute xml: lang, defining language. Secondly, if you see there are rare words, abbreviations or specific meaning of the words, it makes sense to clarify immediately.
If the content is too specific (for example, uses the formula, scientific, medical, or financial lexicon), but is focused not only on the professional audience, it would be nice to provide alternative content content, easier and meaning, and possibly read.
Web pages are displayed and operate in predictable ways
In developing avoid unexpected behavior or page elements that can be confusing. Examples of erroneous behavior of the page:
- when the focus moves to the wrong fields are the focus to another field without asking the user to move back
- with the focus on the field, self-explanatory, the help window pops up automatically
- an explanation of the input field is not displayed next to it, and within it, and disappears when focused
- standard site navigation located on different pages or behave differently
- if the role of the list (tag select) to the user to choose which page to go to, the transition should be carried out after selecting the item and pressing the spacebar or Enter, instead of Esc or Tab
In other words, changing the page context (opening a new window, go to the next page, the dynamic change of a sizeable amount of content) should be predictable for the user, and his action that caused this change (form submission, the translation of focus, move mouse over the item, scrolling) understanding of user needs is explicitly associated with the consequences.
Help users avoid mistakes when entering information and to correct them
Surely you have seen the error messages in the spirit of "Error number 355" or "stack overflow" or "form properly filled out." You'll see a window with a label and look at her as a new gate, each time thinking, well, it was really hard to write it so that it was clear that I do with this? But these labels are not written secretaries and programmers, and, good programmers. Have you noticed that as the professional level of the developers move away from the "common people"? We know that the field of the star - required that the date is filled in Russia in the format "dd.mm.yyyy" that if after the field "Password" is the same field without a signature, it will retry a password, and the box next to tsiforkami - CAPTCHA.
If we stand on the place of the person, the perception that our form is difficult for one reason or another (second language, low vision, age, lack of experience on the Internet), it will be much easier to make the form so that they were clear for all categories of users. Under the filed form, I mean not only the layout of it, but the reaction to the incorrect filling: place the contents of the output and error messages, tips and templates.
It is also very important principles confirm and reversibility, especially in cases when it comes to legal or financial transactions (consent of the offer, sending payment, etc.): the user must, first, to provide the ability to test the entered data and correct errors before sending and Second, if possible, the ability to review posted information (undo).
Ensure maximum compatibility with existing content and develop custom applications, including assistive technologies
Sometimes, in order to replace the standard decorations developers HTML elements by alternative means. For example, instead of the drop-down list - an invisible layer that appears when you click on an element, instead radiobatonov - pictures on / off circles, instead of the submission - the picture with onclick-ohm. Such methods should be avoided, the benefit features HTML / CSS powerful enough for such visual effects, and if you do not - check for compatibility with assistive technologies.
And here it is again: semantically correct layout is very important!
Conclusion
As you can see, nothing exotic Guidelines for Web Content Accessibility from the developer is not required. Of course, the document itself is more complex and detailed, with the levels of compliance, glossary, etc. Unfortunately, most of the accompanying content (explanations, examples) has not been translated into Russian, but there is an excess in the original .
Russia has registered more than 13 million people with disabilities, that is, 10% of the population. That is, with certain assumptions, we may assume that every tenth visitor to your site has any restrictions on health. And when you consider the users of different gadgets, for which the principles described also apply, as well as older people, their share in the audience of the site can grow up to 30-40%. Agree, even ten (not to mention the forty) percent of visitors - more than the tangible figure to take care that they should be easy to read your site, to write, to make it a purchase.
Personally, I think that is exactly the letter of the Guidelines in any project is not necessary: in some cases it may be too time consuming. Но если вы будете держать в голове основные принципы и учитывать их в работе, ваши проекты будут гораздо более дружелюбны к самым разным пользователям.
Articles
0 commentaires:
Enregistrer un commentaire