Header

Search

e-Accessibility Basics

Digital accessibility can be applied to all electronic user interfaces and serves everyone. Regardless of the type of disability or other special needs and characteristics.

What does e-Accessibility mean for learning materials?

Accessible learning materials can be "read" and used by all interested learners, regardless of motor, sensory and, as far as possible, cognitive/psychological limitations. As far as possible without individual adaptations. Where use is not possible without adaptations, accessible electronic learning materials are compatible with common assistive devices such as screen reader or voice control software.

The BIG FIVE - The most important features of accessible electronic user interfaces

Internalise the following five easy-to-remember aspects. They cover most requirements for digital accessibility. Moreover they are good guidelines for independent accessibility testing.

Flexible Output

The requirement for enabling flexible output of content on the screen and on different output devices is mainly aimed for the needs of people with visual impairments. They depend on being able to customise digital content in a variety of ways. By enlarging the font, letter, word and line spacing, by choosing alternative fonts as well as by adjusting colours, contrasts or brightness on the screen.

In terms of Universal Design, content creators are not expected to provide the tools to adjust the various aspects themselves. For example, is it not necessary to provide a function for enlarging the font one's website. However, it is highly important that the content can be enlarged by the user itself using appropriate tools.

This can be achieved most easily by choosing appropriate file formats. For example, HTML (and other web technologies) is ideally suited for creating accessible content, whereas it becomes much more difficult and costly to ensure accessibility for PDFs and other print-​ and layout-​oriented file formats.
By playing the video you accept the privacy policy of YouTube.Learn more OK

Responsive Design

People with disabilities depend on content and information being able to be output on different devices and on screens of different sizes with different magnification factors.

It is essential that the texts flow dynamically when enlarged. Horizontal scrolling should be avoided at all costs.

Allow custom styles

Further aspects are various possibilities of individual adaptability of the display. Content should be displayed with user-​defined colour schemes, fonts/families, line spacing, etc., in short with user-​defined CSS. - in short, with user-​defined CSS.

Flexible Output - briefly tested

Flexible Input

Complementary to the requirement for flexible output options, flexible input options are required.

All interactive components of user interfaces must be accessible and operable via pointer devices as well as serial input devices.

Comics illustration of the requirement for accessible digital user interfaces that they can be operated with different input methods. For example, with both a computer mouse or a keyboard.

The computer mouse is representative of pointer devices such as trackpads, trackballs and others such as mouth mice, joysticks or eye-​​tracking devices.

The keyboard, on the other hand, represents a wide range of devices for serial navigation. Here, the user moves serially from interactive element to interactive element by pressing a key (e.g. tab key) and triggers the desired element with another key (e.g. enter / space bar). Serial input devices are often integrated into custom-​​​made environmental control devices for people with severe motor impairments. (e.g. quadriplegics).

Electronic user interfaces should always be usable by means of both pointer and serial input devices.

Serial navigation can only work if the keyboard focus is clearly visible at all times!

Flexible Input - briefly tested

  • Can all content and interactive components be reached and operated by means of both the computer mouse and the keyboard (Tab, Enter, Space, Arrows and Esc)?
  • Is it always possible to see where the keyboard focus is?
  • Are established, generally known and accepted interaction patterns taken into account or are there detailed instructions for action, also for serial inputs?

Established interaction patterns for serial input: external pageWAI-ARIA Practices - Design Patterns and Widgets

Information, explicit semantics and feedback
(Compatibility with assistive technologies)
By playing the video you accept the privacy policy of YouTube.Learn more OK
Semantics - Accessibility in Higher Education
Comics illustration of the importance of meaningful headlines for people who rely on assistive technologies such as screen readers.

Probably the most challenging requirements for accessible content to implement are those for ensuring compatibility with complex assistive technologies such as screen reader and voice control software.

In both exemplary cases, all relevant implicit semantic information and properties must be made explicit in order for communication between humans and machines (e.g. screen readers) to succeed.

  • Different regions or areas of the user interface, such as banner/header, navigation, main content or footer, must be identified linguistically. Most of the time, these are in fact only recognisable on the basis of visual cues/design features due to conventions.
  • The same applies to the semantic structure of text content. This mostly concerns heading structure, lists and tables.
  • Buttons/switches must not be recognisable as such only because of their visual design. The same applies to icons.
  • Form fields and form field groups must be correctly linked to the respective labels so that it is clear which inputs are expected.

The issue of explicit semantic information becomes difficult in connection with scripted interactive elements such as

  • Modal dialogues / pop-​up windows
  • (Mega-​) drop-​down menus
  • Accordions, tab lists and simple drop-​down elements
  • Carousels
  • Sliders / slider bars
  • Tooltips
  • and many more.

For web content, therefore, the general rule is that native HTML is preferable to scripted interactive components wherever possible. The vast majority of HTML components carry semantic meaning and can be correctly interpreted by screen readers.

The WAI-​ARIA standard of the W3C also allows script-​driven components to be supplemented with semantic information. By means of WAI-​ARIA attributes, role (What is a widget about?), properties (e.g. slider range) and states (e.g. slider position) can be explicated "manually".

Feedback

Especially in interactions, it is extremely important that state changes are always explicitly returned as feedback and not just visually. → ARIA live regions.

Finally, it should be mentioned that search engines benefit enormously from explicit semantic content. Therefore: Accessible content is SEO friendly content.

Semantics - briefly tested

Screenreader tests

The 2-​Senses Principle

Images and Multimedia content specifically target the visual sensory channel in the case of videos and images and the auditory channel in the case of audio content and audio tracks of videos. Today, neither of these specific formats can be automatically and reliably prepared for other sensory channels.
By playing the video you accept the privacy policy of YouTube.Learn more OK

Images and text alternatives

Images, be they illustrations, photographs, graphics, symbols or icons, also convey important information. In all cases, it must be explicitly stated as text (in HTML usually as an alternative text attribute: alt="conveyed info") what information the respective images convey for sighted people.

> Further information on the accessibility of images and alternative texts

Comics illustration of the importance of text alternatives for purely visual representations for people with severe visual impairments up to blindness.

In the context of teaching, special attention must be paid to complex scientific representations that not only depict individual elements but also represent complex interactions between them.

Audio and Video

It is therefore extremely important that any purely visual or auditory information is always explicitly prepared for at least one other sensory quality.

Text is considered a "wild card" and can be automatically prepared for different sensory qualities using modern assistive technologies: Auditory and tactile by means of screen readers or can be read directly visually as text.

> Further info on accessible videos

  • The auditory content of videos must always be offered as text in the form of synchronous subtitles.
Comics illustration of the requirement for captions for video content.
  • The visual content of videos must always be conveyed auditorily as well. Either as integrated description as part of the 'normal' audio track or as an additional audio track, as an audio description.
Comics illustration of the importance of good descriptions of visual content on presentation slides, in the lecture hall as well as later in lecture recordings. Also applies to visual information in learning videos.
  • The information conveyed in audio files must also be offered in the form of a text transcript.

The 2-​Senses Principle - briefly tested

Whether useful alternatives for multimedia content are provided can only be ensured by visual human inspection. Particular attention should be paid to the acceptable quality of subtitles and text transcriptions.

The same applies to images. Alternative texts in HTML can be made visible by using suitable tools. E.G.: external pageWeb Developer Toolbar by Chris Pederick

Judging whether an alternative text is meaningful and purposeful in the given context is not entirely trivial. The Alt-text-Decision-Tree of the Web Accessibility Initiave (WAI) serves as a pragmatic decision-making aid.  

There are other aspects to consider when assessing complex scientific illustrations. The resources below provide guidance on this. It is strongly advisable to always have the resulting text alternatives checked for correctness by appropriate experts.

Colours and Contrast

The requirements for the use of colour and contrast are the only aspects of accessibility that actually limit the visual creativity of designers to a certain extent.

Comics illustration of the requirement for the minimum contrast ratio between text and background and the prohibition on the use of color as the sole feature for conveying information.

Information must never be conveyed by colour alone. Think of a visual reservation system in which available seats and seats that are already taken are marked exclusively with green and red colours respectively. Colour-​blind people and others with visual impairments have great difficulty distinguishing between the categories.

Contrasts

It goes without saying that minimum requirements for the contrast ratio of text and background or of components such as form fields to the immediate surroundings are essential for people with visual impairments to use electronic media properly and efficiently. Too low a contrast is very difficult to compensate for even by means of user-​defined colour schemes.

Colours & Contrast - briefly tested

Visual inspection: With a little practice, it is easy to identify areas with problematic use of colour.

Various tools exist for measuring contrasts. For checking the minimum contrast ratios required by the WCAG, the following is particularly suitable:

Our Comics summary

Comic illustration on flexible output: People with sensory disabilities, especially people with various visual impairments, depend on the ability to adjust the content on the monitor according to their individual needs: font enlargement, adjustment of font and background colours, line height and letter spacing, and much more. All this can be done much more easily with classic web technologies than, for example, in PDF format. Keyword Responsive Design.
Enlarged view: Comic illustration on text alternatives in digital learning content: Visual representations of facts, contexts and processes are more and more common in teaching. For blind people or people with severe visual impairments, it is important that all information is also available as text. When using visual material, authors should therefore always think carefully about what central information they want to convey and provide this information in text form.
Comic illustration about colours and contrast: Various visual impairments result in limitations in the perception of colours and contrast. It is therefore important to ensure that texts and graphics always have high contrast values between foreground and background colours. It is also important to prevent information from being conveyed by colour alone, for example by means of colour-coded legends in graphs. Alternatives here are symbols, hatching or simply direct labelling of the respective data.
Comic illustration on audio description. Everyone benefits from the visualisation of complex issues through images, videos, animations or simulations. In lectures as well as in videos. For people with visual impairments, however, it is indispensable that the scenes and visual content presented are always commented on and adequately described in spoken language. Where this is not possible, additional audio tracks with audio descriptions become necessary.
Comic illustration flexible input: Digital media can be operated in different ways. We all know computer mice or touch screens. For people who cannot operate these devices or can only do so with difficulty, it is important that they can also access and exit all interactive elements serially, e.g. with the tab key on the keyboard. For them it is important that the individual elements are arranged in a predictable sequence and that it is always visible where the focus is at the moment.
Comic illustration heading structures in digital learning content. Headings and their structure (hierarchical heading levels) are important for people who use assistive technologies to orientate themselves in digital content and to find relevant content quickly and efficiently. Screen readers, software that converts written content in synthetic spoken language or Braille, allow blind people to jump directly to headings of interest and quickly get an overview of the content. Therefore, use format templates for headings and ensure a hierarchically correct structure.
Comic illustration video captions: People with hearing disabilities depend on audio and video content always being available as text, too. Learning videos and lecture recordings should therefore always be provided with captions. Fortunately, the quality of automatically generated subtitles is improving. Despite this progress, subtitles must be checked for quality and corrected accordingly.
JavaScript has been disabled in your browser