Topics

trouble with clickable elements


Giles Turnbull
 

Hi all,

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:
https://www.bridportprize.org.uk/enter

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 correct.

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 :)

Giles


Jonathan COHN
 

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:

  1. Label the span or div hthat is representing the checkbox with two additional attributes role=”checkbox” and aria-checked=”true” / aria-checked=”false”.
  2. 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:
    1. Ensure you can tab to the element: (tabindex=0)
    2. Make sure keyboard users can interact with the control by adding handlers for kepPress event.
    3. 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.

 

Jonathan

 

 

From: nvda@nvda.groups.io <nvda@nvda.groups.io>
Date: Tuesday, May 26, 2020 at 3:53 PM
To: nvda@nvda.groups.io <nvda@nvda.groups.io>
Subject: [nvda] trouble with clickable elements

External email alert: Be wary of links & attachments.

Hi all,

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:
https://www.bridportprize.org.uk/enter

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 correct.

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 :)

Giles


Steve Green
 

The competition has closed so I can’t see that particular code now, but from an accessibility perspective the coding is pretty horrid throughout the website.

 

For example, pages are entirely empty if JavaScript is turned off or fails to load for any reason. Although almost everyone has JavaScript enabled, this is still disgusting from a software engineering perspective. Have these people not heard of progressive enhancement? Or even graceful degradation? There are massive swathes of JavaScript on a website that needs virtually none at all. Heaven knows what it’s all doing.

 

They haven’t even applied any semantic structure, and they have done stupid things like adding HTML attributes to change links into buttons. They should throw it away and start again.

 

Steve Green

Managing Director

Test Partners Ltd