Tip #4: Use HTML5 section elements and
ARIA landmark roles to semantically organize pages.
HTML5 introduced 8 semantic sectioning
elements  to help define areas of a web page:
<header>, <nav>, <section>,
<article>, <aside>, <figcaption>, <figure>, <footer>,
(and new in 5.1 <main>)
Some of these are now supported by the
major browsers and screen readers.
ARIA has 8 landmark roles  to help
define semantic areas of a web page:
application, banner, complementary,
contentinfo, form, main, navigation, search
These are all supported by the major
browsers and screen readers.
Screen reader users can list - and navigate
to - landmark regions; and the name and type of landmark is announced when
the user enters and leaves it.
Some browsers support landmark navigation
without a screen reader, either through a setting or a plugin.
Be sure to give your landmark regions
a name, either with aria-label="Invisible name" or aria-labelledby="visible_name_element_id".
Usually the best visible_name_element
for a landmark region is a <heading> or <h1>.
Some of the section elements and landmark
roles overlap, and (as of this writing) doubling these up will give best
Here are some samples:
<main id="main"> for
the main content of the page,
for the masthead of the site,
for each list of navigation links,
for a search form,
<form role="form"> for
for related information in a sidebar,
for copyright and contact info at the bottom,
for an article,
for a complex custom control (more on this in tip #5),
for a region that doesn't have any of the above semantics.