By keyboard shortcuts I mean these: Announcement: 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
There's two very good options:
- Make keyboard shortcuts highly screen reader accessible.
- Accept these are not accessible and focus instead on making pages very accessible and easy to navigate even without keyboard shortcuts switched on. This is a much broader scope of changes, but probably the same or less effort, and I actually think this would be the better option. Alternately, small keyboard navigation features can be added around pages without needing to be switched on so as to be accessible to anyone, even users who aren't signed in.
Assuming you want to make these keyboard accessible, here's what you do:
- 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. Only do this when they're fully accessible.
- Manage focus to make the help readable. Transport the user's focus to the help dialog when it opens or make it an ARIA live region. Return focus to where it was on the page before after it's closed.
- 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. Then read out the top ten options plus the key they're associated with: “One. Comment on How do I do the thing? Could you provide more information about that? Two. Comment on...” etc.
- Options for navigating around the page (question list, answers in the question, etc) should actually bring keyboard focus to links (in the question list) or the question heading and answer landmarks (on the question page). There should be an ARIA Live region (set to polite) to instruct you on what the navigation keys are. J for next and K for previous are actually good common key choices, keep them. :) Keep Enter for selecting the current question on the list as well.
- When navigating the question list or answers, read out the position on the page: “Question 1 of 20. Question 2 of 20. Question 3 of 20.” on the question list, or “Answer 1 of 3. Answer 2 of 3. Answer 3 of 3.” when moving through answers.
- Describe clearly that the options to edit, vote, mod, link, and show comments operate on the current thing. “Edit question” or “Edit current answer” for example. Add more descriptive options: when I cannot see what these options will do, I need to have it described first. “Mod” should instead say “Moderate, such as cast flags” for example. “Link” should say “Get a direct link to this post”.
- Vote should transport focus onto the upvote button, probably, then describe to me the option to choose upvote or downvote.
- Show comments should transport me to the first comment, not to the comment input, so that I can begin reading comments. If I am already reading comments, it should transport me to the first unfolded comment. Navigating comments should also have J/K commands. 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.
- The pagination keyboard shortcuts should tell me how many pages there are, which page I am on, and provide the option to skip to a specific page (like page 5) rather than just previous/next.