accessibility improvements

[bdon]

All interactive elements should have a role, name and value. The input fields in the Cost Calculator don’t have a name (label). A screen reader will read for example ‘Edit selected 12,000,000’ but doesn’t say what information the user is providing or why. The same problem occurs on the slider: the screen reader will only read ‘Slider 1.2 + 07’.

Addressed by adding the required tags.

The navigation menu has nested interactive controls, because of this the navigation is harder to control for people with a visibility or mobility disability. For more information, see also nested-interactive by Accessibility Insights.

See vitepress issue 3806 below.

You can’t reach the scrollable regions that include code snippets when using the keyboard. By using ‘tab’ on your keyboard, you should be able to cycle through all interactive elements on the page.

Keyboard scrolling on overflow divs seems to work on Chromium for Mac, but not Safari/Firefox:

The contrast between foreground and background is not sufficient for grey text (#6D737C) within code snippet boxes. The minimum contrast should be 3:1.

Changed to high-contrast versions of the syntax themes.

The state of the navigation menu toggles cannot be determined programmatically: it does not contain a value or indication whether it is collapsed or expanded.

See vitepress issue 3806 below.

When you use the keyboard to navigate through the menu, there are 2 buttons with the same action:
the text, for example ‘introduction’ and the arrow pointing down. Both these clickable buttons expand
the list of navigation items below. This might cause unnecessary confusion for people who use their
keyboard and/or a screen reader to use the page, because they can’t easily perceive the difference. A
solution could be to group the interactions to one button or remove one of them.

See vuejs/vitepress#3806