Screen reader output as expected

Source: tweet by Steve Faulkner
By the way, don't use the title attribute as seen in this example. Your screen reader might have different output for the title-attribute.


Screen reader
  1. HTML says <a href="#">hello</a>
  2. Screen reader says hello
  3. HTML says <a href="#" title="goodbye">hello</a>
  4. Screen reader says hello goodbye
  5. HTML says <a href="#" aria-label="goodbye">hello</a>
  6. Screen reader says goodbye
  7. HTML says <a href="#" aria-label="goodbye"></a>
  8. Screen reader says goodbye
  9. HTML says <a href="#" title="goodbye"></a>
  10. Screen reader says goodbye
  11. HTML says <a href="#" aria-label="goodbye" aria-labelledby="hi">
    hello <span id="hi">hello</span></a>
  12. Screen reader says hello
Enter message