A list presents each gallery with a checkbox and a navigation link. Clicking near the link toggles the checkbox, while activating the link navigates to the gallery. Keyboard users can tab to each item and use the space bar to check or uncheck. The concern is that combining form-based selection and link-based navigation within one interactive label may create confusion for screen reader users. Another concern is that older assistive technologies may not handle nested interactive elements inside a label reliably. Using label associations via for and id can reduce issues. A clearer approach is to keep navigation as links and provide a separate toggle or mode for selection and merging or downloading.
"I have a list of galleries with links to each of them. I also wanted to provide a checkbox to allow users to select several galleries and merge or download them. The HTML I use is the following. An unordered list with labels and checkboxes and links inside the label."
"Given the right CSS and some breathing space this works well with a mouse and keyboard. You can click next to the link to check the checkbox and on the link to navigate to the gallery. It also works using a keyboard. You can tab through the list and check/uncheck using the space bar."
"Now, it feels wrong though. I am mixing two interaction modes here, navigation and selection, one being link based and the other form based. I am wondering if that creates any issues for screenreader users. The other thing I am wondering about is if there is an issue with nesting all in the label as some older assistive technology didn't like that."
"The question though is if that is still an accessibility issue and if it doesn't make more sense to show the navigation as links and create a toggle to switch to the selection use case? What do you think?"
Read at Christianheilmann
Unable to calculate read time
Collection
[
|
...
]