在屏幕阅读器中移动光标

Question

Background

I have a site which has a master/detail sort of design. The master view is a column chart where clicking on one of the columns (each column represents one month) changes the detail view (which is a nested table listing some details of that period). I've started an accessibility audit and as you might imagine, it is not very accessible. I solved the chart by adding aria-hidden="true" and adding an invisible table with the same content with buttons in the month rows. Now activating the buttons will do the same thing as clicking the chart columns - change the detail view.

Moving focus

When the button in a table in the master view is clicked, my screen reader (VoiceOver Safari in this case) reads "Button clicked", but then using the cursor keys keeps reading the table. I assume a user once they decide which button to click would like to read the detail view and so I would like to move them there.

What I have tried

I changed the buttons to <a href="#detail-view" ng-click="loadDetail"> and gave the detail view container div the id="detail-view" . This doesn't seem to do anything.

Answer 1

Simple answer: don't. Shifting focus around on a non-sighted user is actually an accessibility violation. See WCAG criteria 3.2.2.

In short, you shouldn't initiate a change of context automatically after the press of a button or other control interaction. What you should do is inform the user of the new content, either by an announcement, or by providing a description of the change in the accessibility text of the control itself. An example of providing this context would be announcing your master cells as "tabs". Just the simple association of a button behaving as a tab provides a lot of information!

To make your application more accessible you should ensure the user knows they are in a master-detail type of control, by providing proper role information (I find "tab" most likely here, but other roles may be applicable). Also, provide a heading at the top of the master view, and the detail view, so that they can easily navigate between the two. As long as they know where they are, and can easily navigate to important areas of the page, they are fine. Automatically shifting focus around is actually an accessibility violation, and should be avoided.