Correctly implementing the criteria of the BITV – Barrier-free Information Technology Ordinance

To ensure that IT solutions are adequately designed and programmed to be barrier-free for all those affected, the BITV criteria are a helpful tool.

BITV stands for Barrier-free Information Technology Ordinance and is a bit dry as a set of rules, but extremely important. We’ll try to simplify it a little here, because these criteria must be met if you want to call yourself or your IT product “barrier-free” or have it certified as such. Everything else is just “barrier-free” – also nice, but in many cases not enough. So if you want to venture into barrier-free websites, you will find help here – through information or gladly through active participation by us. Our IT solution for better compatibility of family and work is just about to be certified. Therefore, we use this example to show how the project is progressing and how we have solved one or the other.

Principle perceptibility

1.1.1.1 Alt texts for non-text content
Layout graphics have empty alt attributes.
Implementation of BITV for the IT solution Family and Job:
FamJob page: Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.2 Alt texts for control elements
Graphical control elements have meaningful alternative texts.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.3 Alt texts for graphics
Informative graphics and images have meaningful text alternatives. Objects such as video and audio files and applets have at least short descriptive text alternatives.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.4 Alt texts for captchas
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = — | WPF = — | Apps = —

1.2.1 Ältere Medien zu aufgezeichneten Audio- und Videodateien
Audiodateien und stumme Videodateien haben gleichwertige Medienalternativen.
Implementierung von BITV in die IT-Lösung Familie und Beruf:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.2 Extended subtitles
Recorded videos have synchronous subtitles.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.3 Audio description or full text alternative
Videos are provided with audio description or full text alternative.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.4 Live subtitles
Live broadcasts have synchronous subtitles.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.5 Audio description
Videos are provided with audio description.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.1 Headings – Information Presentation
Page contents are made accessible by headings.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.2 Lists – Information Presentation
Lists (including menus) are visually recognisable as such and marked with the intended HTML structural elements.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.3 Quotes – Information Presentation
Quotations in separate sections are marked with blockquote.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.4 Outline – Information presentation
Paragraphs and text highlights are marked with suitable structural elements.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.5 Tables – Information Presentation
Data tables are correctly structured and labelled.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.5 Table Cells – Information Presentation
In complex data tables, the reference of headings and contents (via scope or via id and headers) is defined, assignments of headings in simple data tables are correct.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.6 No tables for layout – information presentation
Mark-up intended for data tables is not used for layout tables.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.7 Labelling form – information presentation
Form field labels are correctly linked.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.2 Meaningful sequence – capture content
Page content is in a sensible order regardless of the presentation.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.3 Without sensory features – capture content
The perception of colours, shapes, position of elements or sounds is not necessary for the operation or understanding of the content.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.1 Usable without colours
The perception of colours is not necessary for the operation or understanding of the content.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.2 Audio control / sound can be switched off
Automatically played sound elements do not last longer than three seconds, can be switched off or turned down independently of the system volume.
Implementation of BITV in the IT solution Family and Career:
Design = — | HTML = — | WPF = — | Apps = —

1.4.3 Contrast
Colours are appropriately selected with high contrast.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.4 Changeable text size (text can be enlarged to 200%)
Text can be changed by up to 200 percent without losing content or functionality.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = NO | Apps = NO

1.4.5 Waiver of font graphics
Font graphics are not used.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

Principle operability

2.1.1 Tastaturbedienbarkeit
All essential functions and contents can be used even without a mouse.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.1.2 No keyboard trap
The content does not lead to a keyboard trap.
Implementation of BITV in the IT solution family-and-profession:
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.2.1 Time limits customisable
Time limits are not present, can be switched off or extended.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.2.2 (OK) Pause, stop, hide animations
Moving or flashing content is not present, stops after 5 seconds at the latest, or there is a way to pause, stop or hide the movement/flashing.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.3.1 Abandonment of flickering and flashing
Web pages do not contain flickering.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.1 Areas can be skipped / element groups bypassed
Page areas are made accessible by headings, jump links or WAI ARIA document landmarks, frames and iframes have meaningful titles.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.4.2 Web page titles / meaningful document titles
Document titles are unambiguous, they identify the site and page content.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = NO | WPF = — | Apps = —

2.4.3 Key sequence of keyboard operation / focus sequence
Links, form elements and objects are accessed in a coherent order using the tab key. Faded-in contents as well as dynamically inserted or changed contents appear in a meaningful place in the focus order.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = —

2.4.4 Meaningful link texts / purpose of a link (in context)
Link texts are meaningful through the link text itself or through the context that can be determined programmatically.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.5 Alternative access routes
Two different ways of accessing the content of the offer are available.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.6 Meaningful headings and descriptions
Headings and labels are clear and meaningful.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.7 Current position of the focus clearly / visible focus
The keyboard focus is clearly visible.
Implementation of BITV in the IT solution family-and-profession:
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.4.8 Location / position in the web presence clear
The web offer shows the visitor where he is at the moment.
Design = OK | HTML = OK | WPF = OK | Apps = OK

Principle of comprehensibility

3.1.1 Main language specified
The main language of the website(s) is indicated.
Implementation of BITV for the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.1.2 Words and sections in other languages distinguished
Words and sections in other languages are marked with the lang attribute.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.1 No unexpected context change with focus
Focus does not lead to an unexpected context change.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.2 No unexpected context change on input
Input does not lead to an unexpected context change.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.3 Consistent navigation
Navigation mechanisms are uniform.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.4 Consistent designation
Navigation mechanisms and functions are named uniformly.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.3.1 Error detection
If an input error is detected automatically, the faulty element is shown and the error is described in text form.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = — | WPF = — | Apps = —

3.3.2 Form element labels
Labels of form fields are in front of the input fields.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.3.3 Help with errors
If an input error is detected automatically, the error is described in text form. Suggestions for corrections are made where appropriate.
Implementation of BITV in the IT solution Family and Career:
Design = OK | HTML = — | WPF = — | Apps = —

3.3.4 Error prevention through aids
Mandatory data entries can be undone or checked and corrected before submission.
Design = OK | HTML = — | WPF = — | Apps = —

Principle robustness

4.1.1 Korrekte Syntax
The test result of the W3C HTML validator is positive.
Implementation of BITV in the IT solution Family and Career:
Design = — | HTML = OK | WPF = — | Apps = —

4.1.2 >>> Name, role, value available
Interactive control elements such as links and buttons have programmatically determinable names and roles.
Implementation of BITV in the IT solution Family and Career:
Design = — | HTML = OK | WPF = OK | Apps = OK

Support with BITV implementation

We are happy to help you implement the BITV correctly – whether as an inclusive design, in a pretest, as a consultation or in UI development.