By keyboard shortcuts I mean these: Keyboard shortcuts are now integrated into the site. We can switch them on in our preferences. When screen reader or keyboard accessibility issues come up from time to time this feature may also get brought up, so I'm making this report to record that this feature is not actually screen reader accessible.
One of the baseline principles of web accessibility is that all functionality of a site should be available via keyboard navigation alone. It's an important baseline to accommodate those with muscular difficulties or those who are blind (and would rely on a screen reader), who would be unable to use a mouse.
Stack Exchange has a fairly powerful set of keyboard shortcuts, but surprisingly this doesn't actually meet this accessibility need: the keyboard shortcuts feature is 100% reliant on eyesight and does not interact with screen readers at all.
This means keyboard shortcuts service people with muscular difficulties, which is great. Those with poor vision or blindness who would be reliant on a screen reader, however, cannot discover or make use of keyboard shortcuts: they simply are not designed for screen readers at all.
I'll list the issues here.
1. Poor discoverability of the feature
Keyboard shortcuts are a power user feature—most users will never actually find out they exist, until maybe we come across them in passing. This is especially true for screen reader users though: typically discovering things is an order of magnitude harder for them because they cannot simply take in a screen at a glance and because pages aren't usually made for them.
However, if and when I do find out about it, I have to register for an account then do the following to reach the keyboard shortcuts preference:
- Navigate to my user profile. This is actually a tall order because it's not clear how I should do that: the top bar link we use to access our profile is not accessible and it is not clear it is a link to my own profile.
- Find the "Edit Profile & Settings" option just past the navigation. This part should be OK.
- Find the "Preferences" option in the sidebar and visit it. Note that screen reader users probably won't hear the "site settings" heading at all because it isn't connected properly to those navigation links, so a user might not be sure what these are preferences for—but let's assume they'll guess they're just general site preferences.
- Activate the keyboard shortcuts option. OK, cool.
2. Cannot hear or understand the shortcuts
I'll need to preface this section with an explanation: Focus management is an extremely important part of accessible design. Screen readers operate on the basis of having a text cursor moving through the page text: they read where the cursor is and activate controls the cursor is sitting on (like a button or link). When someone uses a screen reader their keyboard controls (arrow keys, tab, skipping across headings, etc) are all about moving this cursor around the page.
The Stack Exchange keyboard shortcuts operate fully independently of the cursor and do nothing with it. This means they do not interact with screen readers at all.
Ok, with that established, let's go into the inaccessibility of keyboard shortcuts.
- The “When enabled, press
?for help” text is not actually associated with the checkbox control. Someone tabbing through their options will only hear “Enable keyboard shortcuts” and might not hear the instruction to press ?. - If I do hit ?, nothing actually changes from a screen reader POV. An element appears on my screen which I can't see. My keyboard focus is not put there so the screen reader won't read it out. This could be read out anyway if it was an ARIA Live region but it isn't.
This means I actually can't learn anything about the keyboard shortcuts and I'm better off turning them off again. Let's suppose however for the rest of these issues that I have a cheat sheet of all the keyboard shortcut commands someone wrote for me.
- Inbox and Recent Achievements also do nothing from a screen reader POV. They make the relevant menu appear, but don't put focus there, so nothing gets read out to me—nothing might have changed at all as far as I can tell. (Maybe this page doesn't even have an inbox on it?)
I don't hear my inbox contents, achievements, or the fact I can push numeric keys to activate any of them. If I push a numeric key at the moment I'll be navigated to a thing, but I won't know what thing that is I just activated. - Go To is inaccessible because it relies on the help menu which doesn't get read out to me. Assuming I memorise the keystrokes with that cheat sheet though (e.g. G Q) I can use it.
On the question list (G Q):
- Select first/next/previous question and Go to selected question do not manage keyboard focus at all. As a screen reader user, nothing is changing. Nothing gets read out and I do not know what would be selected even if I could hit Go to selected question.
On a question page:
- Select question and prev/next post are in the exact same bucket as #5. So are vote, mod, and order. There is no feedback for having done any of these things.
- The following commands do make something happen: edit, retag, link, add/show comments. However given I'm not navigated around the page by controls in #6, I don't know what I'm editing, linking, or showing comments on, and I'm simply transported into a text box. At least for retag there's only one thing on the page (the question) to retag, so T is OK-ish.
The upside is S to skip to search works, but I don't need it because all I need to do to reach the search bar is head to the top of the page (usually CTRL/CMD + HOME) and then hit TAB a couple of times.
Given keyboard shortcuts do a bunch of things I won't fully understand, I'm probably just not going to have them switched on at all as a screen reader user in case I go accidentally voting on something without realising it by pressing a couple of letters.
What to do
Essentially the site needs to become keyboard accessible. There's basically two options:
- Make the user-toggled shortcuts feature (as-is) highly screen reader accessible.
- Work on making the site highly screen reader accessible by default, without needing to switch on a power user option.
Stack Exchange should focus on the latter: make the sites accessible by default to every user. Hiding full keyboard navigation behind a preferences switch only some users will find & only when they're signed in is like putting the wheelchair lift call button only at the top of the stairwell. Screen reader users need those controls the most, available by default, and if they can't navigate the site well, that includes navigating to register and find the setting.
It's a broad scope of changes, but will likely be the same or less effort. It's essentially absorbing the keyboard controls into the site by default for those who most need them available and will likely result in an improvement for every user, even those who use those controls.
Here's my recommendations:
- Make the help readable and informative even for screen reader users. For example, you can build descriptions into appropriate places in the page (in
.sr-onlytext, in appropriate ARIA annotations) instructing the user that they can use J/K to navigate between answers, or Q and A to teleport to the question or the topmost answer.- You can also provide this with accessible skip links, but no harm in doing both.
- J/K for forward and back are relatively common and fine to keep, as long as you instruct the user they're available.
- You can keep the detailed help dialog available for sighted users. However, ensuring this information is on the page in places screen reader users need to know it is preferable to just having the dialog. For example, when a user focuses the inbox button, ensure they're told they can use
Ito open/close this thing anytime. You may want to ensure the user has a key they can press (probably still ?) that focuses the help dialog or reads it out.
- When Inbox and Recent Achievements are used, transport focus to that icon. Make the screen reader announce you can use the numeric keys to select an option, and let them navigate their inbox options with the arrow keys.
- Options for navigating around the page should place focus on appropriate locations. If you move to the next answer, put focus on that answer. If you move to the sidebar, put focus in the sidebar. Naturally if you've got a link or question focused then hitting Enter will navigate to that link/question — this will happen by default for links of course.
- When navigating the question list or answers, read out the position on the page as the user navigates focus: “Question 1 of 20.” J “Question 2 of 20.” J “Question 3 of 20.” on the question list, or “Answer 1 of 3.” J “Answer 2 of 3.” J “Answer 3 of 3.” when moving through answers.
- When you focus a thing that has edit, vote, mod, share, and show comments options available, ensure a screen reader user can discover these controls exist. Consider giving them a button to jump to the post's vote buttons or management bar (that bar being the edit, mod, share buttons) or comments.
- The option to move to comments should transfer me to the first comment, not the comment input, so that I can begin reading comments and reply when I want to.
- Reading comments should tell me which comment it is: “Comment 7 of 39”, etc, including when it first places my keyboard focus on one of them.
- Add a separate keyboard shortcut to Add comment.
- Commands around pagination should bring focus to the pagination area on the page, or else tell me there isn't one, so that I can learn the exact same things a sighted user can.
If you keep the preferences switch, then once the feature's fully accessible, make the preference easier to discover and switch on. For example: make the profile and preferences pages more screen reader friendly, and/or put a toggle for keyboard shortcuts into the header for screen reader users. But if you're doing all this and doing it right, you might as well just make it part of the site by default.
