[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
[orion-dev] Web Accessibility Tip of the Day: Tip #4

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