Website accessibility

Table of contents

    1. Accessibility statement
    2. Checking accessibility
    3. Improving accessibility

To ensure that all users, regardless of their limitations or technical capabilities, can use a website without restriction, it should be designed with as few barriers as possible. To assist you with this goal, you will find various kinds of information on accessible website design below:

Accessibility statement

Regardless of whether a website is already accessible or not and whether it is publicly accessible or only accessible internally, an accessibility statement must be published for every TU Dresden website. This statement must identify, among other things, the parts of the content that, in exceptional cases, are not designed to be fully accessible for people with disabilities. In addition, an electronic point of contact must be provided for reporting barriers that still exist as well as to request information on accessibility implementation. It is best to use the following templates, which contain additional helpful tips and information:

The central Accessibility Statement applies to all web pages in the WebCMS of TU Dresden.

Checking accessibility

In order to fully complete the accessibility statement, you must have your website audited for accessibility. You can either commission a fee-based BITV Test or carry out a BITV self-assessment on your own. To identify at least basic barriers on your website, you can also do some simple accessibility self-tests or quick tests from the W3C Web Accessibility Initiative.

For both the BITV self-assessment and the quick self-tests, the browser extension “Web Developer Toolbar” (for Firefox and Chrome) can help you manually examine individual aspects of the website. In addition, some tools can automatically check individual pages:

Please note, however, that these tools usually only cover a small portion of the criteria to be examined and the results should always be scrutinized.

Improving accessibility

Below is an overview of typical HTML issues and how to fix them.

Barrier/Issue

Solution

Code example

Graphics do not have textual description

Add meaningful alternative text appropriate to the function (alt attribute)

<img src="tud-logo.svg" alt="TU Dresden logo">

Wallpaper without alternative text

Add aria label

<div class="activeColoumLogo" aria-label="aktiviert"></div> (Alternative text is then “activated”)

Button or link without visible text, so there is no screen reader announcement

Add title attribute

<button title="to the top of the page"></button>
or
<a href="…" target="_blank" title="Start presentation in a new window”></a>

Recreated lists where graphic symbols are placed in front as images

Using the list structure elements in HTML and assigning icons by using CSS

HTML: <li class="icon">
CSS: li.icon {list-style-image: url('myIcon.gif'); }

Missing label link for form elements

Link label and form elements by using for attribute or if, for instance, a heading is used as label, aria-labelledby

<label for="id-xy">
<input id="id-xy">
or
<h2 id="label">
<input aria-labelledby="label">

Interactive elements or links are not operable via keyboard

Use not only click event, but also key event (e.g. keypress)

Assign if element is not tabbed tabindex

<span onkeypress="doSomething();" tabindex="0" class="fakelinks" onclick="doSomething();">Linktext</span>

Duplicate links, e.g. by using image link and text link directly on top of each other

Hide double link with ARIA

Add link with tabindex="-1" and aria-hidden="true"

Poorly recognizable keyboard focus

Also put in CSS focus analogous to hover

a:hover, a:focus {background-color: #ccd6df;}

Missing language specification

Set lang attribute

<html lang="en">

About this page

Denise Bornschein
Last modified: May 10, 2023