WCAG 2.1 accessibility: what you need to know to make your website or app accessible

Wcag 2.1 is an evolution of Wcag 2.0, the accessibility standards in force (web or app) between 2008 and 2018. Its novelties are worth taking into account in order to make a web page or a mobile application much more accessible to a large number of people. They are explained below.

Accessibility for web pages

Wcag 2.1 accessibility are accessibility guidelines that are based on a series of principles that make it easier to consult a web page.

The design must be adaptable

The user does not have to configure their device to view a page correctly. To avoid this, the following factors must be taken into account:

• The correct orientation of the page.
• The identification of the purpose of entry. The auto-completion of addresses or forms is very useful.
• The identification of the purpose. The optimization of the interface so that anyone finds what they are looking for effortlessly.
• The different areas of the page must be distinguished
• It is not advisable to confuse the substance with the essential part. For this, it is necessary to face changes such as:
• A readjustment in the style of the page so that the scrolls maintain the appropriate width.
• A non-textual contrast. The interface and graphic objects must be differentiated to facilitate the use of the web.
• Text spacing that respects the font size.
• The floating pointer content should be divided into three groups. Disposable, which allows you to select the essentials. Overlayable, which allows you to click additional content when you place the pointer over an area. Persistent, additional content remains visible as long as the pointer is over the area.

Accessible by keyboard

The keyboard is the most important tool so that any section can be accessed more easily. It is necessary to evaluate the keyboard shortcuts offering options to deactivate them, modify them or be usable when the component is of interest to the user.

Sufficient data storage time

Time limits. The data must be kept for a minimum of 20 hours unless the person takes some type of action.

Do not use elements that cause physical reactions

Animated interactions must include an element before they can be turned off. It is essential not to use contrasts of light or color that cause seizures or alterations in the user.

Ticket types

The person who accesses the website may do so in different ways. The advisable ones are the following:

• Pointer gestures. They must be fluid and allow the option to expand or reduce a specific part of the web.
• Canceling the pointer. They should include one of the following options: no down event, abort or undo, investment in up and essential.
• Label in the name. The name must contain the text that is being presented visually.
• Performance of the movement. The movement must be cancelled except in two situations. In the supported interface and in the essentials (without moving the pointer it is impossible to access any section).
• Lens size. It must be 44 x 44 px. The exceptions are: that there is an equilvalent objective, that it is a line of text, that it is controlled by the user agent or that it is essential to transmit information.
• Concurrent entry mechanisms. Use should not be restricted except for security reasons.

Compatible

Markup language status messages should be used to clarify what assistive technologies the user will have.

Accessibility for applications

The apps are not only designed for mobile phones, but also for tablets, TVs, home appliances and home automation products. You have to assess the type of screen and improve its visibility. Thus, an application should meet the following requirements.

That is perceptible

It is achieved thanks to several essential principles that facilitate access to the corresponding information or service:

• A single service must be included in each screen. The tabs must be placed in the lower area.
• The zoom must allow 200% magnification of the image.
• The font size can be chosen by whoever uses the application thanks to elements included in it.
• The contrast must be adequate to be able to see the screen in broad daylight. The minimum level is 4.5:1 and the maximum is 7:1.

Its functionality

Although scrolling and keystrokes have almost replaced the keyboard, it must continue to have its importance. Disabled people use an adapted keyboard that allows them to type what they consider necessary. The on-screen keyboard should not disappear.

Spacing and Tap Area

Make sure that the area to be pressed is nine millimeters wide and long (depending on the size of the screen). It must be surrounded by an inactive area. If gestures are enabled, they should be simplified as much as possible.

Gestures to manipulate the system must connect to the interface and take into account other add-ons such as the keyboard. The placement of the buttons has to make the press a simple process.

Make it understandable

An accessible application does not need specific instructions. The regulations indicate that:

• It has to support the vertical and horizontal orientation of the screen.
• It should have a logical layout where important elements are present on all screens.
• All elements that do the same function must be grouped together.
• A distinction must be made between buttons that perform some action and those that are inactive.
• You must specify how to use the application by tapping on the screen or performing gestures.

Robustness

It is based on the various possibilities of using the application. One of them is related to the possibility of using an alternative keyboard of greater accessibility. In addition, it would be necessary to:

• Add enough menus and sections to reduce the amount of text to be written to find a specific section.
• Create applications that exploit to the maximum the possibilities of the operating system for which they are designed. Using larger fonts, scrolling or other alternatives can not miss.

Pasiona designs pages and apps that comply with Wcag 2.1. and follow accessibility guidelines. Do you want to have an accessible website?That we evaluate the accessibility of your website?Know if your service has any accessibility problem? Contact is synonymous with success and total adaptability.