Flexible Output

Content can be displayed flexibly: e.g. page layouts adapt to the window size when enlarged.

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.

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

screenshot of this page with custom styles — Current page top area with custom user styles. e.g. Open-Dislexic font

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

Flexible output test procedure

Text enlargement without horizontal scrolling

Enlarge the content on the screen using the on-board tools of our operating system: [Ctrl] + [+]
Check whether the text is still legible without horizontal scrolling and without superposition of elements. Text reflow, responsive design.

Customisable colours and customisable cascading style sheets (CSS)

As a substitute for individual colour schemes, we check whether all content remains clearly visible in Windows High Contrast Mode (Win HCM). [Shift] + [Alt] + [PrtScn] Special attention is paid here to symbol images, icons and location indicators.
We recommend the external page Stylus browser extension to tech-savvy accessibility testers to apply typical individual CSS instructions to any web content and check their customisability.

Example CSS code for Stylus browser extension:

* { 
  font-family: OpenDyslexic; 
} 

p { 
  line-height: 2.4; 
  word-spacing: 12px; 
  letter-spacing: 6px; 
  color: white; 
  background-color: gray; 
  padding: 0 18px; 
 font-size: .9em; 
}