This web site must be violating Princible 1 of the WCAG.
A website must be perceivable.
The best solution for the web site developer would be to use standard input checkboxes and then you would be able to work them.
I highly doubt that they will do this, so the next best alternative is:
- Label the span or div hthat is representing the checkbox with two additional attributes role=”checkbox” and aria-checked=”true” / aria-checked=”false”.
- At this point you would at least be able to tell that there is a checkbox and what its state is. Now they probably need to do three things to ensure that it is operable:
- Ensure you can tab to the element: (tabindex=0)
- Make sure keyboard users can interact with the control by adding handlers for kepPress event.
- Make sure the click is being handled by a click or up event not a pointerDown event.
All of this assumes that the web developer is actually coding in HTML. If they are using a autogenerate a web site like WIX, Google, Facebook, wordpress then all of this should have been done by that vendor., and the best you can probably
hope for is that next year the system will be made accessible.
Date: Tuesday, May 26, 2020 at 3:53 PM
To: email@example.com <firstname.lastname@example.org>
Subject: [nvda] trouble with clickable elements
External email alert: Be wary of links & attachments.
I'm hoping somebody can figure out why I can't get this competition entry page to work. I'll paste the link and then describe what is, and what isn't, happening:
There are quite a few clickable elements and the only way I seem to be able to activate them is with object navigation. I know it works with the category I want to enter (a poem) because it drops down a box that has the number 1 in it ... I only want to enter
1 poem so that is fine so far ...
Next on the page are 4 items that need to be clicked to confirm they are correct ... I’ve read the rules and agree to the terms and conditions of the competition, I’ve got the correct version of my entry, My name isn’t on the entry, and All my information is
I have activated each of these with object navigation, the way that worked when I selected what category I wanted to enter, but nothing seems to happen with these four items.
I asked my mother and she says they appear as four boxes that need checking, so I looked to see if there were any physical checkboxes by using the x keyboard shortcut ... with no success. she tells me that when she checks each box then a new dropdown box opens
where a file can be attached.
without being able to get that "dropdown box" to open, I'm unable to enter the competition. Obviously the description "dropdown box" is my mum's and, without being able to get anything to open, I've no idea what sort of control it is ... my instinct is that
it'll be a button, but I know there are no buttons on the page to upload a file ... the categories respond to the b shortcut key for a button, as does the button to sign up to the mailing list, but those seem to be the only buttons. One thing I do hear with
NVDA is that there is one more clicable element just after where it says "1 poetry entry total £10, but object navigation doesn't find that clicable element and hitting enter on it has no effect either.
I will contact the competition organisers if no resolution to this can be found, but I figured somebody here might know what is happening.
I'm using NVDA 2020.1 and have tried using Firefox (version 76.0.1 (64-bit)) and Google Chrome with the same results in each. Operating system is Windows 10 Version 1903 (OS Build 18362.836)
Thanks for any ideas :)