WordPress: Most common errors in web accessibility

Introduction

The good people of mowomo have asked me to write a post about web accessibility for your blog, so here it goes. It is always good to remember the key points to make our accessible websites.

To emphasize something as important as carrying out accessibility for your website, I am going to make a list of the errors that are still being made repeatedly and that should be solved as quickly as possible.

Always keep accessibility and web usability in mind

Although accessibility y usability are concepts that can have similar meanings, they do not mean the same thing, that is, a website:

• It may be accessible, but not usable.
• It may not be accessible, but it is usable.
• Or it may be the case that it is not accessible or usable. It is already said that if a site is not accessible it is not usable.

What do means this?

For example, when a user has to fill out a form but doesn't know where to add their name because the fields are in another language.

That is to say, may be accessible if well labeled, but not usable, because the user does not understand what its function is.

Header structuring (no breaks)

A simple header tag it can be a serious accessibility problem for screen readers. If you do not have it, it goes unnoticed and it is as if it did not exist.

I use the classic editor, but whoever uses Gutenberg has the hierarchical header list and you can see if there is a nesting error. Know that the highest level header is h1, the next one is h2 and so on up to h6. That is, after an h2 comes an h3, not an h4. This is important for the content. It is established by the WCAG (Web Content Accessibility Guidelines) in the criterion 2.4.6. Headers and tags.

It is important not to forget that if we have complementary regions or sidebars on our website, they must also have your own header, which is what is called section header. It is collected in the criterion 2.4.10 Section Headers.

Correctly labeled forms

Let's imagine that we are in front of a registration form where some of the fields as required with an asterisk, without previously specifying what it means. A clear example of this are the forms that are made in Google: the surveys that are carried out are not accessible.

The opposite case may occur: that a form is not well labeled, and therefore, goes unnoticed by a person who uses a screen reader. That is why it is important correct labeling of the forms, with the label label, as collected by the technique H44. Use label elements to associate labels with form controls.

Or excessively long forms, in which the user has to enter a lot of data, which generates a bad user experience that causes you to get lost and abandon the task.

This form that I expose is not accessible or usable. That's why simple, well-labeled forms are required.

Take into account the use of color and contrasts

To be able to read and interact with the content on a website it is very important to use color contrasts. For people with low vision, high contrasts between the color of the letter and the background must be established for good legibility. And also for people who have colorblindness. Criterion 1.4.1 Use of color, Criterion 1.4.3 Minimum Contrast, 1.4.6 Contrast (enhanced), Criterion 1.4.11 Contrast without text and 1.3.3 Sensory characteristics, where information cannot be conveyed with color alone.

Typography

Another important issue that must be taken into account is typography, without a good typography you cannot enjoy the content. It is recommended a minimum size of 14 points, and for people with cognitive problems a maximum size of 22 points for the title and a minimum of 18 for the content. Examples of legible fonts are Sans Serif, such as Arial or Verdana, are round typefaces and are easy on the eyes. Also take into account the text spacing as stated in the criterion 1.4.12. Text spacing.

Speaking of content, it is important to remember that the abbreviations they have to be written in full to make it easier for people with cognitive problems to understand them. It must be done the first time the abbreviation is entered. For example WCAG (Web Content Accessibility Guidelines), which translated into Spanish would be: Web Content Accessibility Guidelines. Criterion 3.1.4 Abbreviations.

And it is not only good for reading, but also because people with cognitive difficulties must be taken into account, who require a larger font size for better reading comprehension. It is necessary to ensure that when zooming there is no element that is annoying for reading. It establishes the criterion 1.4.4 Change the size of the text.

While you are enjoying reading, the navigation menu cannot go down as we read. That is very very annoying. If you want to try that users have a good experience, just put LINKS to go up to the top of the page or to go to the bottom of the page. It is recommended to read the techniques G123 y G124.

work the links

For a person who uses a screen reader to have it easier when navigating the website, it is important to know how to work the links.

If we use a link from a certain website, the text of the link would be that of the website itself. He screen reader read at the beginning https colon slash slash double vee double vee double dot… That is why it is important to put the text of the website link itself. Criterion 2.4.4 Purpose of links (in context).

If a link is inserted within a paragraph, it has to make sense within the context so that its purpose is understood. Avoid ambiguous links, such as "Click here" or "More information". Or for example, a list of documents in different formats. Criterion 2.4.9 Purposes of links (links only).

With the screen reader, the user navigates through the headers, as I mentioned earlier, and through the links. That is why it is important that the links make sense and facilitate compression and navigability. It is also recommended to put jump links to content. Criterion 2.4.1 Avoid blocks. Technique G1 Add a link that leads directly to the main content area.

Language

Speaking of links, if we have a multilingual site, it is important that both at the origin and at the destination, the site is in the corresponding language as well as the site links, as established by the Criterion 3.1.2 Language of the parties

You also have to set the language of the website so that the screen reader reads in the corresponding language. Criterion 3.1.1 Language of the page.

Image accessibility

An important element of the website to consider for accessibility are the images. Browsers as such are blind. This means that if you don't put a text alternative to imagesThey go unnoticed. Well, the same is true for people who use a screen reader. Since they cannot view the content of the images must be added a textual alternative or a longer description, not to exceed 150 characters, depending on the purpose of the image in question. This is for the images that provide information, or that transmit something.

But there are images that are placed as simple decoration, that is to say, they are images that do not contribute anything and that are there to decorate: they are called decorative images and present a null alt text.

If these images are accompanied by a title in the header, the reader reads it only once. It's a very common mistake to put alternative text to decorative images and then read the header title. The reader reads it twice.

En WordPress There are different fields that allow the description of the images. But you just have to use the alternative text which is important. If the image is titled and alt text is added to the image as well, it is duplicate alt text.

For all this it is necessary to take into account the criterion 1.4.5 Text images and 1.4.9 Text images (without exception) of the WCAGs.

keyboard focus

For people who have motor difficulties and cannot use a mouse, it is essential to have the visible focus. And not only that, but even if it appears below where you are browsing in small print, there can always be confusion and that generates a bad user experience. For people who also have severe vision problems, the visible focus It makes it easier for them to navigate because that way you know where you are. Criterion 2.4.7. Visible focus.

And I cannot finish this point without remembering that it is important to establish breadcrumbs so that the user can orient himself within the site. Criterion 2.4.8 Breadcrumbs.

You can also add a site map, as established by the G63 technique. Provide a sitemap. And the G64 technique. Provide a table of contents, which is very useful to orient yourself in a blog, if the website has it.

Multimedia content

If the website presents audiovisual content such as videos or audios, it is important that there are text alternatives that match the content.

For example, if we have a YouTube channel where we are doing a course, the videos have to be subtitled. Criterion 1.2.2 Subtitles (prerecorded) and 1.2.4 Subtitles (live).

For all those people who find it difficult to follow the reading of a subtitle due to vision problems, it is important to have a description of the content that corresponds to the audio of the video. Criterion 1.2.1 Audio only and video only (prerecorded) and Criterion 1.2.3. Audio description or media alternative (pre-recorded). The same for the audios themselves. This helps people with hearing problems. It is collected in the Criterion 1.1.1 Non-text content.

Non-text content includes CAPTCHA. They are very inaccessible. The font is distorted and the characters are difficult to read, making it difficult for people with low vision to access them. They have an audio alternative that is not accessible to the hard of hearing.

Apart from the importance of the corresponding textual alternatives, it must be added that if we treat multimedia content, users have to have control of the audio, such as raising and lowering the volume or speaking speed, which must be accessible by keyboard. Its about criterion 1.4.2 Audio control.

I hope you liked it and learned a bit about web accessibility. when it launches mowomo school, I will offer courses and workshops on this topic. Join and we will notify you when it is operational.