Quantcast
Channel: Live: Left nav, new theming and responsiveness - Meta Stack Exchange
Viewing all articles
Browse latest Browse all 87

Answer by doppelgreener for Live: Left nav, new theming and responsiveness

$
0
0

Make the #content element a main landmark.

The main landmark will help screen reader users jump straight to the main content. It lets screen reader users skip past header and navigation. NVDA screen reader users can for example press D three times to skip to the header landmark, then to the main nav landmark, then to the main content landmark.

(Not all screen reader users know about this ability, and most sites don't implement it, so this should be done in conjunction with skip links, not instead of them.)

Specifically, change it from:

  • <div id="content">

to either one of these:

  • <div role="main" id="content">
  • <main role="main" id="content">

The Main element is a HTML5 semantic element, and effectively identical to <div role="main"> so either one works fine.

Writing <main role="main"> is something we do for IE11 compatibility. (In all other browsers it's redundant.) IE11 came out with support for the main role but without support for the main element, which it treats as unknown but stylable. See Can I Use: HTML5 Semantic Elements. If you use the main element you'll also want to add the following CSS line to your page to tell IE how to render the element: main { display: block; }


Viewing all articles
Browse latest Browse all 87

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>