CODEWITHSUNDEEP
htmlcheckboxscreen-readersfieldsetaccessible
yuggmeister
yuggmeister

Reputation: 87

Screen reader capability for checkboxes in different browsers

I'm working on a website that has to be accessible for almost anyone.

Currently, I'm trying to figure out a way to make checkboxes accessible by different types of screen readers, using the keyboard to navigate through the content. At the moment i'm using both the standard Windows Screenreader and NVDA (see https://www.nvaccess.org/). I've tried different solutions I found on the web, but i'm still stuck and I would love some tips and trix on how to implement these sorts of features. One thing to note is that it has to work for different types of browsers (ideal would be Microsoft Edge, Google Chrome and Internet Explorer).

The ideal scenario would be something like this:

1: Navigate to the checkbox (or list off checkboxes) using the tab key.

2: The screen reader informs me that it's a checkbox, it's current state (checked, not checked), and its label.

3: Space key will uncheck and check my checkbox, informing me of my actions.

Here's two different code snippets that I've tried, but they only work on Microsoft Edge and Internet Explorer:

<fieldset id="accept">
<legend> My legend </legend>
<input type ="checkbox" id ="chbox" name ="check_1">
<label for "chbox">This is my checkbox></label>
</fieldset>

And this is when i'm using the Struts checkbox tag.

<span class="">
<s:checkbox 
    label="someLabel"                   
    name="someName" id="accept" />
</span>

These work as expected in Microsoft Edge and Internet Explorer, but whenever I'm using Google Chrome, the screen readers are having trouble figuring out my content. The scenario I'm having:

1: I'm tabbing to my Checkbox, the screen readers say "Tab".

2: I'm using the space key to uncheck my checkbox, the screen readers say "Space". (It still unchecks my checkbox though)

Apart from this, I've tried to surround my code in different divs, assigning roles and web-aria, but nothing seems to work. As I'm totally new to this, I would love some 'best-practice' ideas and tips.

Any help is appreciated,

Thanks in advance.

Upvotes: 1

Views: 6887

Answers (3)

L&#233;onie Watson
L&#233;onie Watson

Reputation: 174

It's worth mentioning that Narrator does not support third party (non-Microsoft) browsers.

Upvotes: 0

RwkY
RwkY

Reputation: 90

Well, it's kind of a Chrome Issue.

Check this as you're not the only one.

I don't know any solution for this, I've bumped into this a few years back, luckly I just had to make it at A/AA.

Upvotes: 0

Dennis C
Dennis C

Reputation: 24747

First, I could suggest you not to use Struts checkbox as most of them are design for legacy browser. And it may not always best for modern screen reader.

Regarding the checkbox, the recent recommendations from ARIA reference is to use DOM structure <label><input>Text</label> over <label for>.

Or use aria-label on the checkbox. But the second way is less recommend due to different support from browser/screen reader. In some bad case, they could ignore or read duplicate by different way to read the line.

Upvotes: 1

Related Questions