Blind and Visually Impaired Community
↑
3
↓
How are you navigating lists on a dynamic site - trying to make it properly (self.Blind)
submitted by t3chguy1
I am trying to figure out how to make a navigation through site that would follow accessibility guidelines. I understand the main key is the Tab key, so user tabs through and arrives to a link saying "All Items". On pressing the Enter key, the section of the page is replaced with a long list and keyboard focus is on the whole list which has ARIA role listbox and each item has role listitem. How do you now expect to navigate that list? Do I now enable tab-index on all items in the list? Pressing down key at this point just scrolls page. If I add tab-index to all items in the list, then what happens if user tabs 20 items down the list, and now there are 30 more; how do you expect to close the panel with the list and continue to the element that is after the "All Items"? Thanks
bscross32 1 points 3y ago
We do not just tab through every link on a page, good god that would take forever. Well scratch that, some probably do. I know of people who say they can't do X and Y, but their screen readers can, they just haven't bothered to learn all of its features.
​
There's an aria role for expandable menus I think, that works well. You press enter on the list and it pops open and you can arrow down it. You select something and it closes.
​
There are some cases in which you will tab on a website, generally when filling in forms and the like, because it takes you from one field to the next. Also tab really only seems to be the only option on some sites where the menu expands - as in, if you try to expand the menu and then arrow, you move off it and it collapses.
​
There's an aria role for expandable menus I think, that works well. You press enter on the list and it pops open and you can arrow down it. You select something and it closes.
​
There are some cases in which you will tab on a website, generally when filling in forms and the like, because it takes you from one field to the next. Also tab really only seems to be the only option on some sites where the menu expands - as in, if you try to expand the menu and then arrow, you move off it and it collapses.
t3chguy1 [OP] 1 points 3y ago
Tabbing makes sense for forms, but I thought that is how one moves to the next paragraph and I didn't know about the Jaws before, so I made every single part focusable with a tab, so I will have to revert it then. I am doing it the first time and I should have informed myself before. Thanks for the explanation.
bscross32 1 points 3y ago
Ah OK. Just remember that not everyone uses Jaws. I don't even think it's that popular anymore, though there are some hardcore fans. SO whatever you decide to do should be screen reader agnostic as much as possible.
CloudyBeep 1 points 3y ago
I want to make sure I understand what this list looks like. Is it like the list of tweets on the Twitter website that expands as you move down the list of tweets?
Also, not all people use the Tab key; I use it very rarely because you can sometimes be moved to a completely different part of the page than you expected to be on.
Also, not all people use the Tab key; I use it very rarely because you can sometimes be moved to a completely different part of the page than you expected to be on.
t3chguy1 [OP] 2 points 3y ago
It is more like a list of frequently asked questions, which is also expandable but ignoring that for a minute, you moved with arrow keys to the middle of the list and now you just want to move to the next section of the page without going through the rest of the questions, what do you press? I made a mistake when I started designing the site that I didn't think about accessibility and everything is loaded into place so it is one page that loads additional content after the clicked element instead of opening another page. So imagine a section projects and a 3 projects, and then about section and a blurb, and then if you click More on the projects if loads more projects between those two sections pushing the rest of sections down.
CloudyBeep 1 points 3y ago
Could screen reader users use a keystroke to jump to the next heading? Or could you alter the reading order of the page? Do you have a URL you can share, or could you make a little HTML file with a sample that removes any identifying information?
t3chguy1 [OP] 2 points 3y ago
It is still site on local webserver so not externally accessible yet. Is there a known keystroke to jump to next heading that majority uses? I didn't want to make my own key combos that people would have to learn for that site only.
CloudyBeep 1 points 3y ago
Screen reader users can use keystrokes to jump to the next element of a particular type. JAWS, for example, uses the h key to move to a heading of any level. All screen readers have such keystrokes.
Motya105 0 points 3y ago
Press alt-down arrow when it says List Box, that should fix it. Jaws does not use Ocr to read websites. HTH
t3chguy1 [OP] 1 points 3y ago
I have tried it but I have probably messed up its functionality trying to implement it manually. Thanks, it is easier when I know now that it is supposed to work.
Motya105 0 points 3y ago
The easiest way to navigate lists on websites is what’s called a Combo or List Box by screen-readers. It’s often used on websites to select your state/country for example. You could put a List box with the items on the site, and then put a Go button next to it, so that the user can use the arrows to move through the list box, then tab to the Go button and press it. Some screen-readers (such as Jaws) use Alt-down-arrow, to open the list box, and Alt-up-arrow to close it. You may be getting the scrolling issues with the arrow keys, because the screen-reader’s focus is not in the list box. I hope this helps.
t3chguy1 [OP] 1 points 3y ago
Thanks for the explanation. This is the existing site and the list is standard UL element containing expandable Frequently Asked Questions so it is not suitable for the drop-down. I installed JAWS and tried using arrow keys. When it gets to that element it announces Listbox, and then "To move to an item press arrow keys, but arrow keys don't do anything". I will dig more into it but I am surprised how badly it reads the site that I don't understand half of the words. I don't know if it parses the text source or tries to do "read" the characters of the screen itself with OCR, in which case it would be the font's fault.
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.