Skip to content
Snippets Groups Projects
Select Git revision
  • backend-fixes
  • deployment
  • frontend-devel
  • master default protected
  • assignments
  • final
  • assignment08
  • assignment07
  • assignment06
  • assignment05
  • assignment04
  • assignment03
  • assignment02
  • assignment01
14 results
Blame Permalink
accessibility.md 4.34 KiB

Accessibility

Introduction

This report aims to identify and solve accessibility problems with the project website. It will start by listing all the problems that were identified and then explain how we were able to solve them.

Methodology

The accessibility issues were found primarily using the WAVE tool. We also used the Lighthouse tool build into Google Chrome's DevTools to detect further issues and suggestions. Some accessibility problems were also noticed by ourselves and not reported by the tools.

Problems

Colour contrast

The most common accessibility issues were that, according to WAVE, the contrast of the colour theme. Since the users can change the colour theme of a project, some colours like yellow were considerably more problematic than others.

Selected vs. non-selected

Another related issue is the contrast between selected and non-selected filters in the task view. The only change between selected and not selected was only a decreased opacity, which is not directly obvious in some circumstances. Similarly, this problem also existed in the colour selection for the projects.

Redundant alt-texts

WAVE called attention to redundant alternative texts on avatar images of users. This was caused by the fact that the nearby text was identical to the value of the alt attribute. In some areas, we were also missing the alt text for images.

Missing labels

Some input fields, e.g. search fields and comment fields, did not have any labels describing them. They did, however, include a placeholder text that reasonably described their purpose.

Heading-Tag order

One page of the application had a wrong order of heading tags. WAVE detected that we had a h1 tag and a h4 tag but none of the tags in between, i.e. no h1 and h2. This constitutes a problem because it can be confusing to understand the site's structure without knowing the context.

Too small texts

On some pages, we used relatively small and therefore hard to read text. Both WAVE and Lighthouse alerted us of this problem.

False warnings

WAVE also gave us some false warnings. For example, WAVE complains about the noscript element. Since we are not using the noscript element for anything other than showing an error, this is not a problem. Another thing WAVE highlight is a contrast error on the side navigation. This is not an issue but caused by the fact that WAVE does not know that the text in the bar chart is displayed outside the bar using CSS. Similarly, WAVE does not correctly understand linear gradients as background for text.