Accessible web design and web conception

Most articles on digital accessibility and accessible websites deal with HTML, marginally with CSS and JavaScript, but there is relatively little information on accessible web conception and design. We want to do that differently in this article. Look in this article for accessible typography.

Accessible websites are wrongly considered unattractive. In fact, in the Web content Accessibility Guidelines, the authoritative guidelines, there are virtually no hard specifications for the visual design of web pages. Most of the work is done below the surface, i.e. in the HTML.

This article is explicitly addressed to persons who are responsible for the design/conception of user interfaces. Of course, it is still important to have a competent web developer who doesn't just add a little ARIA here and there.

For simplicity, we assume here that concept and design are done by one person.

Article Content

The WCAG documents

This guide can of course only be a first introduction. In any case, we always recommend that you take a look at the relevant documents. There are the statements specified and also references to special features and exceptions, which we omit here for reasons of space.

A short introduction to the documents. The WCAG in its current form is authoritative. The WCAG is canonical, so it is rarely changed. It is also technology-agnostic, which means that it generally can be applied to all conceivable user interfaces and document forms. It consists of general principles and guidelines. However, the success criteria are interesting because there are detailed requirements described.

Each success criterion is linked to various other documents. For example, there are the documents "Understanding WCAG 2.x" and "How to meet WCAG 2.x". In these documents, the requirements are specified in relation to the web, techniques for implementation are shown and common errors are identified.

The levels of success are also important. All success criteria are assigned to levels A, AA and AAA. If one wants to achieve a minimum level of accessibility/conformity, all requirements at level A must be fulfilled. The basic standard in most countries of the world is Level AA. This means that all requirements of A and AA must be met. Level AAA is the gold standard, all WCAG success criteria must be met. In practice, Level AAA is not aimed at for an entire web presence, as the requirements are not always feasible and sometimes contradict each other.

In the WCAG, there are relatively few concrete requirements for concept and design. This is due to the fact that all success criteria must be testable. However, it is difficult to say whether a certain font is readable and another is not.

1.1.1 Non-text Content (Level A)

This success criterion is simple to describe. You must ensure that all non-text elements, i.e. in particular images in the content area, information graphics, buttons embedded as graphics as well as linked graphics receive a textual description.

This is often forgotten in the case of social media buttons.

1.3.1 Info and Relationships (Level A)

If elements have a visually perceivable relationship to each other, this structure is also technically perceivable or described in text form.

For blind or visually impaired persons, the visual arrangement of elements is not perceivable . They need additional information to recognise whether and how elements are linked to each other.

There are numerous possibilities here. Semantic code is particularly important, for example to indicate navigation, footer goals and so on.

For the visually impaired, you can try out what happens if you switch off the page's stylesheets. Are element blocks and their relations still perceivable ?

1.3.3 Sensory Characteristics (A)

A piece of information or function is not conveyed by a single sensory characteristic, e.g. colour, shape, position and so on.

The background of this requirement is that blind, visually impaired or persons with other sensory impairments may not be able to perceive or interpret information if it is conveyed via a visual form.

It is not forbidden to use colours, shapes or the position of elements to convey information. However, at least one other piece of information should be communicated that is not based on the same principle.

1.3.4 Orientation

Websites should be designed in such a way that they are not restricted to a particular screen orientation. The user should therefore not be forced to hold their display in a particular way in order to use a website or app.

1.4.1 Use of Colour (a)

Colour is not used as the only means to convey information. So it is not prohibited to use colour. However, at least one other way of conveying information must be used.

1.4.3 Contrast (Minimum) (AA)

>

Text and visual labels, for example on control elements or information graphics, should have a contrast ratio of at least 4.5:1.

1.4.5 Images of Text (AA)

If texts are contained in raster graphics or if texts are displayed over images, a text alternative should be provided. Blind, visually impaired and reading-impaired persons are unable or have difficulty reading text in graphics or otherwise alienated text.

1.4.8 Visual Presentation (AAA)

In this AAA-requirement There are strict guidelines for the presentation of text. For example, a line should not be longer than 80 characters, text should not be justified and the colour of the text or background must be adjustable by the user.

As mentioned above, AAA is relatively rarely the default standard, so this requirement only needs to be met if the accessibility requirements are very high.

1.4.9 Images of Text (No Exception) (AAA)

Images of text are only permitted for certain exceptions such as logos and are otherwise prohibited.

1.4.12 Text Spacing (AA)

At this point there are some specifications for visual text spacing. Text should be readable when enlarged by 200 per cent, and there are also specific specifications for character, word and line spacing.

Consider conditions

The specifications for contrast and colour apply to all states, unless the respective element cannot be activated. This means that contrast and colour specifications must also be fulfilled in the activated state, for example, with focus or mouse over.

Checklist for accessible web design and conception

Separate structure HTML, layout Css and behaviour JavaScript

Always consider whether a desired function can be carried out with HTML before resorting to JavaScript.

Use ARIA wisely and only if you know how the ARIA functions will work. Incorrectly used ARIA can be worse than no ARIA at all.

Always consider that information should be semantic - i.e. machine-readable. All functions should be operable by keyboard.

The behaviour of a website should always be predictable for the user.

The user must be able to easily distinguish the individual areas of the website, for example through white space, lines or colours. A website must also function when its elements are linearized, i.e. one after the other.In a form, the form field and label must be clearly linked in a machine-readable way.

In the case of dynamic content such as cookie banners or menus, the assistive technology must be informed of the change that has occurred as well as the new information, e.g. new navigation points. Tables must be correctly linearised, otherwise they cannot be used by blind persons. Colours and colour combinations should be chosen from the outset so that they meet the minimum contrast values. This applies especially to continuous text, interactive elements and infographics.

Read more