[orion-dev] Web Accessibility Tip of the Day: Tip #4

[Carolyn MacLeod <Carolyn_MacLeod@xxxxxxxxxx>]

Tip #4: Use HTML5 section elements and
ARIA landmark roles to semantically organize pages.

HTML5 introduced 8 semantic sectioning
elements [1] 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 [2] 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
results.

Here are some samples:
<main id="main"> for
the main content of the page,
<header role="banner">
for the masthead of the site,
<nav role="navigation">
for each list of navigation links,
<form role="search">
for a search form,
<form role="form"> for
a form,
<aside role="complementary">
for related information in a sidebar,
<footer role="contentinfo">
for copyright and contact info at the bottom,
<article role="article">
for an article,
<div role="application">
for a complex custom control (more on this in tip #5),
<section role="region">
for a region that doesn't have any of the above semantics.

Here are 7 steps to guide you through
the thought process for breaking your page into semantic regions:
http://www.w3.org/WAI/PF/aria-practices/#kbd_layout_landmarks

Car

[1] http://www.w3schools.com/html/html5_semantic_elements.asp
[2] http://www.w3.org/WAI/PF/aria/roles#landmark_roles