Some Clickable Boxes with a Few Hidden From AT
What clickable elements are available to screen readers and to touch/click when the screen reader is on?
(Testing last performed April 2020)
Box 1: Clickable and Tabbable Box (No Content)
Notes on Box 1
- NVDA + Firefox: Can be browsed to our tab focused and in both cases is announced as
clickable
and can be clicked - Narrator + Edge: Is clickable only when tab focused in scan mode. Announces as
group
when focused - JAWS + Chrome: Can be tabbed to but is not clickable with screen reader on and is not browseable. When tabbed to reads heading above it as its accessible name. No box on the page reports as
clickable
- macOS VO + Safari:
- iOS VO + Safari: Not discoverable with the screen reader and cannot be tapped or clicked. Interestingly, it can be tapped and clicked with the screen reader off.
- Android Talkback + Chrome: Swipeable and clickable. Does not report to the screen reader. Is just an empty swipe stop, but can be double-tapped and alert will fire. Android Talkback does not report that the box is
clickable
Box 2: Clickable and Tabbable Box
Box 2 Contents
Notes on Box 2
- NVDA + Firefox: Both tabbable and clickable. Announces as
clickable
- Narrator + Edge: Is clickable when tab focused. Announces contents when browsed to in scan mode but only says its a
group
when tabbed to - JAWS + Chrome: Browseable, tabbable, and clickable either when tabbed or browsed to
- macOS VO + Safari:
- iOS VO + Safari: Swipeable and clickable
- Android Talkback + Chrome: Swipeable and clickable
Box 3: Clickable and Non-Tabbable Box
Box 3 Contents
Notes on Box 3
- NVDA + Firefox: Can be browsed to. Annouces as
clickable
and can be clicked. - Narrator + Edge: As above but since it cannot be tabbed to it never announces as
group
- JAWS + Chrome: Clickable if browsed to
- macOS VO + Safari:
- iOS VO + Safari: As with Box 2
- Android Talkback + Chrome: As with Box 2
Box 4: Clickable and Tabbable and ARIA Hidden Box
Notes on Box 4
- Box 4 throws an axe violation due to there being a tabbable element that is hidden from AT
- NVDA + Firefox: Can be tabbed to but cannot be clicked when in browse mode and focus mode cannot be active on it either — focus remains on previously focused element
- Narrator + Edge: Even though contents are aria-hidden, it still reads them when tabbed to. Cannot be browsed to in scan mode
- JAWS + Chrome: Cannot be browsed to but can be tabbed to and will annnounce the box contents; however, the screen reader reads the box contents as a level 2 heading, apparently grabbing the role from the previous sibling heading. Box cannot be clicked
- macOS VO + Safari:
- iOS VO + Safari: Is neither swipeable nor clickable. Cannot be discovered by touch to explore
- Android Talkback + Chrome: Is neither swipeable nor clickable. Cannot be discovered by explore by touch
Box 5: Clickable and Non-Tabbable and ARIA Hidden Box
Notes on Box 5
- NVDA + Firefox: Cannot be clicked and does not appear when in browse mode. Effectively does not exist.
- Narrator + Edge: Cannot be clicked and does not appear at all when in scan mode. Effectively does not exist
- JAWS + Chrome: Neither browseable nor clickable. Effectively does not exist
- macOS VO + Safari:
- iOS VO + Safari: As with Box 4. Effectively does not exist.
- Android Talkback + Chrome: As with Box 4. Effectively does not exist