Introduction
For visually impaired and blind people, using assistive technologies, such as a screen reader, is the only way to use a website independently. For screen readers to read visually recognizable content without problems and for a website to be usable, numerous aspects must be considered during implementation. However, the WebAim Report 2024, which relates to automated web accessibility, reveals innumerable shortcomings. The WebAim Screen Reader Survey shows similar results. A lack of awareness of why web accessibility is important and inadequate web accessibility tutorials are why web accessibility is often ignored in practice. This web accessibility platform was created as a result of a diploma thesis project at TU Wien and is constantly being expanded.
Hint: If you want to enter subpages of the tutorials, you have to accept cookies beforehand. After that you also will be forwarded on this page. Then you can see all the tutorial subpages!
A person in a wheelchair and other children without wheelchairs are standing in front of a snow-covered staircase to a building. There is a ramp and steps. Another person is shoveling the steps. The wheelchair user asks the person with the shovel to clear the ramp, but he replies that he will clear the snow from the steps first, as many children are waiting, and then he will clear the ramp. The wheelchair user then tells him that everyone can enter the building if he clears the ramp.
About the Tutorials
Goal
These tutorials, in addition to general descriptions and other linked resources, aim to convey the basics of accessible web development. Simple examples relating to the section topic are provided for each subsection by integrating a Codepen Online Editor. These are available in both poor and good accessibility.
The visual representation hardly differs. The differences are conveyed textually, visually, and audibly using NVDA screen reader outputs. The focus here is primarily on the semantic code implementation, which aims to show that good code semantics have no negative impact on the visual appearance. The design is a matter of CSS implementation.
Hint: These examples should only help to understand web accessibility and promote awareness. However, no liability is assumed for the correctness of all content.
To ensure that poor accessibility code is not used, only the source code of the good accessible examples is offered for download.
Structure
There are several pages in the “Tutorials” submenu (e.g., “Introduction”, etc.). A general overview page with explanations and resources is displayed if you select these. At the beginning of the main area, you will find a submenu with links to further tutorial pages. If you choose one of these, a short explanation and sometimes descriptions of the tutorial examples are provided at the beginning. This is followed by two sections, “Poor Accessibility” and “Good Accessibility”. Each contains a codepen integration, an explanation, a playable NVDA screen reader output, and a downloads section.
Codepen User Manual for Screenreader Users
- Within “Poor Accessibility” and “Good Accessibility” there is a section entitled “Source Code (codepen-integration)”, where an implemented
online editor example is embedded. Depending on the implementation, a preview view of several files (e.g., HTML, CSS, JavaScript) and a “Result” preview view are attached.
These are implemented like tabs as toggle buttons. In addition to the “Result”, only one source code preview view can be accessed at a time using the screen reader.
- To view the HTML code, for example, select it by pressing Enter when you reach the toggle button (“pressed” means this area is displayed visually).
You can get the next toggle button using the Tab key, e.g., CSS. If you select this, other toggle buttons within the list are deactivated again.
- You are then taken to a list with two elements. The first entry is the “Result” toggle button, which refers to the preview view of the implementation.
With the second entry, you can skip the entire preview view and land on the interactive field “Resources”, where you should continue typing until you reach the screen reader output and thus skip the Codepen integration.
- If you do not select the second link in the list next to Result, the link “Edit on Codepen” follows in the focus sequence. After this link, the focus is set to the source code preview view of the previously selected toggle button, e.g., HTML, and read out. The source code can be read out line by line using the arrow keys.
If you read out this area sequentially, you will reach the result preview, where you can read out the rendered result of the implementation. When you reach the “Resources” button, you are outside the preview view and should continue typing until you reach the playable screen reader output in the “NVDA Screenreader Output” section.