Accessible names
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 | |
|
First | |
|
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 |