Web development without limits part 3: Practical guide for accessible design

In order to develop accessible websites, it is helpful to take user needs into account. This final part of the series looks at how this can be achieved.

listen Print view
Green button with the word Barrier-free on the keyboard

(Image: Robert Kneschke/Shutterstock)

11 min. read
By
  • Nele Maskut
  • Marie-Christin Lueg
Contents

Accessibility does not just mean complying with laws and guidelines and implementing technical measures. Rather, a change of perspective is needed so that developers and users can contribute to greater participation. This is the subject of the final part of the series of articles on accessible design.

Marie-Christin Lueg
Marie-Christin Lueg

Marie-Christin Lueg arbeitet als Wissenschaftliche Mitarbeiterin im Fachgebiet Rehabilitationssoziologie der TU Dortmund. Ihr Schwerpunkt liegt im Bereich digitale Teilhabe und partizipative Forschung.

Nele Maskut
Nele Maskut

Nele Maskut ist Lehramtsanwärterin an einer Förderschule mit dem Förderschwerpunkt Geistige Entwicklung. Ein besonderes Anliegen ist ihr die Förderung der digitale Teilhabe von Menschen mit Behinderung.

Barrierefreiheit: Webentwicklung ohne Grenzen

The four basic principles of perceptibility, usability, comprehensibility and robustness help to implement and test individual functions in web development, such as the formal and linguistic design of a website (see part 2 of the series). Content management systems (CMS) and developer tools make it easier to implement accessibility in accordance with the current guidelines described in Part 1. These are important basic requirements for digital accessibility. In order to make software products consistently accessible and usable for everyone, we advocate going one step further and incorporating the perspectives and wishes of users to a greater extent.

In real-life use, individual needs do not just differ rigidly between different people and user groups. The needs of a single person can also vary depending on the situation or the type of day, for example. Individual and flexibly adaptable solutions are therefore required here. A particular challenge is the implementation of accessibility for people who have difficulty understanding complex (linguistic) content and structures. This applies not only to people with cognitive impairments and learning difficulties, but also to those who have experienced displacement, have poor reading and writing skills, have perceptual impairments or age-related limitations. These groups of people need simplified websites adapted to their individual needs. To illustrate this, we would like to introduce you to three people:

(Image: Freepik)

Paul works as a project manager. As a person on the autism spectrum, he finds websites that appeal to too many sensory impressions at the same time and that require him to engage with a new layout on every website challenging. He finds decorative images and advertising content particularly distracting. He would like to be able to switch off such content after a quick check and set a view of the text that looks the same on all websites.

(Image: Freepik)

Julia likes to visit cooking sites on the Internet in her free time. As a person with learning difficulties, she doesn't always understand all the ingredients and instructions. She often gets lost in the list of ingredients when reading and is unable to prepare many recipes. She would like to be able to call up additional information on individual words, for example to obtain alternative explanations or pictures. She would also like help finding the last line she read.

(Image: Freepik)

Enrique is an international student at a German university. Much of the information on the university's website is at least translated into English so that he can understand it. However, he repeatedly comes across German-language websites or passages. He would like to be able to translate texts directly on the website and to be able to use explanatory aids for words that are still unfamiliar to him.

The people listed are examples of many other people whose needs and individuality should be taken into account when implementing digital accessibility. As already discussed in detail in Part 1, the following also applies in this case: everyone benefits from additional accessibility settings –, from readers with learning difficulties to average visitors and web developers themselves.

There are now a number of software tools that adapt websites to people's individual needs. The best known of these are probably overlay tools that can be integrated into existing websites. These tools can make websites more accessible and usable for many people. However, overlay tools themselves are not always implemented barrier-free and are therefore not always compatible with the aids used, such as screen readers. In addition, the tools differ from one another in terms of their placement and tools, meaning that users have to familiarize themselves with the relevant overlay tool anew for each website. This can be time-consuming and distracts from the actual content of the website. More information on overlay tools is available here: BITVTest (2022), Barrier Compass (2022) or bfit-bund (2024).

A different approach was taken when developing the Easy Reading software tool in a research project together with people with learning difficulties. The prototype of the Easy Reading Toolbox is available as a browser add-on for Mozilla Firefox and Google Chrome and can be downloaded free of charge from the project website. The tools can be used on any website and thus enable user-centered control of the adaptations. But what exactly does that mean?

In principle, users can use the various functions to adapt any HTML-based website to their current support needs. As the adaptations only ever apply to the current browser view, they can return to the original text and view at any time. Content is not lost as a result of the adaptations, as is the case with Easy Reading translations, which are only available for certain information. The aids in Easy Reading are divided into four functional areas: Reading aids, Explanatory aids, Design aids and Translations (see Figure 1).

An overview of the functions of Easy Reading (Fig. 1).

Screenshot of the desktop version of Easy Reading. The reading ruler and symbol search functions are activated (Fig. 2).

Screenshot of the mobile version of Easy Reading. The reading ruler, line spacing, change color and translation functions are activated (Fig. 3).

Easy Reading does not require a website to be accessible. However, the add-on works most reliably if the websites are implemented in HTML5 in accordance with the standard.

Notes on Easy Reading

The Easy Reading software tool was developed as a prototype as part of a research project that has already been completed, meaning that some functions can no longer be executed correctly due to the further development of technical standards. The code of the Easy Reading framework was published as an open source repository on GitHub at the end of the project. The community is cordially invited to participate in the further development.

How is it possible to identify and take into account needs and barriers that go beyond legal guidelines –, especially when there is a lack of contact and experience with people with disabilities? How is it possible to check what assistance a website should offer in order to be accessible to as many people as possible?

Orientation towards the experiences and needs of the end users plays a decisive role. However, the involvement of people with disabilities in the design and development of new technologies and technical systems is often limited to individual steps. They are consulted at the very beginning of a project or involved in usability tests to evaluate the end product[1, 2]. However, a successful development process should continuously include the perspective of the relevant user group in order to identify and consider individual challenges and needs as early as possible and throughout the entire process. So-called participatory projects involve the target group, i.e. the people directly affected by the research and development results, consistently and on an equal footing in every research and development step[3].

Easy Reading is one example of how worthwhile participatory projects can be: through consistent joint development and testing of the Easy Reading system with people with learning difficulties, functions have been created that meet the specific needs of the target group and also offer benefits for other people. In this way, individual solutions can be created to improve accessibility for individual needs that had previously been given too little consideration.

Greater involvement of people with disabilities in software development is necessary in order to create usable products for this group of people. Some institutions and their services actively promote the participation of people with disabilities. Anyone who has questions about the barrier-free implementation of websites, would like to have their website checked for accessibility or is interested in working together can contact these institutions.

In Germany, the PIKSL laboratories are a particularly positive example. Their aim is to bring people with and without disabilities together to promote inclusion and innovative ideas. PIKSL labs are currently organizing workshops for people with and without disabilities at twelve locations in order to strengthen media skills and digital participation. They also offer advice on implementing accessibility and testing products for comprehensibility. More information on the offers can be found on the website.

The aim of the "Web development without limits" series of articles is to provide an overview of digital accessibility. Making websites accessible as a matter of course is not only a necessary challenge, but also a worthwhile one.

It is essential to view accessibility as an ongoing process in which people with disabilities are involved. Like other aspects of a website or digital application, the tools for implementing accessibility must be continuously reviewed and improved –, especially when new technologies are used and new content is added. This is the only way to ensure that the effort involved in implementing accessibility is profitable and benefits everyone in the long term.

Accessible websites and accessible digital applications enable all people, regardless of their disabilities, to participate in the digital world on an equal footing. For developers, this means that they can significantly expand the group of people who access digital content – provided that they are aware of the potential needs of users and meet them with accessible solutions.

  1. Dirks, S. (2019). Empowering Instead of Hindering – Challenges in Participatory Development of Cognitively Accessible Software. In: Antona, M., Stephanidis, C. (eds) Universal Access in Human-Computer Interaction. Theory, Methods and Tools. HCII 2019. Lecture Notes in Computer Science(), vol 11572. Springer, Cham. https://doi.org/10.1007/978-3-030-23560-4_3
  2. Heumader, P., Edler, C., Miesenberger, K., & Wolkerstorfer, S. (2018). Requirements Engineering for People with Cognitive Disabilities – Exploring New Ways for Peer-Researchers and Developers to Cooperate. Computers Helping People with Special Needs, 439–445. doi:10.1007/978-3-319-94277-3_68
  3. Hartung, S., Wihofszky, P. & Wright, M. (2020). Participatory research. A research approach to health and its methods. Springer: Wiesbaden. https://doi.org/10.1007/978-3-658-30361-7

(afl)

Don't miss any news – follow us on Facebook, LinkedIn or Mastodon.

This article was originally published in German. It was translated with technical assistance and editorially reviewed before publication.