The 5 most difficult elements to make accessible on a website

Today we want to focus on the five elements that usually give developers a lot of trouble when making a web page accessible .

We are well aware that web accessibility involves the elimination of as many barriers as possible that may exist on a web page. In other articles, we have talked about how to make a website accessible and the guidelines, regulations and standards that are required to accomplish this.

But what happens with functionalities that are often complex and which usually cause problems when trying to make them accessible?

At inSuit we have taken all of this into account! To this end, we have compiled a series of highly complex functionalities requiring accessibility to determine what to do in these cases.

The 5 most complex functionalities when implementing website accessibility

We will discuss the following features: CAPTCHA, forms, sliders (or carousels), tables, and PDF documents. These are elements that are often found on websites and rarely accessible, or at best, poorly adapted.

Below you will find a list of elements and guidelines that will help you apply actions that will translate into better web accessibility.

CAPTCHAS

The first thing to keep in mind is that a CAPTCHA is a test, at the computer level, to determine whether the user is a human or not. The aim being to grant access to a given interaction within the web page or application.

This includes interactions such as: registration, platform login, online purchases, comments, etc.

The main barrier in these items is that the very nature of the interactive task excludes many people with disabilities.

Resulting in a denial of service for these users, which in turn makes it impossible for them to interact with the functionality.

Many popular CAPTCHAs are no longer effective or secure, therefore we recommend that you follow the W3C guide, which provides various solutions that rely on machines rather than users.

Forms

If we require our users to contact us or if we need their data for future actions, it is important that the information collection process is fully accessible.

To do this, it is recommended that this element be easily accessible using the keyboard. So, what can we do to make them accessible? This is just a brief list of suggestions:

1. Make sure that the <label> tags are positioned correctly.
2. Form controls must be tagged correctly indicating their function. For example, for buttons used to send forms we could use the ‘label’ tag: <label for=“Send”> or assign an accessible name using the aria-label tag: <button aria-label=“Send”>.
3. Be consistent when semantically informing the structure of the form fields. It is important to define form structure and fields in a clear, simple, and specific manner so that they can be fully usable and accessible.
4. Be predictable. It is important to bear in mind that the controls always inform the system when they are used to perform a given action, but the alert action is not launched when pressing (clicking) on them, only when they are released after clicking has occurred (known as the up-event).
5. The mandatory fields of the form must be correctly identified.
6. Use error controls in the form that identify wrong fields, and where possible, suggest the correct form of input.

You can supplement this with more technical information by clicking on this link.

Sliders or carousels

These elements turn out to be quite cumbersome, since users are required to stop them in order to use the controls needed to make them work.

Always bear in mind that any internal elements must also be accessible. This forces us to focus on certain aspects of the design, which in other components are easier to handle, but are more problematic in this case because they are continuously moving.

How can we make a carousel accessible? Here is a basic list of things to bear in mind if you want to guarantee web accessibility in sliders or carousels:

1. The carousel must be contextualized.
2. The user must be given the option to skip it.
3. The duration of each scene must be at least three seconds. This will help ensure access to information.
4. Users must be able to control stopping and resuming actions in order to assimilate the information from each scene.
5. Optimally, the user should always be given the option of returning to the previous scene or moving to the next scene.
6. The carousel should indicate the number of scene or slide in focus.

With these and other technical guidelines you can ensure accessible carousels on your website. For more technical information click here.

Tables

It is very important to understand that tables should be used to deal with information that is actually in tabular form (that is, a data table).

At this point, it is necessary to correctly mark the cells and headers with the appropriate information so that users can access this information using different technical aids.

Here is a check list to help you ensure accessibility for any table you want to include on a web page:

1. The row and column headings must be indicated.
2. Appropriate markup should be applied to associate data cells and header cells. This is for those tables that have two or more logical levels of row or column headers.
3. Tables should not be used for web page layouts.
4. Summaries must be provided for the tables, which can be indicated with <caption> tags.
5. Abbreviations must be provided for header tags.

If you would like further technical information on this topic, please read Web Accessibility Tutorials: Guidance on how to create websites that meet WCAG standards.

PDF Documents (Portable Document Format)

Due to its characteristics, the Portable Document Format (PDF) is now the preferred digital format for sharing information and documents.

We can appreciate its evolution by the different versions of this format, which over time have included tags that are essential to accessibility.

Now, what should we do to make our PDFs accessible?

• The document language must always be indicated; if the language of the pdf content differs, this too must be indicated.
• It is also important to include alternative text for any images used for visual support.
• The document must be properly tagged; you need to properly identify titles, lists, tables, or any other elements.
• It is important to let readers know the internal reading order. It should be constantly checked as this order isn’t always easy to determine visually.
• The internal pagination must correspond to the index.
• Links, abbreviations, and acronyms must contain an alternative text in their links.
• The tab order must be consistent with all those elements it interacts with. 
• Ensure that the implemented security does not interfere with access to information by different technical aids, such as screen readers.

When you generate a PDF document, the conversion is actually based on another type of document, such as a Microsoft Word or OpenOffice document. Accessibility is built into these documents through the proper use of content formatting tools. For example, if the titles are correctly placed in the Word document, when it is converted to PDF, the headings will automatically be correct, including the document markup and index.

And you should never, ever, print a document as a PDF. This will destroy the internal structure generated by the text processing tool. Once the document is created, it  should always be exported or saved as a PDF file.

With this list you can begin creating accessible PDFs. For more technical information, consult PDF Techniques for WCAG 2.0 – W3C.

Follow our tips to make CAPTCHAS, sliders, tables, forms, and PDFs accessible

In general, these tips will be of great help when dealing with the five elements discussed in this article, as we usually tend to notice how complex they really are when trying to make them accessible on the web.

Do you want to forget about these complications and make your website fully accessible in line with accessibility standards? We’ll make it easy for you, as our inSuit accessibility tool is designed to make the web a barrier-free place. Do not hesitate to contact us if you want to make your website or App accessible in the simplest way possible. We have the solution to your problems!