Use semantic HTML to improve screen reader experiences

In general, I'm a fan of the idea that you should [Use the Platform]. ARIA tags should be the last resort. Often just using semantic HTML will accomplish the same thing in a more robust and cross-platform way (more consistent across assitive tools, browsers, and OSes).

What screen readers do with semantic HTML#

I find it easier to follow rules when I understand the reason behind them. Following semantic HTML is a simple enough idea, but here is a list of some concrete things that screen readers give you when they see semantic HTML.

• Using divs/spans instead of headings, list items, tables
• Screen readers use headings and their levels to quickly navigate structure, much like the equivalent of visually scanning a page for headings
• Screen readers read out context from the current column's header when navigating table cells
• TODO Checking the window dimensions in JS rather than using media queries