在 Aggrid 中使用 ARC 工具包的可访问性问题

Question

We are using Arc Toolkit for running our WCAG compliance check and we are seeing an issue in this grid

Issue 1: Non-active element in tab order

Description The element has been placed in the Tab order using tabindex="0", but it lacks a specific role="..." attribute.

Answer 1

The Automated testing tools will identify this as an issue when using the tabindex=0 on elements that present no role or 'generic' role as divs or spans. This is not recommended from an accessibility perspective, there are several reasons for avoiding that. Some of them are:

• When the Screen Reader user moves the focus to this kind of element, they will expect that action is triggered.
• The number of Tab key pressing might be too much for keyboard users with motor disabilities.

https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/#making-non-interactive-elements-focusable

The main point is to try to avoid this as much as possible, so, you could ask yourself, is that tabindex=0 really needed? If the focus needs to be placed programmatically in error messages or headings, you should use a tabindex =-1 instead.

Hope this helps on your a11y journey.

Answer 2

Generally this is a good error message but in this specific case the grid is doing some javascript magic and is trapping keyboard events and handling the tabbing directly instead of allowing the browser to do it. So you can't actually tab to either of the two <div> elements it's complaining about:

<div class="ag-tab-guard ag-tab-guard-top" role="presentation" tabindex="0"></div>
...
<div class="ag-tab-guard ag-tab-guard-bottom" role="presentation" tabindex="0"></div>

The scanning tool doesn't know anything about the javascript behind the scenes so it doesn't know this and will flag it as an issue.

You can see this a little more clearly on the grid column headers, which are keyboard focusable and have a role="columnheader" but they also have tabindex="-1" , meaning you should not be able to tab to them directly but can move the focus to them programmatically (from javascript).

<div role="columnheader" tabindex="-1" aria-sort="none" aria-description="Press ENTER to sort. Press CTRL ENTER to open column menu." aria-colindex="4">

So the only way the column headers can receive focus is if the javascript is trapping on the tab event and programmatically moving the focus there.

If you're trying to have a clean ARC scan, unless you can modify the grid code or are allowed to customize your ARC scan to filter out these two elements, you'll have to live with this error that isn't really an error.