WIP
Edit me
The aria specification does not specify an native mapping or aria role to the meter element.
I would propose to use the role slider with aria-readonly="true" as fallback. As the both supposed to show a range that is not changeable by the user.
Note:
IE doesn’t natively support the meter elements
Advised markup
Emmet
meter[role="slider"][aria-valuemin="0"][aria-valuemax="1"][aria-readonly="true"][aria-valuenow][value]
HTML
<meter role='slider' aria-readonly="true" aria-valuemin="0" aria-valuemax="1" value="0.3" aria-valuenow="0.3">
</meter>
Screen reader results
Basic
<meter value='0.5'></meter>| Screen reader | ChromeVox 53 | NVDA 2017.4 | Narrator 10 | |||
|---|---|---|---|---|---|---|
| Browser | Chrome 62 | Chrome 63 | Firefox 57 | Edge 16 | Chrome 63 | Edge 16 |
| Spoken output | progress bar, .5 | blank | progress bar 50 | 0% progress bar | 50% meter | |
| Skipped | false | false | false | false | true | false |
Extended with ARIA
<meter value='.4'
role='slider' aria-readonly='true' aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4'
></meter>| Screen reader | NVDA 2017.4 | Narrator 10 | |
|---|---|---|---|
| Browser | Edge 16 | Chrome 63 | Edge 16 |
| Spoken output | slider 40 | slider at 0.400000005960465 | meter at Good |
| Skipped | false | true | false |
Note:
Edge doesn’t work, as it doesn’t allow overriding the role within an meter element
Extended with ARIA including aria-valuetext
<meter value='.4' role='slider' aria-readonly='true' aria-roledescription="score" aria-label="level"
aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4' aria-valuetext='40%'
></meter>| Screen reader | NVDA 2017.4 | Narrator 10 | |
|---|---|---|---|
| Browser | Edge 16 | Chrome 63 | Edge 16 |
| Spoken output | slider 40 | slider at 40% | meter at 40% |
| Skipped | false | true | false |
within low range
<meter low='0.4' value='0.2' min='0' max='1'></meter>| Screen reader | NVDA 2017.4 | Narrator 10 |
|---|---|---|
| Browser | Edge 16 | Edge 16 |
| Spoken output | progress bar 20 | 20% meter |
| Skipped | false | false |
within low range extended with aria
<meter value='.4' role='slider' aria-readonly='true'
aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4' aria-valuetext='low'
></meter>| Screen reader | NVDA 2017.4 | Narrator 10 |
|---|---|---|
| Browser | Edge 16 | Edge 16 |
| Spoken output | slider 40 | meter at low |
| Skipped | false | false |