HTML and CSS Reference
In-Depth Information
the visible value to whatever you set the slider to. This could be con-
sidered akin to this.innerHTML and value is just acting as a shortcut.
The output element can be styled with CSS (although currently
it's only supported in Opera).
Using WAI-ARIA for transitional accessibility
Although we said that <input type=range> removed responsibil-
ity for accessibility from the developer, that's only true when
HTML5 is widely supported and assistive technology under-
stands this new type of form input.
During this transitional time, if you want to use HTML5 sliders,
you should also 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=10
value=0
role=slider
aria-valuemin=1
aria-valuemax=11
aria-valuenow=0>
role=slider tells assistive technology how to map the control to
operating system controls. You should update aria-valuenow with
JavaScript when the slider position is changed. In this case you
would want to bind to the change event on the slider; in our exam-
ple 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=10
value=0
role=slider
aria-valuemin=1
aria-valuemax=11
aria-valuenow=0
onchange=”this.setAttribute('aria-valuenow',
¬ this.value)”>
 
Search WWH ::




Custom Search