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.
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.
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:
Make sure that the <label> tags are positioned correctly.
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”>.
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.
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).
The mandatory fields of the form must be correctly identified.
Use error controls in the form that identify wrong fields, and where possible, suggest the correct form of input.
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:
The carousel must be contextualized.
The user must be given the option to skip it.
The duration of each scene must be at least three seconds. This will help ensure access to information.
Users must be able to control stopping and resuming actions in order to assimilate the information from each scene.
Optimally, the user should always be given the option of returning to the previous scene or moving to the next scene.
The carousel should indicate the number of scene or slide in focus.
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.
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!
Barriers to the Web: intelligent solutions to a dynamic problem
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.