I'm currently working on an Angular web project that contains a interactive mat-table. We are trying to make it fully accessible for keybard navigation.

The data I'm displaying are the matches for a search and the table consists of rows that each have a checkbox to select it and a footer that contains the pagination (entries per page ranges from 25 to 1000, standard being 100) and a 'Continue' button that saves the selection and navigates to the next page. Navigation inside the table works quite well, but to get to the pagination or continue-button with keyboard only, one has to tab through all of the entries in the table. We are looking for ways to make that possible.

I would be very happy to hear how you approached that kind of problem in the past, or obviously if you are someone who uses keyboard only navigation. Is there a navigational tool or shortcut I don't know about?

I'm not looking for code examples, but for ideas how to do it. Here's what I have considered so far:

1. a. create a custom shortcut to focus the button
   cons: I'm afraid a keyboard shortcut would interfere with the assistive equipment of the user, or other Software they might be using at the same time.

2. add a 'skip-to-footer' button
   cons: the header of the table is already pretty crowded with the table's headers, and depending how far the user was looking into the table that might be just as cumbersome to get to as the button is now

3. add some kind of accessibility menu that set the page length to 10 or something and save their preferred options
   cons: We currently save no settings for users so we would have to implement a whole new thing, and we are trying to meet a deadline

4. do nothing and just expect keyboard users to either tab their way through the whole table or trust them to make their search parameters specific enough to get only few results (The data I'm working with allows to basically get only one hit for 90% of searches)

CodePudding user response：

5. Implement accessKey

You'd need a note somewhere on your page or in a help section so that the user knows the key is available.

Screen reader users don't need the key because they can use other built in shortcut keys for the screen reader to easily navigate to other elements. If your pagination is contained in a <nav>, then that's a navigation landmark and landmarks are easy to navigate to.

CodePudding user response：

create a custom shortcut to focus the button

Yes you are right and access keys can be a real nightmare if they cannot be switched off.

If you decide to implement this you really need to also implement a settings screen where you can change the access key.

As you indicated time was against you so this may not be an option.

don't implement access keys unless you have a way to change them as even "safe" keys may be taken by people (if they change the shortcuts on their screen reader for example).

add a 'skip-to-footer' button

You could make this a floating button or anchor. Similar to how "skip to content" links work when you first enter a page.

The skip link is only visible if you tab to it and therefore can be positioned in such a way they do not interfere with your current table header etc.

as a quick fix this is your best option

add some kind of accessibility menu that set the page length to 10 or something and save their preferred options

Being able to set pagination length is useful not just for keyboard users but for everybody.

I would say that this combined with the skip link option above would make the best overall solution.

Obviously is time is against you for immediate release you could add this to the roadmap as a high priority feature.

do nothing

Only you can answer whether this will work in the real world, I would imagine that most users would prefer fewer search parameters and just look at a list of results though.

I would imagine doing nothing would not be ideal, especially with the 1000 entries per page option!

How would I approach it?

I eluded to it earlier but an invisible "skip to footer" link that only appears when focused, combined with a "pagination length" setting in the footer (results per page) would be the best balance between time, usability and overall UX improvements.

Ultimately it would be great to implement access keys for keyboard users as they massively improve productivity once learned.

But you would want to do this system wide and have a settings screen as I mentioned earlier so collisions can be remedied (or shortcut keys can be switched off entirely for people who already use assistive tech with shortcuts built in).

However that is time consuming if you haven't already implemented it so it might not be feasible, even if it would be a great feature to have!