Accessibility guidelines

Here are our accessibility guidelines which should be followed to an extent (full extent if possible and not too inconvenient).

• Not all users who browse the Web have their images turned on. There should always be alternatives to images and icons. Either have a tooltip, an sr-only tag, or text next to the image.

• Since some users are colorblind in varying degrees, color shouldn't be the only way to discriminate or identify elements. In our case, with the course tags, the use of color is in addition to the text and will help those who can see colors to identify different tags faster, but won't hinder people who can't see color.

• Each page should have a title that describes the page in a short, meaningful and potentially unique way. For an example, "Course X - Labtool" instead of just "Labtool".

• The tool should be navigable with just the keyboard. This especially contains proper "tab ordering", e.g. which element receives focus next when the tab-key is pressed. Keyboard users also shouldn't be trapped in a way where they would have to use the mouse to regain control. Keyboard focus indicator should be clear and visible.

• The contrast ratio between the text and background should be at least 4.5:1. This is especially true when we implement custom color codes for tags. The user should not be able to choose a background color for a tag that makes it hard for people to read the tag's text. We can either limit the background colors to always match this contrast ratio, or automatically set the text color to one that is still readable (white text for black tags, for an example).

• Notifications should be displayed long enough. Perhaps the length of the notification message should determine how many extra seconds the notification is displayed? Closing the notification prematurely should also be an option. Color-coding for different types of notifications, along with icons, is also a possibility. Red for errors, green for success etc.