Recently, due to the pandemic and quarantine, the number of online services and web users has increased significantly.
Many things and activities have moved online. Therefore, the availability of sites has never been more important. Developers have begun to realise that it is not just about “screen readers” that there are many more ways to improve the accessibility of web pages for people with all kinds of problems. There is no one size fits all solution, and we need to make everyone feel comfortable. The importance of this issue is dictated by human rights and doing good things. In short, the commitment to web accessibility is a bit of empathy and concern for every user, without exception.
What is a Web Accessibility?
Web Accessibility – most often used to refer to the accessibility of a site for users with disabilities. For example, for some people with sight problems, such as colour blindness, the site in its traditional form may be inconvenient for use.
It doesn’t have to be fashionable and transient – on the contrary, all modern web development should be built around it. Despite this, persuading a client to spend on inclusivity is still difficult. However, it can be done.
For example, every front-end designer or developer with experience in the field will tell you that you don’t need to do more work – you need to do it right. Accessibility is not the icing on the cake; it should be considered throughout the entire development process, from design and engineering to testing.
How to achieve Accessibility?
Provide a text version of any non-text content for possible transformation into alternative forms suitable for different users
The simplest and most universal way of perceiving information for any person is text. It is not always optimal for conditionally healthy people (as we know, absolutely healthy people do not exist): it is better to listen to sounds, watch videos. But the good thing about the text format is that its perceptibility can be easily improved: for the visually impaired using a magnifier or enlarging the font by means of the operating system, for the blind – using computer sound programs or displaying it on a Braille display. Therefore, all content that lends itself to presentation in text form must be presented in this way (or offer a textual presentation as an alternative way to convey information). Exceptions to this rule are special forms of content:
-Control elements and information input (input fields, drop-down lists, radio buttons). Such elements cannot be represented in the form of text. For them, you need to use the label tag and the alt, title attributes. This will help programmatically associate the input field with the explanatory inscription and, as a result, convey the meaning of the element to the user.
-Tests or exercises that cannot be presented in the text format. In this case, you need at least a short text explaining this exercise. The same applies to content that creates a specific sensory experience (pictures, music without words).
-Captcha. First, you need a clear explanation of why you need this input field and how to enter what needs to be entered there (you must have come across an “ascetic” captcha, consisting only of a picture and an input field, without textual explanations?). Secondly, the captcha must have an alternative output of information (audio captcha).
-Non-textual elements intended for decoration, formatting, or not visible at all. Such elements must be described in such a way that assistive technologies (for example, text scoring) ignore them. That is, for example, render the design in CSS or omit the alt and title attributes.
Provide an alternate version of time-limited media content
Have you ever had a situation where you need to quickly understand what a long video contains in order to decide if it is worth watching? Or find the fragment you need, which is “somewhere in the middle”? Or is the person speaking on the audio recording too fast or unintelligible? You will agree, it is always useful to have a textual analogue of the content of an audio or video clip. Or at least a description.
It should be understood that the audio decoding does not fully describe the content of the video. The textual analogue should also include a description of what is important on the screen in order to convey the full meaning of the video to the reader. In addition to the text version of video clips, audio versions are also created, according to the same principles.
And the usefulness of subtitles in the video has not been cancelled.
Create content that can be presented in different ways without losing data or structure (for example, with a simpler page layout)
Assistive technologies designed for computer scoring of text perceive an HTML page as a sequence of text, and not as a collection of blocks geometrically arranged on the page. Therefore, it is very important in the source code of the page to follow the same sequence of blocks that is implied in the display. It also imposes restrictions on the sensory characteristics of the content (colour, location, etc.). An example of instructions that can create problems for users with disabilities: “fill out the form in the second column of the table” or “press the green button if you agree with the terms of the offer.”
It is also helpful to provide the user with a page with a lightweight design (such as a printable version).
And, of course, it’s important to use a semantically correct layout. Not only for assistive technologies but also for other cases of automatic content extraction, for example, search engines.
Make all textual content readable and understandable
First, the language (or primary language) of the page must be defined in the HTML code of the page. Secondly, if there are rare words, abbreviations or specific meanings of words in the text, it makes sense to explain them right away.
If the content is too specialised (for example, it uses formulas, scientific, medical or financial lexicon), but is focused not only on a professional audience, it would be nice to provide alternative content, easier and simpler for understanding.
Do not use design elements that are known to be hazardous to health
Here, we are talking about flashes or too frequent blinking of the page or its elements. The same goes for sharp and unexpected sounds. The undesirability of such techniques for conventionally healthy people are quite obvious. If for some reason, you can’t do without such outbreaks, you should at least make them not very frequent.
Provide help and support for users to navigate, find content, and determine their current position on the site
And again, an experienced web developer will not find anything in this position that would contradict the logic when designing a site without taking into account the audience of people with disabilities:
-each page should have a title that describes the content
-link text should clearly describe the page the visitor will land on when clicked (“product details are here” is a bad example; “see product details” is a good example)
-the visitor should have several ways to find the page he needs (standard navigation, sitemap, search bar)
-when moving around the form using the keyboard (Tab key), the active form field should be clearly selected
-on any page, it should be clear to the visitor what kind of page and site it is.
If you doubt the content of your site and it’s accessibility, you can always reach for free SEO audit.
Help users avoid mistakes when entering information and correct them
You’ve probably seen error messages in the spirit of “Error № 355” or “Stack overflow” or “Form is incorrectly filled”. You will see a window with such an inscription and look at it as a new gate, each time thinking: well, was it really difficult to write so that it was clear what to do with it ?!
If we take the place of a person whose perception of our form is difficult for one reason or another (non-native language, poor eyesight, age, lack of experience on the Internet), it will be much easier for us to compose forms so that they are understandable to everyone. By compiling the form, and not only its layout but also the reaction to the incorrect filling: the place of output and the content of error messages, tips and templates.
The principles of confirmation and reversibility are also very important, especially in cases when it comes to legal or financial transactions (agreement with the offer, sending payment, etc.): the user must, first of all, provide the opportunity to verify and be able to verify, secondly, have the possibility of revoking the sent information (cancellation of action).
Conclusion
Unfortunately, there are many people with disabilities in the world. These people want to live a fulfilling life, and using the Internet to search for information is part of the fulfilling life of ordinary people. And therefore, the accessibility of the site allows people with disabilities to spend time comfortably on the site, get the information they are looking for, and get the services and goods they need via the Internet.
