Accessible names
This page is out-dated and need some review.
Label, aria-label, aria-labelledby, aria-describedby, what should my screenreader read?
Exact words for roles and reading order might differ per screenreader. Every unnecessary piece of code for the example has been omitted. Of course use classnames, id's and css instead of inline style.
code | implemented | screenreader |
---|---|---|
|
Hello button | |
|
Goodbye button | |
|
Goodbye | Goodbye button |
|
Goodbye | Goodbye Hello button |
|
Goodbye | Hello button Goodbye |
bad example
|
Hello
|
clickable Hello |
bad example
|
Hello
|
Hello button |
code | implemented | input name |
---|---|---|
|
First | |
|
Error message | First ... Error message |
bad example
|
First | |
Strange. This seems to work, while you should not put an aria-label on a span. |
First required | |
|
First required | |
bad example
|
||
bad example
|
Second | |
bad example
|
Second | |
bad example
|
||
bad example
|
First | |
bad example
|
||
bad example
|
||
bad example
|
Second | |
|
First | |
|
First |
First |
bad example
|
First
First
|
|
|
First
|
First |
|
First
Error: Error message
|
First, Error: Error message |
|
Error: Error message
|
First, Error: Error message |