Polymer 1.* and NVDA reader
I have a group of radio buttons that do not have labels. I am trying make the screen reader read out what the radio button is on hover.
I tried aria-labelledby which, from what I read, should reference a element by id and read out it's content.
However, I am not having success. When I hover over the paper-radio-button it does not read out yes. I have to click it first which isn't idea when compared to the example on https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html.
Any ideas on how to get aria-labelledby to reference and read out the element content with id yes so it will read out yes on the radio button with no content/label?
<paper-button
id="yes"
disabled$="[[parentAnswerIsNo]]"
data-global$="[[picklistValues.ENHANCEDYESNO_YES]]"
on-tap="_globalSelect">Yes</paper-button>
<template
on-dom-change="_setDefaultValues"
is="dom-repeat"
items="[[fields]]"
filter="_computeField">
<div class="color-row" data-yes-answer-field-code$="[[item.field_code]]">
<div class="row">
<label class="col1">
[[item.field_label]]
</label>
<paper-radio-group
class="new-form-radio all-radio-select global-btn-select-radio"
on-selected-changed="_toggleHiddenRow"
data-yes-answer-field-code$="[[item.field_code]]"
attr-for-item-title="[[item.field_id]]"
attr-for-selected="value">
<paper-radio-button
aria-labelledby="yes"
disabled$="[[parentAnswerIsNo]]"
value="[[picklistValues.ENHANCEDYESNO_YES]]"
name="[[item.field_id]]"></paper-radio-button>
I'm not familiar with polymer, so apologies if this doesn't apply, but aria-labelledby works when using native HTML.
<button id="foo">foo</button>
<button id="bar">bar</button>
<input type="radio" name="gender" value="male" aria-labelledby="foo">Male<br>
<input type="radio" name="gender" value="female" aria-labelledby="bar">Female<br>
When I tab to the "Male" radio button, I hear "foo radio". When I tab to the "Female" radio button, I hear "bar radio". This works with JAWS, NVDA, and VoiceOver (iOS). So in theory, your aria-labelledby example should work. Can you inspect the code that's generated to make sure aria-labelledby is set on the html element and that the elemented referred to by the ID exists?
But I'm unclear what you mean by
"I am trying make the screen reader read out what the radio button is on hover. "
A screen reader user will not use a mouse so they won't "hover" over an item. They'll tab to it or navigate to it through the DOM (up/down arrow) or use a quicknav key ('A' for JAWS, 'R' for NVDA). If you truly hover with a mouse over a radio button, you will not hear anything from the screen reader (although NVDA does have an option to track the mouse, but that's not a typical setting for a normal screen reader user, but even with that option set, I correctly hear the aria-labelledby value).
The best approach would be to add an label and do not show it, so the screenreader still can find it.
You can hide it e.g. with this css, or if you use bootstrap just use the class sr-only
.visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
Related
We use a modified renderer for SelectOneRadio elements. This renderer does not set the disabled attribute on the underlying <input /> for disabled selectItems.
This is due to an accessibility requirement. Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.
Problem: when the items label is clicked, the form parameter is updated to the value of the disabled option. The disabled element is also checkable via keyboard.
Any idea how I can set the disabled attribute on the <input /> while keeping the elements tabbable?
Simply changing the renderer won't do I'm afraid. Much of the functionality related to keyboard navigation can be found in the widget code of the SelectOneRadio component:
https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectoneradio.js
You will probably need to override a lot of functions there.
Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.
This is by definition a contradicting requirement that can't be satisfied. A disabled element isn't focusable and it's perfectly normal. Both always go together.
So there is basicly no good solution, as the requirement is wrong.
However, here's a little fun fact:
The onclick event is triggered upon focusing the radio button, too. You may use event.preventDefault() and this will prevent the radio button from being selected.
The radio stays focusable when using arrow keys.
When the radio button is focused with arrow keys, then it doesn't become selected.
However, it iss no longer focusable using tab, and worse, tab navigation seem to be completely broken. It is even no longer possible to go from "One" two "Three" or back.
I would therefore not recommand it, but well, wrong requirement, wrong solution.
Chrome, Firefox and Internet Explorer under Windows 10 seem to all agree on that same behavior, tough !
<form action="">
<p><label for="a1">One</label>
<input type="radio" name="a" id="a1"/></p>
<p><label for="a2">Two</label>
<input type="radio" name="a" id="a2"/></p>
<p><label for="a3">Three</label>
<input type="radio" name="a" id="a3"/></p>
</form>
<script type="text/javascript">
function f(e) {
e.preventDefault();
}
var a2 = document.getElementById('a2');
a2.addEventListener('click', f, true);
</script>
I have a <label> associated with an <input> (for="inputID").
Would I have an accessibility problem if, for example, I added a link between <label> and <input> ?
Example:
<div class="c-input">
<label for="input-1">Label</label>
Link
<input id="input-1" type="text" placeholder="Placeholder">
</div>
Thanks.
It's not a technical WCAG (accessibility) failure. You have the label associated with the <input> by using the for attribute. This allows the label to be announced when a screen reader user tabs to the input field, so that's great. It also allows mouse user to click on the label text and have the focus automatically move to the input field.
However, it's a little odd to have a link between the two. A similar layout is somewhat common for checkboxes (not input fields), especially with "agree to terms and conditions" type of checkboxes. The "terms" is often a link contained within the label whereas in your example, the link is outside the label.
<input type="checkbox" id="mycheck">
<label for="mycheck">Agree to terms and conditions</label>
Similar to your example, a screen reader user will hear the label when they tab to the checkbox ("agree to terms and conditions, checkbox, unchecked"). If they tab again, they'll hear "terms and conditions, link". If they click on the non-link part of the label, the checkbox will toggle. If they click on the link part of the label, the link will navigate to the "terms" page and the checkbox will not toggle. It's a little funky but doesn't fail WCAG.
So back to your example, should the link be part of the label or should it be outside the label? Either way it's not an accessibility failure. You have to decide which behavior you want. If you need the link to be announced as part of the input field's label then the link should be embedded in the label (a child element of the <label>).
I have 4 check boxes and labels corresponding to each is a hyperlink which takes user to the start page of that particular topic. So basically selecting the checkbox has a different function while activating the link performs another function.I know it is not a recommended practice, but can I mark it against any WCAG criteria?
Short answer, 'yes', it violates WCAG 3.2.2 On Input, which is a A (single-A) requirement.
It's not really a great UX for anyone. When you programmatically associate a label with a checkbox using the for attribute such as:
<input type="checkbox" id="foo">
<label for="foo">history</label>
this allows mouse users to click on either the box itself or on the label. If you make the label a link, then clicking on the label will navigate to the links destination instead of checking the box. This would violate the Understandable principle of WCAG, in particular, 3.2.2 On Input
From a screen reader perspective, the issue isn't as bad. For the following code:
<input type="checkbox" id="foo">
<label for="foo">
history
</label>
<input type="checkbox" id="bar">
<label for="bar">favorites</label>
as I tab through the interface, I will hear "history checkbox, not checked" and "favorites checkbox, not checked". Those sound normal. However, in between those two I will hear "history link". The history link will seem to be just "floating out there" in between two checkboxes. The checkboxes will behave correctly and the link will behave correctly, but only because a screen reader user that is not using any vision will not attempt to select the link as the checkbox label.
If you have a low vision user that augments their sight by using a screen reader, they may see some semblance of a checkbox and a label and try to click the label with the mouse and will be confused if taken to a link destination.
I'm trying to implement more accessibility to the website I'm working on. I have a custom checkbox inside a button, followed by a list of checkboxes. When I'm using a screenreader, I expect the screen reader to tell me whenever a checkbox is unmarked/marked. This works for all the checkboxes, except the one inside my button. The purpose of the button is to mark/unmark all other checkboxes in the list (this is done by JavaScript). Everything works, except the screenreader is not saying anything when I unmark/mark it.
Here the code:
<button id="checkAll" class="btn btn-default checkAll checkAllInit"
data-target="#everyCheckbox">
<span class="icon icm icm-checkbox_select" role="checkbox"></span>
<span class="text">Unmark all</span></button>
What follows is basically a list of checkboxes, which all can be reached and understood by keyboard navigation and the screen reader. It's just the button that won't give the correct feedback.
Any suggestions appreciated.
It's not valid html. You can use https://validator.w3.org/nu/ to check your code. A <button> cannot have any interactive components nested in it. See https://www.w3.org/TR/html53/sec-forms.html#the-button-element
Content model: Phrasing content, but there must be no interactive
content descendant.
This will confuse the screen reader. You either need a simple button or a simple checkbox.
If you're not using a native <input type='checkbox'>, then you need role='checkbox' and aria-checked. Just toggle the value of aria-checked between true and false in your javascript and the screen reader will announce the change.
First of all, a button element cannot contain any "interactive content", i.e. no other form controls, audio elements, video elements, etc.
Ideally, you should use native HTML elements, i.e. a form element to wrap around the checkboxes and buttons, and the input element with its type set to checkbox. You'll also need to associate labels with the checkboxes. With these native elements, you don't need WAI-ARIA attributes such as role='checkbox' and aria-checked; these WAI-ARIA attibutes are actually redundant (see e.g. the article On HTML belts and ARIA braces .)
If you have good reasons to create custom checkboxes using a combination span, CSS and JavaScript, you will need additional markup to make these checkboxes accessible:
tabindex="O" to make sure that keyboard users can reach the checkbox,
role='checkbox' to enable screen readers to figure out what type of element they are dealing with,
aria-checked (with the values true or false) to enable screen readers to figure out the state of the checkbox,
aria-labelledby to associate a "label" with the checkbox.
As you can see, if you use custom elements where HTML has native elements, you create a lot of extra work for yourself.
Please see this code for better understanding that how to write accessible checkboxes.
Please define the checkboxes like this:
<h1>Show checkboxes:</h1>
<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
By using this method the checkboxes will be properly accessible by default and also, screen reader will announce the state.
If there are custom checkboxes which are to be made accessible, then please refer:
https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074
I have this code:
HTML:
<label>
<input class="checkable" type="checkbox" value="6" name="Peak">
<button class="button">1</button>
</label>
<label>
<input class="checkable" type="checkbox" value="12" name="Peak">
<button class="button">2</button>
</label>
CSS:
label > .checkable{
display:none;
}
label > .checkable + button{
cursor:pointer;
margin:1px;
border-radius: 16px;
border:transparent;
width:32px;
height:32px;background: rgba(0,0,0,0);
}
label > .checkable:checked + button{
background-color:#690b0c;
color:white;
border-radius: 16px;
}
I am combining a checkbox with a element. When you click on one of these buttons they should get a red round background. This works as expected in IE 11 but in the newest version of Firefox there seem to be some problems.
Does Anyone have a workaround on this?
Fiddle: https://jsfiddle.net/jjqg5apa/
Here is a reply from Tooru Fujisawa:
This won't be a spec issue nor a Firefox's bug.
I believe Firefox 38+'s behavior matches to what the spec says.
https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10
The activation behaviour of a label element for events targeted at
interactive content descendants of a label element, and any descendants of
those interactive content descendants, must be to do nothing.
https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, ...
When you click a button inside a label, the label's activation behavior must be "to do nothing" because the button is an interactive content, it means that we should think that user want to activate the button, instead of the enclosing label, so it won't change the checkbox's state by clicking the button.
I think you could use non-interactive content instead of the button (not sure if it's good for a11y tho), or just unhide the checkbox and use it instead of the button.
see full bug report: bugzilla.mozilla.org/show_bug.cgi?id=1197770