Tabs widget

Last time we talked a bit about how assistive technologies (AT) can use HTML to tell users more about the type of widget they’re dealing with. This is true for AT such as screen readers[1] and braille displays[2] but there are types of AT that don’t announce this information.

Windows, for example, has a special mode that is called High Contrast Mode (HCM). What this does is change all the colours of elements on the screen so that the contrast is increased. This helps people with low vision to read and use your website.

As opposed to macOS’ offering, which inverts colours, HCM actually replaces colours. In some situations this results in hover and focus states indicated by a change in colour to be lost in translation. This is also the case for people who use a greyscale screen (or set their display to greyscale).

To overcome this we can use other visual indications such as icons or varying border widths to indicate an elements status.

The attachment for this shot includes an overview of all the different states for the tabs widget. It also includes an example of the same states in Windows’ High Contrast Mode. A detailed description of the states is available.

Code example on CodePen
More information on the accessibility of tabs

Alternative text for image: a tabs widget with three tabs. The first tab is active.

[1] Screen reader: A screen reader is a software application which, rather than presenting web content visually, converts text into synthesised speech allowing user to alternatively listen to content.

[2] Braille display: A refreshable braille display or braille terminal is an electro-mechanical device for displaying braille characters, usually by means of round-tipped pins raised through holes in a flat surface.