lundi 7 mai 2018

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 im using both the standard Windows Screenreader and NVDA (see https://www.nvaccess.org/). I've tried different solutions I found on the web, but im 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: Im tabbing to my Checkbox, the screen readers say "Tab".

2: Im 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.




Aucun commentaire:

Enregistrer un commentaire