HTML and CSS Reference
In-Depth Information
During this transitional time, if you want to use HTML5 sliders,
add some WAI-ARIA information, which for the time being will
result in some duplication:
<input id=tap
name=tap
type=range
min=1
max=11
value=0
aria-valuemin=1
aria-valuemax=11
aria-valuenow=0>
Update aria-valuenow with JavaScript when the slider position is
changed. In this case, you'll want to bind to the change event on
the slider; in our example, we'll just use the onchange attribute.
Unfortunately, we can't use the property syntax to update the
aria-valuenow value; we have to update the DOM attribute for
the value to update correctly:
<input id=tap
name=tap
type=range
min=1
max=11
value=0
aria-valuemin=1
aria-valuemax=11
aria-valuenow=0
onchange=”this.setAttribute('aria-valuenow',
¬ this.value)”>
This will update the value of the aria-valuenow attribute, and
can be tested if you inspect the element using a DOM inspector.
NoTE In the first edition
of this topic, I added a
role=slider attribute to tell
assistive technology how to map
the control to operating system
controls. I was wrong, or at least
premature. In an ideal world of
full browser support (one day,
dear reader, one day), this would
be fine. But for now, don't do it
declaratively; do it in JavaScript
after seeing if input type=range
is supported. (See the “Back-
wards compatibility with legacy
browsers” section below.) In
browsers that don't support
type=range, setting it declara-
tively adds a role of slider on a
plain text input which would be
wrong and very confusing to an
assistive technology user.
 
Search WWH ::




Custom Search