Pautas de accesibilidad al contenido web y mejora progresiva. Una guía rápida.

Web content accessibility guidelines and progressive enhancement. A quick guide.

Feb 28, 2022 | english, Sin categoría

The constant modernization and updating of technologies around the world, has forced companies to enter into a new competition to generate means of communication that are increasingly adapted to the needs of their consumers.

In this sense, the creation of new accessibility guides for web content has helped developers and designers to adapt these media so that they are increasingly accessible to people whom they could not reach before. With this need in mind, the WCAG (Web Content Accessibility Guidelines) were created, with the purpose of converting websites into sites adapted for people with physical disabilities to access their content.

Each recent version of the WCAG (Web Content Accessibility Guidelines) complies with the previous versions. So version 2.1 includes 2.0 thus each improves upon the next. Since WCAG was established in 1994 and published the following year, it has been modernized as available technologies advance. It is important to become familiar with these standards in order to develop web pages that anyone can use.

Version 2.1 is fairly recent as it was published in 2018, with the objective of improving the accessibility guidelines for:

People with cognitive or learning disabilities
People with vision difficulties
People with disabilities using mobile devices

Nonetheless, accessibility must be considered for all people regardless of their disability:

There are 3 levels of priorities that developers and designers must adhere to, so the content is accessible for as many people as possible. These are based on 4 principles that websites should accomplish. The principles are:

Perceivable: The webpage ought to present the contents in a way most people can perceive. This includes letters, contrasts, braille detection, speech recognition, and symbols.

Operable: The webpage ought to present the contents in a way most people can operate. This includes the use of the keyboard, adequate size buttons, navigation and not flashing for people prone to seizures.

Understandable: The webpage ought to present the contents in a way most people can understand. This means that the webpage is predictable, easy to use, and not error-prone.

Robust: The content ought to be robust enough that it can be interpreted without problems in browsers, devices that use assistive technologies.

Accessibility Priorities:

Priority 1. Some user groups will not be able to access the content of a site.
Priority 2. Certain groups of Internet users would find it very difficult to access the information on a site.
Priority 3. Some users would have certain difficulties when accessing the content of a portal.

Priority 1:

Five criteria must be implemented here:

Character key shortcuts: The user should be able to remap or adjust key shortcuts according to preference

Label in Name: User must clearly understand the difference in labels and text when screen reading

Pointer Gestures: For mobile usage, users should be able to configure for single taps to avoid swiping, pinching, and skipping other multi-point gestures.

Pointer cancellation: In mobile Onclick or Onclick down(when holding down an action) events should be adjusted so people with motor disabilities do not accidentally click on the content.

Motion Actuation: In mobile devices, functionalities like rotation, shaking or tilting have to be adjusted for people with disabilities in another way that makes sense.

Priority 2:

Seven criteria must be implemented here:

Identify input response: This requires different ways to access inputs, such as speech to text, etc.

Reflow: Text must adjust to using the standard format on devices and scroll predictably.

Non-Text Contrast: Colors must have an adequate ratio of contrast to avoid confusion.

Text-Spacing: The user must be allowed to adjust text spacing to account for reading speed and visibility

Content on Hover or Focus: Content must allow hover out, focus out, have a set time for easier reading, and should have zoom if the user requires

Orientation Level: Web content should be able to be consumed regardless of orientation and all functionality should be the same.

Status Messages: All status messages should be communicated to the user without overwhelming them or distracting them from their work and should allow for customization and adjustment.

Priority 3:

Five criteria must be implemented here:

Identify purpose: Communicate the purpose of buttons, icons, text boxes, etc

Timeouts: communicates to users if there are timeouts during load etc.

Animation from Interactions: Movement and animations should be allowed to be turned off for people that could have migraines, seizures, etc.

Target Size: A target must be at least 44×44 CSS pixels unless the target is not interactive.

Concurrent input mechanisms: Users should be able to use different devices from keyboards to speech to text to input and interact with webpage content.

Levels of Conformity :

There are 3 levels of conformity that build upon each other according to the principles and priorities established.

Conformity Level “A”: reached when all the points of priority 1 are applied with 5 criteria.
Level of Conformity “AA”: it is reached when all the points of priority 1 and 2 are applied with 7 criteria
Compliance Level “AAA”: it is reached when all the points of priority 1, 2 and 3 are applied with 5 criteria

Conformity Level “A”: reached when all the points of priority 1 are applied with 5 criteria.

Level of Conformity “AA”: it is reached when all the points of priority 1 and 2 are applied with 7 criteria

Compliance Level “AAA”: it is reached when all the points of priority 1, 2, and 3 are applied with 5 criteria

Quick Definitions:
WAI: WAI is the web accessibility initiative of the W3, this program covers standards, guidelines, rules, and techniques for accessibility.
WCAG: WCAG is the content accessibility guidelines to use when developing a website or application that is required to be accessible.
ARIA
ARIA is the Accessible Rich Internet Applications Standard which is a set of techniques and additions to HTML that allow for additional markup to a web page so that it can be interpreted by accessibility devices such as screen readers used by the blind or people with visual disabilities.

Progressive enhancement:

Progressive enhancement is a development approach for web design that emphasizes content over functionality. This approach focuses on development over time in which it adds more customized, nuanced, and technically rigorous layers of presentation, functionality, and features on top of the content depending on the user and his capabilities in browser, device, and connection.

The core principles of progressive enhancement are:

Basic content should be accessible from all web browsers, devices, or modes of connection.
Basic functionality should be accessible to all web browsers, devices, and modes of access.
Sparse, semantic markup contains all content, making it easier to find, share, and transform information.
The enhanced layout is provided by externally linked CSS, the stylesheets enhance the content but are not necessary for use.
Enhanced behavior is provided by unobtrusive, externally linked JavaScript, only when necessary and if the device, browser, or connection supports it.
End-user web browser preferences and customizations are allowed.

All this has advantages from an accessibility and search engine optimization point of view, as users can interact with the content in many different ways and search engines can index, organize and publish the content for easier consumption.

Where can you get these updates?

Many companies worldwide require their business technologies to be adapted to these special needs. To learn how to achieve this type of development visit: https://www.appspringtech.com/services/

ScreenReaders:

There are different screen readers according to the operating system the user has access to: