Seven simple rules to make the Internet accessible to all.
Digital accessibility refers to practices for creating digital content and applications that are suitable for use by a wide range of people, including those who suffer from impaired vision, motor functions, hearing, speech, or cognitive abilities.
There is a false belief that you can make a website accessible only by investing a lot of effort and money, but this is not at all necessary. If you design a project from the very beginning, taking into account the relevant requirements, you will not need to add any special functions and content, which means there will be no additional costs.
')
If it is a question of correcting errors on an already existing site, then there will have to be some effort. When I worked at Carbon Health, we once checked the site for accessibility using a special extension in Chrome . Already on the main page there were 28 violations that needed to be fixed. At first glance it seemed that this would be a very laborious process, but it soon became clear that it would not be so difficult to make edits - all you need is to invest time and understand the basics. We managed to reduce the number of violations to zero in just a couple of days.
I want to share some simple steps that we have taken and which may also help you. These principles are designed primarily for mobile and web applications. But before we begin, let's find out why.
We, as designers, are both capable and obliged to do everything we can so that everyone can use the products we create, regardless of opportunity, context or situation. What is good is the desire for accessibility - it ultimately provides a more positive experience for all.
The number of people with disabilities reaches 56 million in the United States (that is, slightly less than one fifth of the population) and about a billion worldwide. In 2017, 814 lawsuits related to the availability of websites were filed . Already these two facts quite convincingly show us the importance of this issue.
In addition, accessibility is also beneficial from a business point of view : research shows that accessible websites rank higher in search results, have good SEO indicators, load faster, stimulate the practice of writing better code, and always have excellent usability.
These seven rules are relatively simple to implement and allow you to bring the product up to AA level through the Web Content Accessibility Guidelines (WCAG 2.0) system, making it compatible with major assistive devices, including screen readers, screen magnifiers, and speech recognition tools.
Contrasting colors is one of the problems of accessibility of sites, which is often forgotten. People with poor eyesight will probably hardly read the text if it does not sufficiently contrast with the background. According to estimates that the World Health Organization (WHO) cites in its document on visual defects and blindness , the text-to-background brightness ratio should be at least 4.5: 1 (to match the AA level). For larger and bold fonts, loosening is allowed - they are easier to distinguish even with low contrast. If your text size is 14-18pt or more, the threshold is reduced to 3: 1.
There are tools that can help you quickly check the contrast. For those who work on a Mac, I advise you to get the Contrast application - it allows you to instantly calculate the ratio using a pipette. If you want to get a more detailed assessment, I recommend to enter the desired values ​​into the tool for checking contrast from WebAIM. It will calculate the ratio for different font sizes and establish correspondence to different levels (A, AA, AAA). By changing the values, you can get the result in real time.
Source: WCAG Visual Contrast
When you are trying to tell the user something important — to set an example of an action or to provoke a reaction, do not make the color a single visual marker. People with reduced visual acuity or color blindness will be hard on your content.
Try to add color with some other indicator - for example, a signature or a texture. When displaying an error message, do not limit yourself only to the color selection of the text - add an icon or title to the window. Also consider using a bold or underlined font so that the links in the text are immediately conspicuous.
Elements with a more complex information structure — say, graphs — are especially difficult to grasp when data types are separated only by color. Use other visual aspects to convey information - shape, size and explanatory text. You can add patterns to the fill to make the difference more obvious. The Trello version for color blind is a great example of how this rule applies. If you switch to this mode, shortcuts become universally understandable by adding textures.
There is a good way: print a graph on a black and white printer and see if everything will be clear to you. In addition, you can use special applications like Color Oracle , which in real time show what content will look like for people with the most common color perception disorders. All this will help you make sure that the information on your site is not too tied to color.
Source: WCAG Visual Contrast Without Color
Noticed the blue frame, which sometimes appears around the links, fields and buttons? This frame is called the focus indicator. Browser defaults use the CSS pseudo-class to display it on elements when they are clicked. Perhaps she doesn’t seem to you to be too cute and you would prefer to just remove her. However, if you decide to get rid of the default style, be sure to consider some kind of replacement.
Tricks indicators help people understand which element they can interact with now using the keyboard and where they are in the page structure. They are useful for blind people who use screen readers, people with motor disabilities or carpal tunnel syndrome and advanced users who prefer this type of navigation. Well, plus to the fact that many of us, in principle, prefer to surf the Internet on the keyboard!
Elements that should visually underline the active state include: links, form fields, widgets, buttons, and menu items. They all need indicators that will highlight them among the surrounding elements.
You can design the indicators so that they look good in the style of your site and are combined with the image of the brand. Make active state markers easily visible, with high contrast so that they are clearly visible among other content.
Source: W3C Focus Visible
One of the worst mistakes when creating forms is to leave explanatory signatures in the fields themselves so that they disappear when entering data. When there is little space on the screen or you want to give the design a minimalistic, modern look, the temptation is great - but do not do so. The text in the form fields is usually gray and not sufficiently contrast, it is difficult to read. And people like me, moreover, halfway through, forget that they printed at all, so that the disappearing signature deprives us of all the chances to sort it out.
People who use screen readers usually move around the form with the Tab key, moving from one controller to another. Label elements are read for each of them. All the rest of the text that does not apply to them (the same explanatory inscriptions inside the fields) are usually skipped.
Always make sure that people understand what they do with the form and what to write in it. Best of all, if the signatures will remain visible even during the input process - the person must have a context before their eyes when filling in the fields. Hiding signatures and instructions to the form, designers in the pursuit of simplicity sacrifice usability .
This does not mean that you need to clutter up the screen with useless information - just make sure that the most key clues are available. An excess of data can bring no less problems than their lack. Your goal is to provide information in such a volume that the user can perform the operation without a hitch.
Source: WebAIM Creating Accessible Forms
Visually impaired people often use screen readers to “listen” to the Internet. They transform the text into sounding speech, giving the opportunity to listen to everything that is written on the site.
An alternative description can be presented in two ways:
Try to describe what is happening in the image and how it relates to the general meaning, and not just get off with a picture comment. Context is crucial.
If the image is added solely for beauty or what it expresses is duplicated in the text, you can add an attribute and leave it blank - in this case, the screen reader will miss it. When alternative text is not registered at all, some screen readers will read the file name. There is nothing worse for the user experience.
Google is currently working on an artificial intelligence solution that generates image captions with an accuracy of up to 94%. The code is in the public domain and is still in the process of being finalized. I hope we will see soon how this solution will be applied in various products. Until then, the meaning and purpose of pictures in the context of other content should be manually recorded.
Source: W3C Using Alt Attributes
The headings mark the beginning of the content block - this is a kind of tags that define the style and purpose of the text. In addition, headers define the hierarchy of content on the page.
The large font in the headers allows the user to better understand the structure of the information. Screen readers also rely on headings when reading content. Thus, people with poor eyesight get an idea of ​​the overall appearance of the page, listening to the headings in a hierarchical sequence.
When developing a site, it is necessary to use the correct structural elements. HTML elements convey to the browser information about what type of content they carry and what actions to take with it. It is the components and structure of the page that form the browser accessibility tree, which screen readers for the visually impaired work with.
Invalid markup is bad for accessibility. Do not limit the use of HTML tags with stylistic effects. Screen readers are oriented on a page based on the hierarchical structure of headings - real headlines, and not just text that is made bigger and fatter. With their help, users can listen to the full list of headings, skip blocks of content, based on the type of heading, or go to navigate the first level headings (h1).
Source: WebAIM Semantic Structure
The ability to perform operations using the keyboard is one of the main components of accessibility in web design. People with impaired coordination of movements and muscle tone, blind people, those who use screen readers, and even some advanced users rely on the keyboard when navigating the site.
Perhaps you, like me, use the Tab key to navigate to the desired interactive elements of the page: links, buttons, input fields. The active state indicator, which we talked about above, allows you to visually emphasize the element that is currently selected.
When navigating through a page, the sequence in which the user interacts with the elements is extremely important, so navigation should be logical and intuitive. The order of transition should correspond to the direction of movement of the gaze: from left to right, from top to bottom, first the main navigation, then the buttons that hide the content and the forms, and finally the footer.
Good practice is to test the site using only the keyboard. Move from link to link and from field to field with the Tab key. Check whether it is convenient to select an item by pressing Enter. Make sure that all components are arranged in the correct sequence and that their appearance is predictable. If you can go through all the pages without touching the mouse, it means that you are doing well!
One more thing. Be careful about the volume in the navigation system - this refers to the number of links, and the size of the text. Looking through all the items in the long list can tire people with limited motor abilities, and people who use a screen reader can quickly get tired of listening to long texts of links. Try to be more concise. Adding markers from ARIA or HTML 5 structural elements (for example, main or nav) will also make it easier to navigate the page.
Source: W3C Keyboard
These rules are a good starting point, but if you want to do something else to increase accessibility, I would recommend:
Well that's all. These were the seven rules that will help you bring the site to approximate AA compliance with the level of the Web Content Accessibility Guidelines .
I am still continuing to work on making design more accessible, and I myself try to observe the principles that I preach to others. Previously, it seemed to me that this is all too complicated and still does not matter much. But I was wrong. I suggest you start the process using these rules and continue the conversation about why accessibility is important.
Promoting accessibility practices is the responsibility of designers. With their help, we open the path to technology for all people, regardless of their capabilities, standard of living, age, education and place of residence. Take responsibility when designing. Thank!
WebAIM articles, resources, and practical exercises on accessibility in web design
“ 7 Things A Designer Should Know About Accessibility ” - a great article from Salesforce with accurate observations
UCLA Disabilities and Computing Program - the site, of course, is not the most beautiful and modern, but it is very rich in resources
UX Myths - an extensive list of misconceptions in UX design with denials; some of them also affect accessibility issues
Color Accessibility Workflows - here Geri Coady demonstrates how to get to the point with the selection of colors
W3C - Bible accessibility in web design, you can even get lost from the abundance of materials. But when you understand the structure, you will find excellent examples, tips and resources.
WebAIM Color Contrast Checker - a sensible tool for checking contrast, gives the result immediately after entering and for different text sizes
Inclusive Components - a library of textures, designed in the form of a blog. Particular attention is paid to the issues of affordable design. In each post, an analysis of some common interface component is carried out and a more reliable and affordable version of its design is offered.
Color Oracle is a free color blind simulator, adapted for Windows, Mac and Linux. It shows in real time how people with common color perception disorders see.
Vox Product Accessibility Guidelines - a complete list of requirements for designers, developers and project managers
AX Google Chrome Extension - check any website for accessibility violations with the Chrome inspector
Contrast is a Mac application that gives instant access to the WGAG brightness ratio.
There is a false belief that you can make a website accessible only by investing a lot of effort and money, but this is not at all necessary. If you design a project from the very beginning, taking into account the relevant requirements, you will not need to add any special functions and content, which means there will be no additional costs.
')
If it is a question of correcting errors on an already existing site, then there will have to be some effort. When I worked at Carbon Health, we once checked the site for accessibility using a special extension in Chrome . Already on the main page there were 28 violations that needed to be fixed. At first glance it seemed that this would be a very laborious process, but it soon became clear that it would not be so difficult to make edits - all you need is to invest time and understand the basics. We managed to reduce the number of violations to zero in just a couple of days.
I want to share some simple steps that we have taken and which may also help you. These principles are designed primarily for mobile and web applications. But before we begin, let's find out why.
Why strive for accessibility?
We, as designers, are both capable and obliged to do everything we can so that everyone can use the products we create, regardless of opportunity, context or situation. What is good is the desire for accessibility - it ultimately provides a more positive experience for all.
The number of people with disabilities reaches 56 million in the United States (that is, slightly less than one fifth of the population) and about a billion worldwide. In 2017, 814 lawsuits related to the availability of websites were filed . Already these two facts quite convincingly show us the importance of this issue.
In addition, accessibility is also beneficial from a business point of view : research shows that accessible websites rank higher in search results, have good SEO indicators, load faster, stimulate the practice of writing better code, and always have excellent usability.
These seven rules are relatively simple to implement and allow you to bring the product up to AA level through the Web Content Accessibility Guidelines (WCAG 2.0) system, making it compatible with major assistive devices, including screen readers, screen magnifiers, and speech recognition tools.
1. Make the colors quite contrasting.
Contrasting colors is one of the problems of accessibility of sites, which is often forgotten. People with poor eyesight will probably hardly read the text if it does not sufficiently contrast with the background. According to estimates that the World Health Organization (WHO) cites in its document on visual defects and blindness , the text-to-background brightness ratio should be at least 4.5: 1 (to match the AA level). For larger and bold fonts, loosening is allowed - they are easier to distinguish even with low contrast. If your text size is 14-18pt or more, the threshold is reduced to 3: 1.
There are tools that can help you quickly check the contrast. For those who work on a Mac, I advise you to get the Contrast application - it allows you to instantly calculate the ratio using a pipette. If you want to get a more detailed assessment, I recommend to enter the desired values ​​into the tool for checking contrast from WebAIM. It will calculate the ratio for different font sizes and establish correspondence to different levels (A, AA, AAA). By changing the values, you can get the result in real time.
Source: WCAG Visual Contrast
2. Do not rely solely on color to convey critical information.
When you are trying to tell the user something important — to set an example of an action or to provoke a reaction, do not make the color a single visual marker. People with reduced visual acuity or color blindness will be hard on your content.
Try to add color with some other indicator - for example, a signature or a texture. When displaying an error message, do not limit yourself only to the color selection of the text - add an icon or title to the window. Also consider using a bold or underlined font so that the links in the text are immediately conspicuous.
Elements with a more complex information structure — say, graphs — are especially difficult to grasp when data types are separated only by color. Use other visual aspects to convey information - shape, size and explanatory text. You can add patterns to the fill to make the difference more obvious. The Trello version for color blind is a great example of how this rule applies. If you switch to this mode, shortcuts become universally understandable by adding textures.
There is a good way: print a graph on a black and white printer and see if everything will be clear to you. In addition, you can use special applications like Color Oracle , which in real time show what content will look like for people with the most common color perception disorders. All this will help you make sure that the information on your site is not too tied to color.
Source: WCAG Visual Contrast Without Color
3. Highlight active items.
Noticed the blue frame, which sometimes appears around the links, fields and buttons? This frame is called the focus indicator. Browser defaults use the CSS pseudo-class to display it on elements when they are clicked. Perhaps she doesn’t seem to you to be too cute and you would prefer to just remove her. However, if you decide to get rid of the default style, be sure to consider some kind of replacement.
Tricks indicators help people understand which element they can interact with now using the keyboard and where they are in the page structure. They are useful for blind people who use screen readers, people with motor disabilities or carpal tunnel syndrome and advanced users who prefer this type of navigation. Well, plus to the fact that many of us, in principle, prefer to surf the Internet on the keyboard!
Elements that should visually underline the active state include: links, form fields, widgets, buttons, and menu items. They all need indicators that will highlight them among the surrounding elements.
You can design the indicators so that they look good in the style of your site and are combined with the image of the brand. Make active state markers easily visible, with high contrast so that they are clearly visible among other content.
Source: W3C Focus Visible
4. Add signatures and instructions to the input fields.
One of the worst mistakes when creating forms is to leave explanatory signatures in the fields themselves so that they disappear when entering data. When there is little space on the screen or you want to give the design a minimalistic, modern look, the temptation is great - but do not do so. The text in the form fields is usually gray and not sufficiently contrast, it is difficult to read. And people like me, moreover, halfway through, forget that they printed at all, so that the disappearing signature deprives us of all the chances to sort it out.
People who use screen readers usually move around the form with the Tab key, moving from one controller to another. Label elements are read for each of them. All the rest of the text that does not apply to them (the same explanatory inscriptions inside the fields) are usually skipped.
Always make sure that people understand what they do with the form and what to write in it. Best of all, if the signatures will remain visible even during the input process - the person must have a context before their eyes when filling in the fields. Hiding signatures and instructions to the form, designers in the pursuit of simplicity sacrifice usability .
This does not mean that you need to clutter up the screen with useless information - just make sure that the most key clues are available. An excess of data can bring no less problems than their lack. Your goal is to provide information in such a volume that the user can perform the operation without a hitch.
Source: WebAIM Creating Accessible Forms
5. Write informative alternative descriptions for images and other non-textual elements.
Visually impaired people often use screen readers to “listen” to the Internet. They transform the text into sounding speech, giving the opportunity to listen to everything that is written on the site.
An alternative description can be presented in two ways:
- In the alt attribute of the picture element
- In the near context or in the accompanying text to the image
Try to describe what is happening in the image and how it relates to the general meaning, and not just get off with a picture comment. Context is crucial.
If the image is added solely for beauty or what it expresses is duplicated in the text, you can add an attribute and leave it blank - in this case, the screen reader will miss it. When alternative text is not registered at all, some screen readers will read the file name. There is nothing worse for the user experience.
Google is currently working on an artificial intelligence solution that generates image captions with an accuracy of up to 94%. The code is in the public domain and is still in the process of being finalized. I hope we will see soon how this solution will be applied in various products. Until then, the meaning and purpose of pictures in the context of other content should be manually recorded.
Source: W3C Using Alt Attributes
6. Use markup correctly.
The headings mark the beginning of the content block - this is a kind of tags that define the style and purpose of the text. In addition, headers define the hierarchy of content on the page.
The large font in the headers allows the user to better understand the structure of the information. Screen readers also rely on headings when reading content. Thus, people with poor eyesight get an idea of ​​the overall appearance of the page, listening to the headings in a hierarchical sequence.
When developing a site, it is necessary to use the correct structural elements. HTML elements convey to the browser information about what type of content they carry and what actions to take with it. It is the components and structure of the page that form the browser accessibility tree, which screen readers for the visually impaired work with.
Invalid markup is bad for accessibility. Do not limit the use of HTML tags with stylistic effects. Screen readers are oriented on a page based on the hierarchical structure of headings - real headlines, and not just text that is made bigger and fatter. With their help, users can listen to the full list of headings, skip blocks of content, based on the type of heading, or go to navigate the first level headings (h1).
Source: WebAIM Semantic Structure
7. Support keyboard control
The ability to perform operations using the keyboard is one of the main components of accessibility in web design. People with impaired coordination of movements and muscle tone, blind people, those who use screen readers, and even some advanced users rely on the keyboard when navigating the site.
Perhaps you, like me, use the Tab key to navigate to the desired interactive elements of the page: links, buttons, input fields. The active state indicator, which we talked about above, allows you to visually emphasize the element that is currently selected.
When navigating through a page, the sequence in which the user interacts with the elements is extremely important, so navigation should be logical and intuitive. The order of transition should correspond to the direction of movement of the gaze: from left to right, from top to bottom, first the main navigation, then the buttons that hide the content and the forms, and finally the footer.
Good practice is to test the site using only the keyboard. Move from link to link and from field to field with the Tab key. Check whether it is convenient to select an item by pressing Enter. Make sure that all components are arranged in the correct sequence and that their appearance is predictable. If you can go through all the pages without touching the mouse, it means that you are doing well!
One more thing. Be careful about the volume in the navigation system - this refers to the number of links, and the size of the text. Looking through all the items in the long list can tire people with limited motor abilities, and people who use a screen reader can quickly get tired of listening to long texts of links. Try to be more concise. Adding markers from ARIA or HTML 5 structural elements (for example, main or nav) will also make it easier to navigate the page.
Source: W3C Keyboard
What else can you do
These rules are a good starting point, but if you want to do something else to increase accessibility, I would recommend:
- Conduct an accessibility audit. Use a special service to find out if your product is in conflict with assistive devices and if it meets the requirements of AA level. Make the necessary changes based on the results and repeat the test.
- Appoint an auditor. You can assign one of the employees to conduct such audits regularly - for example, someone from the testing team. If there are no people with the necessary experience, you can contact a third-party specialist.
- Consider accessibility factors when collecting information. When conducting research, check whether your assumptions regarding accessibility are confirmed, and look for opportunities to refine something. Attracting people with disabilities to work is somewhat more difficult. Feel free to contact associations and communities - usually there are happy to help.
Conclusion
Well that's all. These were the seven rules that will help you bring the site to approximate AA compliance with the level of the Web Content Accessibility Guidelines .
I am still continuing to work on making design more accessible, and I myself try to observe the principles that I preach to others. Previously, it seemed to me that this is all too complicated and still does not matter much. But I was wrong. I suggest you start the process using these rules and continue the conversation about why accessibility is important.
Promoting accessibility practices is the responsibility of designers. With their help, we open the path to technology for all people, regardless of their capabilities, standard of living, age, education and place of residence. Take responsibility when designing. Thank!
Bibliography
WebAIM articles, resources, and practical exercises on accessibility in web design
“ 7 Things A Designer Should Know About Accessibility ” - a great article from Salesforce with accurate observations
UCLA Disabilities and Computing Program - the site, of course, is not the most beautiful and modern, but it is very rich in resources
UX Myths - an extensive list of misconceptions in UX design with denials; some of them also affect accessibility issues
Color Accessibility Workflows - here Geri Coady demonstrates how to get to the point with the selection of colors
W3C - Bible accessibility in web design, you can even get lost from the abundance of materials. But when you understand the structure, you will find excellent examples, tips and resources.
Useful tools
WebAIM Color Contrast Checker - a sensible tool for checking contrast, gives the result immediately after entering and for different text sizes
Inclusive Components - a library of textures, designed in the form of a blog. Particular attention is paid to the issues of affordable design. In each post, an analysis of some common interface component is carried out and a more reliable and affordable version of its design is offered.
Color Oracle is a free color blind simulator, adapted for Windows, Mac and Linux. It shows in real time how people with common color perception disorders see.
Vox Product Accessibility Guidelines - a complete list of requirements for designers, developers and project managers
AX Google Chrome Extension - check any website for accessibility violations with the Chrome inspector
Contrast is a Mac application that gives instant access to the WGAG brightness ratio.
Source: https://habr.com/ru/post/417589/
All Articles