Web Design Cookbook: Accessibility

After logo design, accessibility is a topic which requires a brief discussion. Accessibility is the attempt to design web offers in such a way that no barriers are present. In other words, no user is excluded in principle. For example, we want to optimize our offers for people with disabilities. Limitations are already present due to smartphones, tablets, projectors, smart TVs or a slight visual impairment. Accessibility therefore tries to make the website accessible to everyone. Of course, we cannot remove all barriers of the website, there will always be some automatically. However, we can make them barrier-free, i.e. as few barriers as possible.

Separation of Content and Structure

In order to design barrier-free websites, certain techniques are required, which are generally not very widespread. These include, among other things, qualitative techniques that we can only achieve through structure, semantics or formatting. But there are also possibilities that can be implemented through markup. To break down barriers, elements in markup should never serve the layout. The entire appearance should be controlled via an external stylesheet.

Tabindex

The Tab Index attribute can be used to specify the order of the hyperlinks to be focused, which is possible with the “Tab key”. For example, we can skip the skip link, navigation and other important hyperlinks directly, and skip unimportant links such as advertising links and the like.

Skiplinks

A so-called skiplink is a hyperlink that refers to the content within the document. For example, if a screen reader is used, unimportant elements such as header or navigation can be skipped and are not read aloud repeatedly.

Access keys

Access keys are, for example, keys such as 1,2,3 which perform operations that are normally done by mouse. For example, we can assign access key 1 to the navigation.

Language

Texts often contain words in other languages, such as French, German, Bengali, Chinese. When declared, screen readers can read them aloud in the selected language. We can include this word in a span tag and assign the language to it so that it is also read aloud.

Interactive content

Interactive content such as scripts or embedded objects should always be only an addition, never a prerequisite for the content. You should be able to use them if desired. Since you would lock out users if you make them a prerequisite, this is not useful for the barrier-free website.

Logical structure

The document should follow a logical structure. For example, elements and content should be placed in expected places. The user should find all elements easily. Associations should be created between them so that the structure can be followed more easily. Furthermore, headings should be used hierarchically to make the branching of an element more understandable.

Aria

“Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.”

Since HTML provides very few widgets, sometimes widgets have to be integrated as graphics or similar. In order to make the whole thing accessible, we have to assign roles to them. This works with the “role” attribute. Various default values are provided for the “role” attribute.