Accessibility Services (ZAB)

Alternative text

• Images without Alternative text
  
  What does it mean?
  The image remains blank, there is no description
  Why its important:
  Every image must have an alt attribute. Without alt text, the content of an image is not available to screen reader users, the image is not present.
  How to solve it:
  Add an alt attribute to the image. The attribute value should accurately and concisely represent the content and function of the image. If the content of the image is conveyed in the context or environment of the image, or if the image does not convey any content or has no function, it should be provided with empty/non-existent alternative text (alt="").
  HTML-Code:
  instead of: <img src="bild.jpg"></img>
  correct way: <img src="bild.jpg" alt="Two students at one desk"></img>
  
  Standards and guidelines
  1.1.1 Non-text content (level A)
  • 1.1.1a Alternative texts for controls
  • 1.1.1b Alternative texts for graphics and objects
  • 1.1.1c Empty alt attributes for layout graphics
  • 1.1.1d Alternatives for CAPTCHAs
  •  
• Redundant alternative text
  
  What does it mean?
  The alternate text for an image is the same as the adjacent or adjoining text.
  Why its important:
  Alternate text that matches nearby or adjacent text is presented to screen readers multiple times.
  How to solve it:
  Modify either the alternative text or the adjacent text to remove the redundancy. In most cases, you can provide the image with blank/non-alternate text (alt="") because the content of the image is already provided in context by text. Linked images can often be combined with the adjacent text to form a link. In this case, the image can be provided with null/empty alternative text (alt="").

ZAB Video-Tutorial (YouTube)

Animated content

• Animated, flashing or automatically updating content can be turned off
  
  What does it mean?
  Anything that moves, flashes or scrolls should be avoided.
  Why it matters:
  Moving content is often difficult for people to perceive. It obscures content and results in visual obfuscation and is not usable for many people.
  How to solve it:
  The button or instruction to stop motion must be unique and clearly placed at the top of the page or in the direct context of the moving content. All content must remain available after motion is stopped. It does not matter if the flashing or moving content is advertising or editorial content.
  Standard and Guidelines
  2.2.2a Moving content can be switched off
  2.3.1a Abandonment of flickering

Audio/ Video

• Alternatives for audio files and silent videos
   
• What does it mean?

  Audio and video files exclude people who cannot hear them.
  Why its important:
  Audio files and silent video files that convey information must be provided with equivalent media alternatives - unless you already have media alternatives for text.
  How to solve it:
  Audio files are not or only partially accessible for hearing-impaired users, so they need a transcription. Silent video files (such as a film or animation sequence showing how a device is assembled) are not available to blind and visually impaired users. They therefore need a full media alternative (text or audio file).
  Standards and guidelines:
  1.2.1a Alternatives for audio files and silent videos

• 
  What does it mean?
  If the audio track of a recorded video contains information, subtitles must be provided as an alternative.
  Why its important?
  Movies are usually impossible to understand without the sound.
  How to solve it:
  For people with hearing disabilities, the content of the soundtrack must be provided by subtitles. Subtitles can also be helpful for other users, for example, people who are not familiar with the language of the film.
  Normen und Richtlinien:
  1.2.1a Alternativen für Audiodateien und stumme Videos

• Audio description or full text alternative for videos
  
  What does it mean?
  For informational visual video content, an audio description or full text alternative must be provided.
  Why its important:
  The action of videos can often be followed quite well even without a picture. For example, you don't have to see the narrator of a news program to understand what it's about. In contrast, feature films and reports often contain passages in which little is said and content is conveyed via the image.
  How to solve it:
  In order for a blind viewer to be able to follow the film, such passages must be described to him. The audio description method is used for this purpose.
  Standards and guidelines:
  1.2.3a Audio description or full text alternative for videos
  1.2.4a Videos (live) with subtitles
  1.2.5a Audio description for videos

• Sound that can be switched off

  The user should be able to switch off any sound that plays automatically and that does not end after three seconds.

  Sound that plays automatically disturbs users who navigate a page through means of voice output.

  If sound starts automatically after a page loads, it is important that it can be switched off, paused or turned down via an accessible mechanism located at the start of the page.

  
  1.4.2a Sound can be switched off

BITV-Test

The BITV-test is a reliable and comprehensive accessibility evaluation procedure for websites and applications.

• The basis for the BITV test is the Barrier-Free Information Technology Ordinance (BITV 2.0) of 21 May 2019. The test procedure broadly follows the new requirements of WCAG (Web Content Accessibility Guidelines) 2.1.
• The BITV test comprises a total of 60 steps. For each test step, there are detailed explanations that say what exactly is being tested, why this is important, and how to proceed in the test. Das The test procedure is transparent. 

The individual test steps and explanations can be found in this overview under the points "Standards und Guidelines".

Source: https://www.bitvtest.de/bitv_test.html

Buttons

• Blank button
  
  What does it mean?
  A button is empty or has no value text.
  Why its important:
  When navigating to a button, screen reader users must be presented with descriptive text to indicate the button's function.
  How to solve it:
  Place the text content inside the <button> element or give the <input> element a value attribute.
  The algorithm:
  A <button> element is present that contains no text content (or alternative text), or an <input type="submit">, <input type="button">, or <input type="reset"> has an empty or missing value attribute.
  Standards and guidelines:
  2.4.4a Informative link texts

Cell padding

• Adaptable cell padding
  
  What does it mean?
  Line, paragraph, word and letter spacing can be set by users to the following values without content or functionality becoming unavailable: Lines: 1.5 times text size; spacing after paragraphs: 2 times text size; letter kerning: 0.12 times text size; word spacing: 0.16 times text size.
  Why its important: People with visual impairments can improve the readability of texts if they can adjust the spacing between lines, paragraphs, characters and words using tools such as bookmarklets or their own style sheets. Such adjustments mean that texts may need more space and containers must be created dynamically to show the longer text without loss.
  Norms and guidelines:
  1.4.12a Textabstände anpassbar

Colour

• Usable without colour alone

  Information conveyed by colour should also be accessible if the user cannot perceive the colour, i.e. it should also be highlighted by other means (e.g. bold or indentation).
  
  Information conveyed exclusively by colour is not accessible to users who are visually impaired. Users with colour vision deficiency, who may work with their own colour schemes, are also unable to identify and distinguish between colours, or can do so only to a limited extent.
  Standards and guidelines:
  1.4.1a Usable without colours

Contrast

• Contrasts of the font
  What does it mean? A very low contrast between text and background colours.
  Why it matters: Sufficient text contrast is necessary for all users, especially for users with low vision.
  How to solve it: Increase the contrast between the foreground colour (text) and the background colour. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
  The algorithm: Text is present that has a contrast ratio of less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio of less than 3:1. WCAG requires that both foreground and background colours are defined (or inherited) for page elements that provide sufficient contrast. When text is displayed over a background image, the text must have a defined background colour (usually in CSS) that provides sufficient text contrast when the background image is disabled or unavailable.
  Standards and guidelines: 1.4.3a Contrasting texts is enough
  Sources: a very informative YouTube video (https://www.youtube.com/watch?v=2qdtRTLLru4) ContrastAnalyser - Programme to test contrasts under Windows and macOS (https://developer.paciellogroup.com/resources/contrastanalyser/)

  Alternative: Contrast Checker (https://webaim.org/resources/contrastchecker/)

• Contrast of graphics and graphic controls
  
  What does it mean? The visual information of information-bearing graphics and graphic control elements and their states, which is necessary for identification, should have a contrast of at least 3:1 to adjacent colours. In many cases, such as monochrome icons, this simply means measuring the contrast between the colour of the element and the background colour.
  Why its important: Sufficient contrast is necessary for all users, especially for users with low vision.
  How to fix it: Adjust the graphics so that the graphic elements have sufficient contrast to each other. If graphic elements are used in addition, i.e. a text sufficiently identifies the control element or its state, graphic elements do not have to fulfil the contrast requirement.
  Standards and Guidelines:
  1.4.11a Contrasts of graphics and graphic controls are adequate

Further information on barrier-free contrasts: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-kontraste

Content as speech

• Avoid abbreviations

  Abbreviations such as PLZ (German abbreviation for postcode) and FAQ are sometimes read out differently by screen readers than are intended (here, for example, 'Please' or 'F*ck').  A mixture of German and English content can also lead to strange pronunciations.

  Pay attention then to these expressions, because the screen reader should be able to interpret these well.

  
   

Diagrams and infographics

• For diagrams, it is crucial that all components can be clearly perceived; this also applies to the accompanying texts, which are usually also integrated as pixel graphics. For example, in election results, the party names and percentages are often shown in a pie chart. This is not ideal, because the pie pieces are often arranged according to the party colours and therefore the contrast is often very poor.
• If colour is used as the only distinguishing feature, the people with colour vision deficiency can no longer distinguish individual chart components. In this case, care must be taken to ensure good contrast values when converting colours; the Colour Contrast Analyser is available for this purpose.
•  https://www.uni-bielefeld.de/einrichtungen/zab/digitale-barrierefreiheit/barrierefreie-webseiten/barrieren-a-z/#comp_00005f56e5a6_0000002f5f_7f7d
• In any case, the results displayed in the chart should also be displayed as a normal HTML table, so that people with impaired vision can also read the findings. You should offer an alternative in tabular form. It makes little sense to place detailed chart findings in the alternative text boxes or in title texts, as these would make this information far too long and would be confusing for the user. Alternative texts, then, are more suited to short descriptions, and tables are more suited to conveying data.
• But the data tables must also be accessible. How to do this and what to look out for can be found on the following pages: https://www.uni-bielefeld.de/einrichtungen/zab/digitale-barrierefreiheit/barrierefreie-webseiten/barrieren-a-z/#comp_00005f850a25_0000002e09_5ced

• So the more complex a diagram is, the longer the alternative text has to be, so that the alternative text is not always a good solution. For diagrams, you can end up with several thousand characters.
  
  What editorial and conceptual factors must be considered when making diagrams accessible? After all, simply writing the title of a diagram in the alternative text is not normally enough. Another question is how to deal with screenshots of a press article in alternative texts, e.g. when it comes to brochures, annual reports or project documentation. Here, the user should be offered a transcription of the content so that screen readers can read the text aloud.

  Under the following link you will find a very useful guide to working with different graphics with accessibility in mind (especially the point 'information graphics'): https://www.einfach-fuer-alle.de/artikel/bilder-grafiken-barrierefrei/ 
  
  In short, the ALT text for graphics can be used to describe graphics with little content, graphics with a lot of text require a transcription of the text. And charts, diagrams with data, numbers and facts should be presented in alternative tables.

Examples of bad practice for accessibility

• A page that is not accessible-friendly
  
  This is a page in which barriers have been deliberately placed. Accessibility issues are voiced, so to speak, as you go through the page with the screen readers. This webpage is, then, an example of a page with lots of accessibility issues. Through this ‘bad example’ you can learn how best to avoid mistakes in adapting sites for accessible users.
  
  https://uni-bielefeld.de/einrichtungen/zab/digitale-barrierefreiheit/fehlerseite.xml

Expand/Collapse function

<details> and <summary>

Expandable areas similar to the accordion effects (in Roxen Groups with Accordion) with jQuery are included in the HTML5 commands <details> and <summary>. There is one difference with the harmonica-accordion-effect: multiple areas can be open.

But first things first. Let's look at how these are used in HTML. Both commands are needed and the <details> instruction encloses the complete area. In this area, the <summary> instruction comes first - this is always visible and is automatically preceded by an arrow.

Any other text and HTML code will not be visible until you click on the text.

Here is the html5 alternative:

<details><summary>Überschrift</summary> Ausklappinhalte .... </details>
 

https://developer.mozilla.org/de/docs/Web/HTML/Element/summary

Works in the most popular browsers on Mac and PC and is touch compatible. On Edge everything automatically expands. The explanatory sentence is important not only for the visually impaired, but also for other users. Only on Firefox is the arrow not displayed.

Built into the template:

Example:

More info: https://www.html-seminar.de/html-befehle-details-summary.htm

Forms

• Accessible template
  
  Designing accessible forms is not easy. For this purpose, we have created an accessible template that can be copied in its entirety or in its individual field types:

  https://www.uni-bielefeld.de/einrichtungen/zab/servicedesk/vorlagen/web/index.xml
   

• Missing Form Labels
  What does it mean?
  A form control does not have a corresponding label.
  Why its important:
  If a form control does not have a properly mapped text label, the function or purpose of that form control may not be displayed to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
  How is it solved?
  If a text label is visible to a form control, use the <label> element to associate it with the corresponding form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) with aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
  Der Algorithmus:
  An <input> (except for Bildtypen, Submit, Reset, Button oder versteckt), <select> oder <textarea> does not have a properly assigned label. A properly assigned label is:
  - a <label> element with a for attribute value equal to the id of a unique form control
  
  - an <label> element that surrounds the form control, does not surround any other form controls, and does not reference any other element with its for attribute
  
  - a non-empty title attribute or
  
  - a non-empty aria characterized by an attribute.
  
  Html-Code:

  There are different techniques for labeling controls with names. While buttons (should) bring their label with them, so to speak, for input fields, selection lists, radio buttons or checkboxes a text is placed before or after the control. In general, this text must be labeled with LABEL and linked to the control with the for attribute. The value of the for attribute must be identical to the value for id of the control:

  <p> <label for="givenname">givenname:</label> <input type="text" name="givenname" id="givenname" /> </p>

  The controls that require additional labeling are:

  <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="file" /> <input type="password" /> <textarea> </textarea> <select> </select>
  
  Buttons do not require additional labeling because buttons have a name or textual content. This is not about the name attribute, but about the name as defined in the glossary of the Web Content Accessibility Guidelines (WCAG) 2.0; it is about the name of a control that is used by software to identify the control to humans.

  For simple buttons the name is set with the value attribute:.

  <p> <input type="submit" value="Send now" /> </p>
  
  Sources:
  More Information about labels: https://www.barrierefreies-webdesign.de/knowhow/formulare/label.html
  
  Standards and guidelines:
  3.3.2a Form element labels available
   
• Missing fieldset
  
  What does it mean?
  A group of checkboxes or radio buttons is not included in a fieldset.
  Why its important:
  A fieldset provides a visual and structural grouping of related form elements. It is typically required for groups of checkboxes or radio buttons where a higher level description (called a legend) is necessary to understand the function of the checkboxes or radio buttons. The description is recognized by a screen reader only if it is provided in a fieldset legend.
  How to solve it:
  Determine if the checkbox or radio button grouping has or needs text that explains the purpose of the checkboxes or radio button grouping. If so, select the group within a fieldset and include the group description in a legend element.
  The algorithm:
  Two or more checkbox or spark input elements within a form have the same name value, but are not included in a fieldset.
  
  HTML-Code:
  instead of
  <label><input type="checkbox" name="auswahl" value="auswahl2">
  Auswahl 1
  </label>
  <label><input type="checkbox" name="auswahl" value="auswahl2">
  Auswahl 2
  </label>
  correct way:
  <fieldset>
  <legend>Auswahl treffen und Option wählen</legend>
  <p>Bitte wählen Sie aus:</p>
  <label><input type="checkbox" name="auswahl" value="auswahl1" /> Auswahl 1</label><br />
  <label><input type="checkbox" name="auswahl" value="auswahl2" /> Auswahl 2</label><br />
  <label><input type="checkbox" name="auswahl" value="auswahl3" /> Auswahl 3</label><br />
  <label><input type="checkbox" name="auswahl" value="auswahl4" /> Auswahl 4</label><br />
  </fieldset>
  
  Standards and guidelines
  3.3.2a Form element labels available
• Unlabeled form label with title
  
  What does it mean?
  A form control does not have a label, but a title.
  Why it matters:
  The value of the title attribute for unlabeled form controls is displayed to screen reader users. However, a properly mapped text label provides better usability and accessibility and should be used unless the purpose of the form control can be intuitively understood without the label.
  How to solve it:
  If a visible text label is available for the form control, link the text label to the form control using the Label element. . This provides additional functionality for end users because when the label is clicked, the focus is set to the form control. If the form control is intuitive without <label>, the value of the title attribute can be used. Note that the value of the title attribute is usually not read by a screen reader if the control has a label, and may not be available to sighted users, especially keyboard-only users.
  The algorithm:
  An <input> (except image types, submit, reset, button or hidden), <textarea> or <select> Element has a non-empty title attribute value and is missing a caption or a valid 'aria-labelledby' reference identified by a reference.

• Presetting of input fields

  The labelling of an input field should always be done with visible text. As a rule, the visible text is positioned outside the input field and linked to the input field with the Internal: LABEL element. This gives the input field a unique name.

  An unfavourable variant of this technique is the use of the value attribute:

  <input name="suche" id="schnellsuche" type="text" value="Suchbegriffe eingeben" />

  As an alternative to the value attribute, the placeholder attribute can also be used. With the placeholder attribute, a note text is displayed in an input field as long as the focus is not on it and as long as the user has not made an input:

  The attribute is at least supported by screen readers, i.e. the value of the placeholder attribute is recorded in addition to the actual caption. To avoid redundancies, placeholder texts should therefore not contain repetitions of the caption texts.

  In most cases, however, the "placeholder" is no substitute for the correct labelling of an input field. While a visible label is always displayed, the pre-placement is hidden at the moment it is concretely needed. In addition, the preassignment could be misunderstood as an input value. Finally, the default representation of the preassignment (greyed out) has a low contrast ratio. So there are several reasons not to use this attribute from an accessibility point of view (even if there are legitimate reasons for its use in practice).

• Better type=radio as select?

  If the choices are limited, input type=radio is more informative because it always displays all options and requires only one action. The user would have to expand the select list before making a choice.

  More Information: https://www.barrierefreies-webdesign.de/knowhow/formulare/placeholder.html

Headlines

• Blank heading
  
  What does it mean? A heading does not contain any content.
  Why its important: Some users, especially keyboard and screen reader users, often navigate by heading elements. A blank heading contains no information and can cause confusion.
  How to solve it: Make sure that all headings contain informative content.
  The algorithm: There is a heading element that contains no text (or only spaces) and no images with alternative text.
  Norms and guidelines: 1.3.1 Information and Relationships (Level A) 2.4.1 Bypass Blocks (Level A) 2.4.6 Headings and Labels (Level AA) Symbol Index
• H1-H6 heading
  
  Why the structured headings?
  Headings must be correctly labelled with the HTML structure elements h1 to h6 and open up the contents of the page.
  Why its important:

  Headings are helpful for page navigation for users of assistive technologies. They also give semantic and visual meaning and structure to the document. First level headings should contain the most important heading(s) on the page (generally the title of the document) and should only appear once.

  Users who cannot use this visual order, for example because they are blind or can only see a small section of the page, depend on the structure being accessible and usable regardless of how it is displayed on the screen. The use of heading elements is an essential prerequisite for this.

  This allows users to apply the heading elements:

• Show only the headings - as a table of contents for quick orientation (especially important for blind users)

• Jump from heading to heading (blind users). Highlight headings differently if the highlighting provided by the provider is not suitable (for example, different colour or voice).

  What to consider:
  Make sure that the text in question is really a headline and that it is properly structured in the page outline.
  Der Algorithmus:
  <h1> - <h6> Elemente sollten benutzt werden.
  
  Html-Code:
  <h1>
  ZAB
  </h1>
  
  Norms and guidelines
  1.3.1a HTML structural elements for headings
  2.4.6a Meaningful headings and captions
• Tipp: Use the bookmarklet h123, which gives you a quick overview of the h structure of a page. Installation and application

Hyphenation

• Since hyphenation may not be desired by the user - for example, because subjective legibility is made more difficult - the user should also be able to switch off hyphenation. It would be better if the user had to activate the hyphenation option in the browser first. Such options are currently not available.
  Hyphenation is particularly suitable for narrow columns on the web. It should be used with caution and should not, for example, be used by default for longer texts; hyphenation should only always be used for texts in a closed line case.

More information: https://www.barrierefreies-webdesign.de/knowhow/silbentrennung/

• In principle, words are automatically separated in Roxen CMS 17 at Bielefeld University.

  With long words, it can happen in individual cases that the separation is not set optimally in some displays. In these cases, there is an option in the edit area to overwrite the automatic separation logic with your own specifications.

  In all content components, including the header area, the ­tag can now be used for the Chrome browser in the places where preferential separation is to take place. Example: "Wirtschafts­wissenschaften" sets that in the case of a separation, preference is given to the word part "Wirtschafts". Several ­arguments can also be assigned per word. Please note that the automatic separation logic is always overwritten for the respective paragraph. However, this should rarely have an effect in practice, as the need for manual separation arises almost exclusively in the header area or for headings. In parallel, work is continuing on a solution for other browsers.

Impairments

How do people with impairments experience a website?

On this page we show, based on the Web Disability Simulator, how users with impairments can experience a website

Topics:

• Total color blindness
• Yellow-blue color blindness
• Red-green color blindness
• Farsightedness
• Tunnel vision
• Sunshine
• Parkinson
• Dyslexia
• Small vocabulary
• Concentration

Inserted content

• Faded in content operable
  What does it mean?

  • When additional content appears by hovering over it, users can move the pointer over that content without it disappearing.

  • There is a possibility to close a shown content without moving the focus (e.g. by pressing the escape key or by activating the element whose focus shows the content).

  • The content does not close automatically after a certain period of time.

    Note: The requirement does not apply to displayed content whose behavior is determined by the user agent (such as native title attributes).

• Additional content that is displayed when elements receive pointer or keyboard focus, such as custom tooltips or drop-down menus or, should meet three requirements:

Why its important: For visually impaired users working with high zoom magnification, additional content that is displayed when the pointer or keyboard is focused is problematic for several reasons:

• Content is often only partially visible due to the high zoom factor. Users must be able to move the pointer from the triggering element over the displayed content (which usually shifts the visible section) without the displayed content closing.
• Faded-in content often obscures other content. Users need to be able to close the overlay content without moving the focus (which would happen if they had to search for a close element). The Escape key or activating the triggering element that currently has focus should close the overlayed content.
• Visually impaired users may need more time to read content. Therefore, displayed content should be available until the user closes it (e.g. by tabbing, moving the pointer away from the triggering element and displayed content, or explicitly closing it via the keyboard).

How to solve it:
Do not use JavaScript functionalities that generate above mentioned errors.
Standards and Guidelines:
1.4.13a Faded in content operable

Keyboard operability / focus sequence

• Usable without mouse
  
  What does it mean?
  The website should also be usable without a mouse - i.e. exclusively with the keyboard - and the order in which links, form elements and objects are accessed should be coherent and comprehensible.
  Why its important:
  All functions of a website must also be operable with the keyboard, because many motor-impaired or blind people can only operate a page with the keyboard. We are often so used to using the mouse that keyboard operation is often neglected.

  Note on drag-and-drop functions: For important operating functions that can be operated by drag-and-drop, keyboard alternatives must also be offered.
  Moreover: If the keyboard focus can be moved to an element of the page, it must also be possible to move it away from this element again. The content must not create a keyboard trap. And keyboard shortcuts must be disengageable or customisable. In addition: The keyboard focus should be clearly highlighted so that keyboard users can see where their focus is when they want to activate interactive elements. It is important for the keyboard user to see where the keyboard focus is at the moment, i.e. which link is triggered when he or she presses the Enter key.
  How to fix it:
  Test the keyboard operation, open the page in the Firefox and Chrome browsers and check whether all essential links and form elements can be reached and used. Problems with operation are usually caused by the use of JavaScript. The check is therefore carried out with JavaScript switched on.

  Norms and guidelines:
  2.1.1a Usable without mouse
  2.1.2a No keyboard trap
  2.1.4a Keyboard shortcuts can be switched off or customised
  2.4.3a Key sequence for keyboard operation
  2.4.7a Current position of the focus clearly

Language

• Main language specified
  
  What does it mean?
  The main language of the website should be specified. And: If there are words and text sections in another language within a page, these must be marked up using the lang attribute.
  Why its important:
  Screen readers use word lists that specify the pronunciation of words. They need to know what language a text is written in so that they can use the correct word list and pronounce the text correctly.
  How to fix it: Look at the source text of the page and check whether the lang attribute (or the xml:lang attribute for xhtml pages) is used in the opening html element and whether the main language of the page is correctly specified in it.
  Norms and guidelines:
  3.1.1a Main language specified
  3.1.2a Words and passages in other languages marked

Links

• empty link
  
  What does it mean?
  A link does not contain any text.
  Why its important:
  Wenn ein Link keinen Text enthält, wird die Funktion oder der Zweck des Links dem*der Nutzer*in nicht präsentiert. Dies kann bei Benutzer*innen von Tastatur und Bildschirmlesegeräten zu Verwirrung führen.
  How to solve it:
  Remove the empty link or provide text within the link that describes the functionality and/or destination of this link.
  The algorithm:
  An anchor element has an href attribute but contains no text (or only spaces) and no images with alternative text.
  Norms and Guidelines:
  2.4.4 Link purpose (in context) (level A)
• Redundant link
  
  What does it mean?
  Adjacent links go to the same URL.
  Why it matters:
  If adjacent links lead to the same place (e.g. a linked product image and an adjacent linked product name leading to the same product page), this leads to additional navigation and repetition for keyboard and screen reader users.
  How to solve it:
  If possible, combine the redundant links into one link and remove superfluous or alternative text (e.g. if a product image and a product name are included in the same link, the image can normally be given alt="").
  The algorithm:
  Two adjacent links go to the same URL.
  Norms and guidelines:
  2.4.4 Link purpose (in context) (level A)
• Link with incomprehensible link text such as 'more...' or 'here...'.
  
  What does that mean?
  A link is only read out by screen readers with the labels 'more...', 'here' or 'next' if the user navigates the page with TAB control.
  Why it matters:
  The context of the link remains hidden from the user, as the content consists of the link text alone. With TAB control, the textual context explaining the link is not read out. The aim or purpose of the link should be clear from the link text or can be determined from the direct context of the link.
  How to solve it:

  Use meaningful links. For example: 'Latest news from the BLOG Barrier-free' and not 'Latest news from the BLOG Barrier-free can be found here'. The whole text should be linked. This is the only way the user can get an idea of the linked content.
  The algorithm:
  A link text is ambiguous.
  Norms and guidelines:
  2.4.4a Informative link texts

Lists

• HTML structural elements for lists
  
  What does it mean?
  HTML structural elements for lists are to be used to mark up lists on the page.
  Why its important:

  The use of HTML structural elements ensures that the structure of a page is defined and accessible at an abstract level, regardless of the presentation.

  Users who are not comfortable with the default visual presentation of the elements on the page can then still find their way around, or they can apply their own more appropriate presentation.

  Possible uses of the structural elements for lists:

  Skip lists or list entries (screen reader user).

  Lists can adequately represent hierarchical structures

  How to solve it:
  Use HTML structural elements for lists.
  Norms and guidelines:
  1.3.1b Use HTML structural elements for lists.
  2.4.4 Link purpose (in context) (level A)

Navigation

• Consistent navigation
  
  What does it mean?
  Navigation mechanisms should be consistent within the website.
  Why its important: Uniform navigation within the website makes it easier to understand and find what you are looking for.
  How to solve it: The navigation on the start page often differs from the navigation on other pages because no area menu needs to be displayed there yet or because additional navigation options are only offered on the start page. If content is displayed via scripted layers, it should be checked whether this content is clearly different from other pages and page changes, as the usual navigation options (such as the browser's back button) are not equally effective here.

   

  Normen und Richtlinien:
  3.2.3a Consistent navigation
  3.2.4a Consistent designation

Operable

• (The Web Content Accessibility Guidelines (WCAG) encompass four fundamental principles of accessibility)
  
  User interface components and navigation must be operable.
• 2.1 Make all functionality available from the keyboard.
• 2.2 Provide users enough time to read and use content.
• 2.3 Do not design content in a way that is known to cause seizures.
• 2.4 Provide ways to help users navigate, find content, and determine where they are

Perceivable

• Perceivable (the four principles of WCAG 2.0 provide the foundation for web accessibility)

  Information and user interface components must be presentable to users in ways they can perceive.

• 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, symbols or simpler language.
• 1.2 Provide alternatives to time-based media.
• 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• 1.4 Make it easier for users to see and hear content including foreground and background.

Legal / Guidelines

• The basis of all legal requirements are the Web Content Accessibility Guidelines (WCAG) 2.1
• With the BITV 2.0, der Barrierefreien Informationstechnikverordnung des Bundes, there is basically a set of rules for Germany that almost completely corresponds to the minimum standards of the Directive. The minimum standard according to Article 6 of the Directive corresponds to WCAG 2.1 Level AA of June 2018.- gesetze-im-internet.de
• European Accessibility Act - On the 28. June 2019 the European Accessibility Act - EAA law enters into force. The EAA aims to improve the functioning of the internal market for accessible products and services by removing barriers created by different rules in member states. The Directive is to be transposed into national law by 28 June 2022 and must be applied - with exceptions - from 28 July 2025 onwards.

Pointer gestures

• Alternatives for complex pointer gestures
  
  What does it mean?
  For people with movement impairments, it is often difficult and sometimes impossible to successfully perform complex pointing gestures.
  Why its important:
  Therefore, when implemented by web content, such gestures should not be the only way to perform a function. Examples of complex gestures are swipe gestures from the edge to show menus, swipe gestures to move carousel content, drag gestures to adjust sliders, or multi-point gestures like the spread gesture to zoom in on a map section.
  How to solve it:

  Check whether the function that can be triggered via complex pointer gestures can also be triggered via simple pointer gestures such as tapping, double-tapping or tap-and-hold, for example by activating alternative static elements (e.g. buttons that move sliders, increase or decrease values, or show menus). For all complex gestures implemented in web content, there are alternative input options via simple pointer gestures.

  Norms and guidelines:
  2.5.1a Alternatives for complex pointer gestures

Responsive websites

• Pagination of the contents
  
  What does it mean?
  Page content should wrap at a browser window width of 320 CSS pixels (or at a browser window width of 1280 CSS pixels and 400% zoom magnification) so that all information and functions are available without users having to scroll horizontally.
  Why its important:

  Visually impaired users often enlarge page content using the zoom function available in common desktop browsers. Using a responsive design with CSS media queries, web pages should support the use with a strong zoom by dynamically adapting the page break.

  Responsive page layouts rearrange the content blocks. Multi-column content is usually broken up in such a way that it is arranged one below the other in a single column when zoomed in strongly. For continuous text, new line breaks with shorter lines are also created.

  The advantage is that users only have to scroll in one direction when reading (in western languages: vertically). If lines do not wrap when zoomed in, users are forced to scroll back and forth horizontally while reading each line, which greatly impairs and slows down the absorption of the content.

  How to solve it:

  If pages are not responsive, then they or the templates must be converted at great expense. There is no simple formula. By the way, you can easily find out whether the pages are responsive. In the browser, use the Web Developer Toolbar to set the viewport width to 320 CSS pixels (Resize -> Edit Resize Dimensions...) and reload the page. In this way, you can determine whether content wraps in such a way that use is possible without horizontal scrolling and no content or functions are lost. Alternatively, it is always good to test pages on a smartphone or tablet in different resolutions or orientations.

  Standards and guidelines:
  1.4.10a Content breaks down

Robust

• Robust (The four principles of WCAG 2.0 (Web Content Accessibility Guidelines)  form the basis of the guidelines)
  
  You must make sure your content can be interpreted reliably by a wide variety of user agents (including assistive technologies).
• 4.1 Maximise compatibility with current and future user agents, including assistive technologies.

Screenreader

• We use the following screen readers for our tests:
  
  - NVDA

  NVDA for Windows (NVDA is currently the best open source screen reader for Windows Vista, Windows 7, Windows 8.1 and Windows 10. It supports SAPI4, SAPI5, MS Speech Platform SDK (SAPI 5.3, 5.4) and some speech output directly. Likewise, NVDA supports many braille displays directly and many via the BRLTTY driver. NVDA is very easy to install on a USB stick and is therefore very suitable as a mobile screen reader (http://nvda.bhvd.de)

  
  A good guide to using NVDA can be found on the pages of 'Simply for All' (https://www.einfach-fuer-alle.de/artikel/screenreader-NVDA/)
  
  - VoiceOver on iPhone/iPad and Mac (VoiceOver is not a separate screen reading function. It is an integral part of macOS and all integrated apps on the Mac. https://www.apple.com/de/accessibility/mac/vision/)
  
  - There are also other screen readers on the market, such as the screen reader JAWS, which we use in our student workrooms.
  
  - Wikipedia-Artikel on Screenreader
  - Helpful page on the use of screen readers: Screen Reader Keyboard Shortcuts and Gestures

Sensory characteristics

• Usable without reference to sensory characteristics
  
  What does it mean?
  References to content on the page should not exclusively use sensory features such as colour, shape or position, but should also be understandable without specific sensory perceptions (for example by referring to the headline of content).
  Why its important:
  Also, the reference to the shape, colour or position of certain page content is not useful for blind users and also users who see the page without the provided stylesheet or on other output devices.
  How to fix it:
  Avoid the following expressions:
• Click on the green button to ...
• Click on the round button to...
• The box framed in red contains info on ...
• Click on the menu on the right...
• The wide column contains...
• The right-justified paragraphs show... Such references cannot be understood without the perception of sensory features.

This also applies to alternative texts of information graphics: they should convey all information relevant for understanding not only by reference to sensory features

Norms and guidelines:
1.3.3a Usable without reference to sensory characteristics

Quotations

• HTML structural elements for quotations
  
  Please use the HTML structure element blockquote to mark-up quotations that are to be presented as independent text sections.
  1.3.1c HTML structural elements for quotations

Skippable

• Navigation, search or page content can be skipped
  
  What does it mean?

  Only if a website has meaningful section headings (HTML structure elements h1 to h6), jump links are available and HTML5 elements for marking up sections (header, nav, main, aside, footer) open up the page structure and WAI-ARIA document landmarks structure the page sections in a meaningful way, then the page is also usable for users who cannot use the visual order. Frames and iframes also need a meaningful title attribute.

  Why its important
  Users who cannot use this visual order - for example, because they are blind or can only see a small section of the page - depend on the structure being accessible and usable regardless of how it is displayed on the screen. The use of (often invisible) section headings, jump links or HTML5 elements to mark up regions is an essential prerequisite for this.
  How to solve it:
  Users should use section headings, jump links, HTML5 elements for regions or WAI-ARIA document landmarks. Constant areas at the top of the page, such as navigation or page header, skip to go directly to content, switch between areas, should be available.
• Norms and guidelines
  2.4.1a Areas can be skipped

Tables

• Layout-Tabelle
  
  What does it mean?
  A layout table is available.
  Why its important:
  Layout tables are only used to position content visually, i.e. to create columns, insert spacing or align content properly for visually impaired users. Their content is not tabular in nature. Layout tables should not be used in HTML5. They can raise issues of reading and navigation order. Screen readers may interpret them as data tables (i.e. announce column and row numbers), especially if they contain table header cells (<th>). This results in a significant overhead for screen reader users.
  How to fix it:
  In almost all cases, layout tables can be replaced by other HTML elements and formatted with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header cells (<th>). If the layout table remains, check that the reading and navigational order of the table content is logical (based on the underlying source code order) and give it the role="presentation" to ensure that it is not identified as a table to screen reader users.
  The algorithm:
  There is a <table> element that does not contain header cells (<th>).
  Standards and guidelines:
  1.3.1g No structure markup for layout tables
  1.3.2a Useful order
• Data tables correctly structured
  
  What does that mean?
  Data tables are structurally correct, row and column headings are marked with th.
  Why its important:

  For orientation in a data table, visually oriented people use not only the headings but also the value range, if necessary. It is therefore relatively easy for them to recognise and deal with structural deficiencies, for example changes in the meaning of rows or columns.

  Visually impaired and blind users, on the other hand, tend to access the data tables analytically. They develop an idea of the structure of the table based on the headings and other information available in the context. This idea is the basis for accessing the data offered.

  
  How to fix it:For this to be possible and work, two conditions must be met:

1. The table must have a clear structure, the meaning of the rows and columns must be graspable, and it must be as easy as possible to infer from the headings or supporting contextual information.

2. The headings must be findable and it must be clear to which data they refer, i.e. they must be correctly labeled.

   The clear structure is the basis of accessibility of data tables. It is not possible to make a poorly structured data table accessible by special labeling. However, based on a clear, understandable structure, correct labeling is useful and important. Possible applications of table heading markup:

• The screen reader informs about the position and number of rows of headings.
• The screen reader reads out the (new) row or column heading when the user changes the table row or column.
• Headings are highlighted in a form more suitable for the*user*.
  Notice:
  For screen reader users, complex tables are harder to grasp than simple ones, even with perfect markup. It is therefore recommended to avoid tables with multiple logical levels (see question on tables with multiple logical levels). In many cases, complex tables can be split and replaced with multiple simple tables.
  
  Standards and guidelines:
  1.3.1e Data tables properly constructed.
  1.3.1f Assignment of table cells

Testing

• Testing accessibility
  
  The following tools and environments are used:
  
  - Test Siteimprove  (extension in Chrome)
  
  - Test WAVE (extensions in Chrome)
  
  - ContrastAnalyser - test programs to test contrasts under Windows and macOS
  
  
  Screenreader
  
  - Test VoiceOver Mac/iPad/iPhone 
  
  - NVDA (Windows Program http://nvda.bhvd.de/)

detailed information on our test page

Textsize

• Text is very small
  
  What does it mean?
  The text is too small.
  Why its important:
  Text that is very small is difficult to read, especially for people with low vision.
  How to solve it:

  Text should be able to be changed by up to 200 per cent without losing content or functionality. One of the following requirements should be met:

• With the browser's zoom function, the entire layout can be enlarged in proportion to the font size.

• With the text-only magnification in the browser, the text can be enlarged.

• The font size can be enlarged via a control element on the page.

  The algorithm:
  There is text that is 10 pixels or smaller.
  Norms and guidelines:
  1.4.4a Text can be enlarged to 200%

Text wording

• Simple and clear language is important. It needs to be understandable for all users who read your site.

• We use abbreviations every day, but they may be incomprehensible to others. Avoid those, except for example 'PDF' or 'CD' as well as 'No.' or 'etc.'. Everything else should be written out in full.

• Explain technical jargon and foreign words

• Text is easier to read if it is split into short paragraphs and if you employ good typography and design. Use bullet points, headings and bold text. But don’t use too many of them, as this can make the text look confusing again.

• Links should be clear and unambiguous with a meaningful link text, so avoid using terminology such as 'here' or 'more'

• Clear page titles help users to understand the context of the webpage and a correct heading structure allows users to navigate through the website.

Time

• Time limits adjustable
  
  What does it mean?
  Page content is displayed without a time limit, a time limit can be turned off, or it can be extended.
  Why its important:

  Auto-refreshing by reloading a page can interrupt the reading of the page content to screen reader users and suddenly start again.

  With delayed redirects, users are supposed to read something before being redirected to another page. The time limit makes the page displayed in between inaccessible for many.

  If time limits cannot be turned off or extended, users who need more time to enter data often cannot complete online transactions in time.

  How to solve it:
  It must be possible to switch off a time limit.
  Normen and guidelines:
  2.2.1a Time limits adjustable

Title

• Meaningful website title
  
  What does it mean?
  Page titles designate the content of a page; here, care should be taken to choose a title that is as clear as possible.
  Why its important:
  Incorrect or generic page titles and decorative typographical elements are read to screen reader users and prevent orientation.
  How to solve it:
  The document title contains two components: a general designation of the website that is always the same and a distinguishing, individual designation of the respective page.
  Norms and Guidelines:
  2.4.2a Meaningful document titles

Type graphics

• Waiver of font graphics
  
  What does that mean?
  Graphics should not be used to display fonts. Logos are excluded from this.
  Why its important:
  Font graphics that are integrated as bitmap graphics (e.g. as JPEG, PNG, or GIF) cannot be adapted to user requirements, or only to a limited extent. Their colours cannot be adjusted individually, nor does the individual adjustment of the font size affect graphic fonts. And when zoomed in, the font edges become blurred..
  How to solve it:
  Fonts should always be scalable and embedded as a font type. If you can select and copy text, it is not a graphic.
  Standards and guidelines:
  1.4.5. Type graphics

Understandable

• Understandable (the four principles of accessibility provide the foundation for web accessibility)
  Information and the operation of the user interface must be understandable
• 3.1 Make text readable and understandable
• 3.2 Make web pages appear and operate in predictable ways
• 3.3 Help users avoid and correct mistakes

Visible/ invisible

• Hide content
   

  Sometimes content on web pages needs to be hidden. Content that is displayed contextually or only later as part of a process should initially be hidden from any user. Hiding content is also a classic technique in accessible web design, but then it is usually a matter of providing additional content for screen readers only. The different reasons for hiding content require different implementation techniques. Here is a quick and simple solution.

  Note: in the Roxen Text&Picture component, this source code is automatically modified with html source windows, so use the RXML component for the HTML code.

  Code: <span class="">Angezeigter und vorgelesener Text <span aria-hidden="true">Nur am Bildschirm</span><span class="sr-only">nur für Screenreader</span></span>

  Zu beachten: Some screen readers (NVDA, Voice Assistant Windows) read the screen reader text correctly, but VoiceOver in the Mac does not, here both variants are read aloud. For the use of the aria-hidden="true" element, see the following page: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefrei-verstecken#aria-hiddentrue

  More information: https://www.barrierefreies-webdesign.de/knowhow/verstecken-von-inhalten/
  
  
  Alternative with CSS: The most common of all techniques circulates in several variants and uses a combination of different CSS settings to remove content from the visible area but still leave it detectable for screen readers. An element given the CSS class 'visually-hidden' becomes invisible to screen readers by the following CSS rule:
  
  .visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px; }
  
  the corresponding code looks like this:
  
  <a href="barrierefrei-verstecken.html"> Mehr erfahren <span class="visually-hidden"> über Techniken zum barrierefreien Verstecken </span> </a>

• More details on this variant can be found at: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefrei-verstecken

WAI-Area

• WAI-Area
   

  Note: WAI-ARIA is supported by some screen readers, but not all and not fully. So caution is advised! Of the three attributes, aria-describedby still currently works the best. Accessible Rich Internet Applications (ARIA) allow web developers to make web content and web applications (especially those using Ajax and JavaScript) more accessible to people with disabilities and other impairments. For example, ARIA can be used to add navigation landmarks, JavaScript widgets, form hints and error messages, and to make live content updates accessible. ARIA is a set of special accessibility attributes which can be added to any mark up, but was developed primarily for HTML. The role attribute defines what the general type of element an object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or indicates the current value in the progress bar. If there is an HTML element or HTML attribute that has the required semantic element or behaviour, then HTML should be used and not ARIA. You should not change the semantics of HTML with ARIA. The vast majority of ready-made widgets have nothing to do with accessibility and sometimes even lead to unusable widgets if ARIA is used incorrectly. ARIA is supported in most browsers and screen readers. However, its application varies depending on the operating system, browser and screen reader used. In older technology, support can be lacking or non-existent. It is best then to stick to ‘safe’ ARIA as this will ensure that the user will not encounter problems if support is poor, or be prompted to update to new technology, for example.

• You can find an introduction to ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
  
  Name, role, value
  
  What does it mean?

  Standard HTML controls such as links (a-element) and form elements (input, button, checkbox etc.) have names, roles, values and states, provided they are implemented according to the specification and are generally recognisable for aids such as screen readers. For example, blind users will notice when they tab to a link and can then follow it. States, for example of a checkbox (selected or not selected), are also communicated. Interactive buttons should therefore be implemented with the help of suitable HTML elements so that their meaning is clear.

  Why its important

  If unsuitable (because non-semantic) elements (such as div or span) are converted to links or control elements with the help of JavaScript, the semantics can be provided with the help of WAI-ARIA. This also applies to components (widgets such as tab panels, accordions, etc.) that are not available in native HTML and are implemented with the help of non-semantic elements and scripts. WAI-ARIA attributes help to understand these by transmitting semantic information from the browser to the assistive technologies.

  Norms and Guidelines:
  4.1.2a Name, role, value available