Web accessibility for everyone!

The second Frontend Rhein-Neckar Meetup at UEBERBIT on 25. July 2018. In this additional series of articles we want to take up the topic again and take a comprehensive look at it.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. [1]

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The Web offers humanity unprecedented access to information and interaction. About 3.5 billion people have access to the medium, which can be used regardless of hardware, software, language, culture, location, physical or cognitive abilities.

About 15% of the world's population lives with some form of disability. [2] The following article is intended to create awareness of how to recognize the usual barriers on the web and how to successfully remove them.

As web developers, designers and editors, we can support social inclusion for people with disabilities. Incidentally, a majority of these people spend more time per week on the Internet (6.5 days) than the average user without disabilities (5 days). [3]

Before we get into specific barriers, it's useful to be aware of the types of impairments. This context is necessary to understand why barriers arise in the first place.

What impairments are our users affected by?

When creating web applications, the users should always be the focus. It is therefore necessary to deal with the challenges and physical impairments of the users. This is the only way we can get a better understanding of possible problems when using our application. In general, we can divide impaired users into four different categories. [4]

👓 Visually impaired
These can be blind, visually impaired or just aging people. (e.g. myopia, color blindness, glaucoma, albinism)

🔇 Auditory Impaired
The Internet is a visual medium, but closed captions and fallbacks for sound-required media must be considered for hearing-impaired users. (e.g. presbycusis, acoustic trauma, auditory processing disorder, otosclerosis)

Motor impaired
People with motor disabilities typically use a wide range of assistive technology from specialized keyboards to eye trackers to use individual buttons to navigate their computer (e.g. RSI, cerebral palsy, Parkinson's, muscular dystrophy).

📖 Cognitively Impaired
Refers to the simple processing of information (e.g. Down Syndrome, Autism, Global Developmental Delay, Dyslexia).

Another perspective is offered by the subdivision into permanent, temporary and situational disabilities.

Permanent, temporary, situational

Permanent, Temporary, Situational

People with permanent disabilities have been suffering from one of the above impairments since birth or after an accident or illness.

When we talk about temporary disabilities, we are talking about limitations that only affect a person for a certain period of time (examples: breaking your arm, taking certain medications, dead spots).

As situational disabilities we describe circumstances in which we are often only impaired for a very short period of time, but still need help (examples: only having one hand free, loud ambient noise, blinding sunlight).

Being barrier-free on the web therefore means not only setting color contrasts or font sizes correctly. Being accessible means doing everything possible to make our application usable for everyone. Regardless of what form of disability he or she is struggling with.


Web accessibility is a broad topic, so it makes sense to categorize these barriers. [5] The different barrier types are also subject to different areas of responsibility.

🔧 Technical-functional barriers

By not complying with or using outdated technical standards or the use of fundamentally accessible technologies such as Flash or Java applets, we not only endanger the security of our users, but also the usability of accessibility tools. With the use of established and open standards and the exclusion of the above-mentioned technological hurdles, we can significantly upgrade our solutions.

In order to be able to map all hardware and software requirements of the client systems, the “Progressive Enhancement” model should be taken into account in the design process, for example technical fallbacks (fallback mechanisms). .

These barriers are the responsibility of the web developer and are checked by various requirements. In the next part of our blog series, we will go into more detail about these catalogs of requirements.

🖌 Design Barriers

By design barriers we mean all barriers that arise from visual impressions such as suboptimal contrasts, color relationships or animations. Non-responsive designs also represent a barrier for a majority of our users. [6]

By adhering to simple design principles, barrier-free designs can be developed through clearly structured, easily understandable layouts, through targeted color and contrast ratios and sufficiently large, easily legible fonts.

Web designers are responsible here. They should find out about the WCAG or BITV guidelines before the first brushstroke takes place.

Editorial & content barriers

📝 Editorial and content barriers

Editorial and content-related barriers pose problems, especially for users with reading and spelling difficulties. The W3C describes the impact of plain language on affected individuals on its How People with Disabilities Use the Web page. [7]

Linguistic complexity often arises from missing text structures, nested sentences, cumbersome formulations or technical terms. We all benefit from easy-to-understand language, thanks to easy-to-understand structures such as heading hierarchies, useful structures and simple, logical sequences.

Pictures, films and animations should also be provided with alternative descriptions and subtitles. Not only to optimize for reading software, but also to illustrate complex relationships.

💡 Draw attention, step by step

Another great way to improve things quickly is often in organizational hands. With a focus on platform independence and an orientation towards the widest possible range of users, we can draw the attention of stakeholders to consider physical, mental and social components.

We are already attaching increasing importance to different output formats and usage scenarios (desktop, PDA / smartphone, assistive technologies) - it's about time that we also took reading, writing and language skills into account.

At this point I would like to thank Joschi Kuphal for the great work and support. He gave us [strong support] in researching this topic (http://basics.workshop.accessibility-club.org/de/latest/). On November 5th he is hosting the "Accessibility Club Conference" in Berlin - a full day conference with about 150 participants, 4-5 handpicked speakers and a few other community contributions.

Continue reading

Easy for everyone

The ›Einfach für Alle‹ (EfA) initiative was started in 2000 by Aktion Mensch. It is aimed at providers of websites and agencies who want to be convinced that they too can benefit from barrier-free Internet.


The Web Accessibility Initiative

The World Wide Web Consortium's (W3C) commitment to driving the Web to its full potential includes promoting a high level of usability for people with disabilities. The Web Accessibility Initiative (WAI) is an initiative of the W3C. WAI develops its work through the W3C consensus process, which involves various stakeholders in web accessibility. These include industry, disability organizations, government agencies, accessibility research institutes and more.



  1. https://www.w3.org/standards/webdesign/accessibility ↩︎

  2. http://www.who.int/disabilities/world_report/2011/report/en/ ↩︎

  3. https://www.einfach-fuer-alle.de/studie/ ↩︎

  4. https://www.w3.org/WAI/people-use-web/abilities-barriers/ ↩︎

  5. https://accessibility-club.org/archive/20180629/slides/#40 ↩︎

  6. https://www.microsoft.com/design/inclusive/ ↩︎

  7. https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent ↩︎