Accessible Tabs

[wegnertm]

run aXe extension (chrome or firefox) and you'll see 3 issues appear.

All 3 of these are due to the tab component.

1. Certain ARIA roles must contain particular children
2. Certain ARIA roles must be contained by particular parents
3. Interactive controls must not be nested

Helpful resources: W3 Tabs -> Automatic Activation

Video Tutorial

Let's talk color.

This is my favorite color contrast tool Note: I'm in dark mode.

1. Even though a tab isn't active, it still needs a contrast ratio of at least 4.5:1.

   • FCFDFD vs #E1E4E5 = 1.3:1 and fails WCAG

     

2. You will want to consider having the active tab be different than the non-active tab. If you're using color alone to make this difference, then that contrast ratio (active vs non-active) must be 3.1:1. My suggestion is to keep the non-active tabs a light background but have the text be dark (4.5:1 ratio) and keep the active tab as-is.

3. You'll hopefully update the tabs to navigate via arrow keys instead of tab key but make sure that the focus indicator is there and has enough contrast. Typically I do a box-shadow: inset 0 0 0 0.25rem [TEXT-COLOR]; but there are plenty of other options.

Keyboard functionality

Again this may change if you update to arrow keys but as of right now:

1. I'm getting an extra tab after the "x" and before the Dialog
2. nothing happens when I press enter on the "x" (doesn't work with mouse either)

[arkalon76]

@all-contributors please add @wegnertm for accessibility and bug reports

[allcontributors[bot]]

@arkalon76

I've put up a pull request to add @wegnertm! :tada:

[arkalon76]

Thanks @wegnertm, Perfect report. Especially giving resources about the issues. Very helpful.

[arkalon76]

Most aXe issues are resolved by simplified tabbing