A brief guide to A11y

Accessibility is defined as the process of designing products, devices and environments that people with disabilities of various kinds can use. In 1990 the United States Congress sanctioned the ADA (American Disabilities Act) and since then we can find both in public and private spaces tools for people deprived of their vision (braille) or in physical aspects (ramps for wheelchairs). The regulatory body for internet accessibility is the WCAG(https://www.w3.org/TR/WCAG21/), which is responsible for that websites have features such as subtitles on videos, images with alternate text, labels readable by screen readers, etc.

Visual Accessibility Elements:

• Contrast: The process of differentiating two elements to give them importance and readability for users with reduced vision or color blindness, can be done through colors, fonts and spacing.
• Headings: The web is fast and therefore the content must be divided into several sections these headings have a relationship of h1 (unique on the page), h2 (section title) h3 (section subtitle) and so on.
• Design for the colorblind: Use opposite colors on the color wheel where possible or else use multiple shades of the same color (it also helps colorblind people who only see in grayscale), color is a powerful contrast agent, but should never be the only one. Use text, icons, images (for example if a form is wrong, use red borders + a box that explicitly says so)

What is Aria?

ARIA is short for Accessible Rich Internet Applications, it is a set of attributes to handle assistive technologies for people with disabilities that HTML alone cannot handle. The technical specification was called WAI-ARIA and was published by the W3C initially in 2008 and became a recommendation in 2014.

Primary components of ARIA:

• Roles: They are used to define the specific type of an interface element (role=”role_name”).
• Abstract Roles: These are brief descriptions used by search engines to give meaning to roles and should not be changed.
• Document Structure Roles: They provide descriptions for various parts of the page (toolbar, img, heading). While HTML 5 already handles this quite well, since screen reader support for it is still limited, it is recommended to use both types.
• Landmark Roles: They are used to indicate the beginning and the end of a certain section of the document by screen readers (banner, form, search)
• Widget Roles: They give a semantic meaning when HTML does not, they are divided into groups of Widgets or UI Widgets (grid, menu, tablist) and standalone Widgets or child Widgets (checkbox, link).

ARIA Rules:

1. Use native HTML unless it is absolutely or nearly impossible to do so.
2. Don't change semantic elements in HTML unless absolutely necessary.
3. All ARIA controls must be keyboard accessible, they can be added to tab navigation using (tabindex=”0”).
4. For all focusable elements, never use (aria-hidden=”true” or role=”presentation”) as this can cause user confusion when focusing on an empty element.
5. Give all interactive elements an accessible label, either with (Search) or (<input type=” text” aria-label=”” / aria-labelledBy="") not to show it to users who don't use screen readers.

Alt attribute rules:

• If the image is already described below, add an empty attribute.
• If the image is a link, also add the page it leads to.
• Alt should not be longer than 150 characters
• The alt should clearly and concisely describe the image.
• Images used as decoration (such as a decorative border) should have an alt attribute, even if it is empty.

The Alt attribute differs from aria-label because the former will also be displayed if the element's source is not found or on slow connections, while the latter is for screen readers only, however, it is preferable to use alt on elements where they can be used.