Web Accessibility – A Brief Summary

The Web Of Tomorrow, 

Accessibility

The Web Content Accessibility Guidelines consist of twelve guidelines that are organized into four basic principles. While the WCAG principles define the basis for accessible web use, the guidelines provide web developers, authors and designers with clear instructions that should be considered when creating accessible content.

According to the WCAG principles, web accessibility is characterized by optimal perceptibility, usability, understandability, and robustness of web content. These principles can be implemented as follows:

Train Station with multiple colors

Train Station by Joshua Coleman

Perceptibility

For optimal web usability, you should present content in a way that is perceptible to all web users. The WCAG guidelines for improving the perceptibility of web content are:

  1. Text alternatives

    A text-based alternative representation allows non-text content to be translated into other forms of representation such as large print, Braille, symbols, or simpler language.

    The text alternatives policy only requires that alternative text-based descriptions or captions should be available for all non-text content such as videos, images, or graphics on a website.
  2. Multimedia content

    The website provides alternative forms of presentation for time-based media (e.g. audio and video content).

    The guideline on alternative forms of presentation for time-based media includes regulations on media alternatives for audio tracks and videos as well as for synchronized media content where the simultaneous perception of image and sound with other forms of presentation is essential for capturing web page content.

    Media alternatives include descriptive accompanying text, audio description, closed captioning, transcription, and sign language, depending on the level of compliance sought.
  3. Customizability

    The contents of the website can be transferred to alternative display formats without loss (simple layout).

    The adaptability guideline includes rules on alternative presentations for information resulting from the structure of web page content, from the reading sequence, or due to sensory properties such as shape, size, position, and orientation.

    The goal is to make this information accessible to people with impairments through media alternatives such as descriptions in text form or software-based preparation for assistance systems.
  4. Distinctiveness

    Content is created in such a way that it is visually and acoustically distinct from other content (color, font size, contrast, subtle background.

    The distinctiveness guideline includes regulations on the visual presentation of web page content. Specifications relate to color design, the contrast ratio of text and image elements to the background, text size and scalability, and the layout of text blocks.

    Furthermore, additional requirements are defined for web pages that work with audio content in the background.
People doing Usability Testing with a Smartphone

Usability Testing by Adam Wilson

Usability

In the case of accessible web content, the user interface should be designed in such a way that it is possible for all Internet users to access the desired information. The usability of web offerings can be optimized using the following guidelines.

  1. Accessibility via keyboard

    For the best possible web usability, all content and functionalities are accessible via keyboard.

    The keyboard accessibility guideline defines the keyboard as the primary user interface. Wide operating options such as control via mouse, trackball or touchpad are merely optional. Keyboard traps are to be avoided. A keyboard trap is a web page area that can be accessed via the keyboard, but cannot be exited with keystrokes alone (e.g., ESC).

    If keyboard traps (for example in the form of an embedded Flash video) can only be overcome by special, unfamiliar key combinations, users must be made aware of this possibility.
  2. No time pressure

    Users are given enough time to read and use web content when interacting with it.

    People with impairments often need more time to engage with web page content or perform actions such as input. The time-based content policy ensures that these users can also interact with the website without the website content changing unexpectedly.

    Defaults under this policy include mechanisms that allow individual timing by allowing automatic updates or time limits to be turned off, adjusted, or paused.
  3. Minimize health risks

    All web content is designed to minimize any risk of visual stimulus causing attacks.

    The health risk guideline defines thresholds for visual stimuli that can lead to attacks.
  4. Navigation

    The website provides users with means to navigate effortlessly.

    The navigation guideline includes success criteria to enable people with impairments to identify their own position within the website, find content or skip content blocks that are repeated on different web pages of a domain.

    The guidelines for accessible navigation refer to meta titles and descriptions, link texts, access points to web pages, headings and labels for text sections, and keyboard focus.
Confusing German Street Signs in a row

German Street Signs by Sangga Selia

Understandability

Web content should be designed in such a way that the information it contains is understandable and its operation is comprehensible. Web developers and authors achieve optimal comprehensibility according to the following guidelines.

  1. Readability

    Optimal accessibility of web offers requires readable and understandable content.

    The readability guideline includes regulations that specify the way in which linguistic elements must be distinguished and enriched with additional information to ensure optimal accessibility of the content. The success criteria define specifications for the language version, unusual words, abbreviations and ambiguities, and the reading level.
  2. Predictability

    The behavior of functional and interactive web page elements always remains predictable.

    To ensure good comprehensibility, web pages should be predictable. In this regard, the predictability guideline defines specifications for focusing web page elements, automatic updating of content, and navigators.
  3. Accessibility tools

    Well-accessible websites help visitors avoid mistakes by automatically correcting them with entry helpers.

    The guideline on input aids includes specifications for automatic error detection, help texts and input field labeling, as well as input mechanisms for legally relevant data or financial transactions.
Construction Worker works with steel an concrete

Construction Worker by Ivan Henao

Robustness

The WCAG principle of robustness refers to the compatibility of web content. To ensure good accessibility, it should be prepared in such a way that it can be reliably processed by the majority of user agents used (web browsers, assistive output devices, etc.). Website operators can find corresponding specifications in the compatibility guideline.

  1. Compatibility

    Compatibility with current and future technologies is ensured by consistent application of specified web standards.

    An accessible website can be parsed optimally. The basic prerequisite for this is that the implementation of content using markup languages such as HTML is complete and error-free according to the respective specification. This includes a gap-free markup of all user interface components (such as links, forms, or script-generated components) so that their type and function can be read by the software.

Want to dive deeper into all things accessibility with an practial accessibility course? Sara Souedian has this awesome course for you. In her words:

"Practical Accessibility: A get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today."

loading


Thanks for reading this article and have fun creating awesome accessible use interfaces. 🎉

Sources