Posted on by Léonie Watson in Design and development
Tags: Assistive Technology, Code, Foundations, WCAG
Most websites have common areas of content like a header and footer, a main content area, and one or more navigation blocks. Sighted people can identify these areas based on the way they're styled and the content they contain, but people who are blind cannot do that quite as efficiently. Landmarks, like headings and lists, offer screen reader users a more comparable experience for identifying and navigating between different areas of content.
The Cambridge English Dictionary describes a landmark like this:
A building or place that is easily recognised, especially one that you can use to judge where you are.
For example, if you were in London and you could see the tower that contains Big Ben, you would know that you were in Westminster.
Landmarks on the web do the same thing. When you use a screen reader to navigate into an area with a landmark, the screen reader tells you what the landmark is, and you can use that information to work out where you are and what that area of the page is all about.
These are the areas of content most often marked up as landmarks:
Start thinking about landmarks when you begin sketching out designs for your website. As common areas like the header and footer, main content area, navigation, and search start to take shape, annotate your designs to indicate that they should be implemented as landmarks.
If the designs include areas of distinctly styled content that complements the main content, include them in your annotations too.
You can use HTML elements to provide most common landmarks. The exception is the search landmark, which can only be provided using ARIA. If you cannot use the HTML elements you need, you can use ARIA to create them instead.
Use the <header> element
Note that if the <header> element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
Use role="banner" on the element that contains the header content
Note that if the container element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
Use the <footer> element
Note that if the <footer> element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
Use role="contentinfo" on the element that contains the footer content
Note that if the container element is inside an <article>, <aside>, <main>, <nav>, or <section> element, the landmark should not be exposed to screen readers
Use the <main> element
Use role="main" on the element that contains the main content
Use the <nav> element
Use role="navigation" on the element that contains the navigation
Use the <aside> element
Use role="complementary" on the element that contains the complementary information
There is no HTML element with a built-in search landmark
Use role="search" on the element that contains the search
Every screen reader has at least one command or gesture for navigating between landmarks.
Use Capslock + Space to turn on scan mode, then use d to move to the next landmark or Shift + d to move to the previous landmark
Use d to move to the next landmark or Shift + d to move to the previous landmark
Use r to move to the next landmark or Shift + r to move to the previous landmark
Use Control, Option + u to open the rotor, use Left arrow or Right arrow to navigate to the list of available landmarks, then use Up arrow or Down arrow to move to the desired landmark
Swipe up and right in a single gesture, navigate the options until you hear "landmarks", then swipe left or right to find the landmark you want
Rotate two fingers on the screen until you hear "landmarks", then swipe up or down to find the landmark you want
<h1>, immediately after the start of the main landmark as this is a logical place to find itRead more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。