Seven rules on how to avoid common accessibility issues:
1. Alternative text for graphics
Without alternative text, graphic images remain invisible for people with visual impairments. Do not forget to use ALT tags
2. Alternatives for multimedia content
Audio and video content must also be presented in an alternative format, otherwise this content cannot be perceived by people with hearing or visual impairments.
3. Structure of text content
All elements that make up a website must be well structured such as headlines, paragraphs and lists of tables. Here Roxen17 (the CMS of Bielefeld University) can be of help in structuring the page components. However, you will still need make sure you use appropriate HTML structural elements in the free text field and avoid building in bugs/errors.
Clear links help to ensure the website is accessible and user-friendly. The link should clearly identify the target of the link and describe any different file formats such as PDF.
Linked files such as Word, PowerPoint or PDF files should also be accessible.
6. Colour and colour contrast
Colour is often used to convey information, e.g. to show a sale price or a curve on a graph. Here lurks another accessibility issue– people with colour blindness and those with visual impairment will struggle to understand this information. Pay attention to the contrast on your webpage.
7. Write simply
Writing clearly increases the usability of your site and makes it more accessible for everyone.
Here you will find a list of the most important terms for the accessibility of websites. You will also find explanatory videos, which will be added to over time. As Bielefeld University uses the Roxen CMS content management system, the videos will also specifically address this.
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.
The BITV-test is a reliable and comprehensive accessibility evaluation procedure for websites and applications.
The individual test steps and explanations can be found in this overview under the points "Standards und Guidelines".
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
Alternative: Contrast Checker (https://webaim.org/resources/contrastchecker/)
Further information on barrier-free contrasts: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-kontraste
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.
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.
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>
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:
More info: https://www.html-seminar.de/html-befehle-details-summary.htm
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>
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
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:
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: "Wirtschaftswissenschaften" 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.
The image remains blank, there is no description
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
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).
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:
How to solve it:
Standards and Guidelines:
1.4.13a Faded in content operable
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:
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.
A link text is ambiguous.
Norms and guidelines:
2.4.4a Informative link texts
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 structuresHow to solve it:
Normen und Richtlinien:
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.
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:
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:
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)
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
The content of the site is based on the BITV-Test of BIK and the English notes of the test environment of the WAVE Web Accessibility Evaluation Tools and were translated using deepl.com
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
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:
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.
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:
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:
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:
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:
clip: rect(0 0 0 0);
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
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
Norms and Guidelines:
4.1.2a Name, role, value available