Who benefits from accessibility?
For people with disabilities, accessibility is indispensable to be able to use offerings
on the internet. Whether people with visual impairments, motor impairments or hard od
hearing or deaf: They all have different requirements and needs that should be taken
into consideration. However, it's not only people with permanent disabilities who
benefit from it. Even in the case of situational or temporary limitations – such as
strong sunlight, forgotten headphones or a broken arm – accessibility makes using a
website easier. Furthermore, it is associated with good usability and user experience,
thus bringing advantages for people without disabilities as well.
How can I make my web offering accessible?
Perceptibility, usability, intelligibility and robustness: the four principles of
accessibility should be considered when implementing accessible web offerings. To adhere
to these principles, there are various criteria that can be used as guidelines. A small
selection is presented below. For those seeking more detailed information, a
comprehensive list of criteria can be found in the WCAG (Web Content Accessibility
Guidelines) and further details in the BITV 2.0 (Barrier-Free Information Technology
Regulation).
Keyboard usability
An important aspect regarding the design of accessible web offerings is keyboard
usability. Especially for blind individuals or people with motor impairments, it is
crucial that all interactive elements can be accessed using the keyboard (tab or arrow
keys). The focused element should be clearly indicated, for instance, by an outline.
Additionally, attention should be paid to a coherent and in an expected order in which
the elements are focused
High contrast
High contrasts between foreground and background colors should be used to facilitate
access to content for people with visual impairments. The WCAG provides guidelines on
when a contrast is sufficient and when it is not. The contrast ratio can be checked, for
example, using the Colour Contrast Analyser."
Figure 1: The Color Contrast Analyzer shows that the
color contrast between blue background and white font for large text in the
compliance level AAA is sufficient.
Display in high contrast mode
Windows operating systems offer a high contrast mode that can be used by people with
visual impairments. Windows operating systems offer a high contrast mode that can be
used by people with visual impairments. For instance, this might give the page a black
background, white text, and yellow links. It is important to check, for example, whether
logos or icons are recognizable and if focus indicators are visible.
Scalability
For people who need to enlarge the content of a webpage to perceive it, adequate
scalability is essential. Texts should not get cut off and unintended horizontal
scrolling should be avoided. If responsiveness is a priority in implementing a web
offering, this point is usually automatically addressed."
Correct syntax and semantics
People with impairments often rely on assistive technologies to access web offerings.
These technologies interpret the code and present the content in a way understandable to
the person. An example of this is a screen reader, which reads out the web content
through speech output or a Braille display, making it perceivable for the user. Using
correct syntax and semantics is necessary for the screen reader to interpret the content
correctly. For instance, suitable HTML tags should be used for a button, a list or
navigation elements.
Negative example:
<div class=„button-primary“>Start test</div>
Positive example:
<button type=„button“ class=„button-primary“>Start test</button>
Additionally, images and graphics that are relevant to the content require meaningful
alternative text.
Example:
<img src="swing.jpg" alt="Girl sitting on a swing">
A correct heading hierarchy is equally important: Each page should contain only one
<h1>-heading. An <h1> is followed by an <h2>,
followed by an <h3> and so on. No level should be skipped.
Negative example:
<h2></h2>
<h4></h4>
<h4></h4>
Positive example:
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2>
<h3></h3>
Using browser extensions such as Google Lighthouse, Axe DevTools, or WAVE allows criteria
such as HTML structure to be checked. To test if the website is optimized for assistive
technologies, screen readers like NVDA (Windows) or VoiceOver (Mac) can be used.
Conclusion
As the points described above demonstrate, many barriers in your own web offering can be eliminated with minimal effort. This not
only enables accessibility for people with disabilities, but also enhances the user experience.
References and helpful links