Main content

Alert message

Design for Accessibility

WHAT IS WCAG?

WAI is Web Accessibility Initiative - an initiative established by the W3C, defining the standards for creating web pages, which have to be available for many users - in the project participate companies such as IBM, Microsoft, Google, Apple (the author of WCAG).
Web Content Accessibility Guidelines is a collection of documents relating to the availability of Internet services, Since 2012 has the status of international standard ISO.

LEGAL BASES

The EU law obliges entities performing public duties (ie ministries, regional offices, offices of cities and municipalities, police, fire brigade, hospitals and many other institutions) to customize their websites to meet WCAG 2.0 reuirements.

WHY IS IT SO IMPORTANT?

Given the need for provide user friendly in other words accessibility to websites for the largest number of users, we can not forget about people with disabilities such as the blind or visually impaired. Such people are exposed to the "Digital Exclusion" which means no or limited ability to use modern forms of communication, for example websites. A good example is too bright font color that may preclude reading text by visually impaired person. The usefulness of the service should be sufficient, easy and pleasant for each site visitor.

PRINCIPLES OF AVAILABILITY

Document v. 2.0 has been divided into 4 groups

  1. Perception
  2. Functionality
  3. Intelligibility
  4. Reliability

and 3 levels of availability:

A - criteria which must be fulfilled
AA - criteria that should be complied
AAA - criteria that can be meet

Perception - Information and user interface components have to be presented in an accessible way for users.

The main assumptions (I will describe the most important only, please check the details in the documentation of WCAG)

  • The alternative text for non-text elements for example ALT for images
  • Subtitles attached to video/audio
  • using additional description elements - eg. the required forms fields should be appropriately marked not only with color but text for example above the field
  • The minimum contrast (for page background and text color) ratio should be 4.5 : 1

Functionality- user interface components and the navigation have to be functional (should allow the interaction).

  • Availability of elements directly from the keyboard - can move around the page using the keyboard
  • No flashing elements on the page (can cause epilepsy)
  • Direct access to the section for example link to content that skips repeating content on the page
  • Visibility selection (at any time the user needs to know on which an active element is located)

Intelligibility - content and service user interface must be comprehensible.

  • Selection of elements (focus) is not misleading
  • Limiting automatic redirects or sending forms
  • Well visible identification of errors, relevant error messages after submitting forms, etc.

Reliability - the content must be sufficiently reliable in order to be correctly interpreted by many different users, including assistive technologies.

Correctness of HTML and CSS (in the case of CSS is difficult because of the code needed for browsers, despite all correct code should be implemented for the greatest number of devices)

USEFUL TOOLS

 

What are the main features of an accessibile template?

  • Page navigation by using keyboard - you don’t need to use a computer mouse to navigate through the relevant sections of the website, just keyboard will be enough
  • Skip to the following Menu items is possible with the Tab key, so we can quickly move through the page
  • Avoidance of animated elements (facilities for people suffering from epilepsy) stable graphics, no garish animated effects is one of the advantages of our template
  • Understandable links - description of link clearly indicates what it refers to
  • High contrast mode: ensure optimal readability of the text ( Black/White Mode, Black/Yellow Mode, Yellow/Black Mode)