In the realm of digital accessibility, landmarks and correct markup serve as the backbone of an inclusive and user-friendly web experience. By understanding the significance of landmarks and implementing them with proper markup using HTML and ARIA (Accessible Rich Internet Applications), we can ensure that websites and applications are accessible to all individuals, regardless of their abilities. In this article, we will delve into the importance of landmarks, explore their role in digital accessibility, and learn how to utilize them effectively through HTML and ARIA attributes.
Understanding Landmarks and Their Role in Digital Accessibility
Landmarks are structural elements within a web page that define its organization and provide clear navigational cues. These landmarks, such as headers, footers, navigation bars, main content areas, and sidebars, help users navigate and comprehend the content more easily. In the context of digital accessibility, landmarks play a crucial role in assisting individuals who rely on assistive technologies, such as screen readers, to navigate and understand web content.
Landmarks provide the following benefits in digital accessibility
Improved Navigation
By properly implementing landmarks, we create a logical structure that enables users to navigate through a webpage’s sections more efficiently. Individuals with visual impairments or cognitive disabilities heavily rely on screen readers to access content. Landmarks act as signposts, allowing them to skip directly to relevant sections, eliminating the need to traverse through irrelevant content.
Contextual Understanding
Landmarks provide important contextual information about the purpose and structure of different sections within a webpage. When marked up correctly, assistive technologies announce the landmark name, aiding users in understanding the overall layout and purpose of the webpage. This contextual understanding facilitates comprehension and enhances interaction with the content.
Screen Reader Efficiency
Properly marked landmarks enhance the efficiency of screen reader usage. Users can navigate directly to the desired sections, bypass repetitive content, and access crucial information without having to go through the entire page. By streamlining the content consumption process, landmarks make it easier for individuals with disabilities to locate and consume relevant information quickly.
Utilizing Landmarks and Correct Markup with HTML and ARIA
HTML and ARIA provide powerful tools for implementing landmarks and enhancing digital accessibility. Let’s explore how we can use them effectively:
HTML5 Semantic Elements: HTML5 introduced a set of semantic elements that help define the structure and purpose of different sections within a webpage. For instance, the <header>, <footer>, <nav>, and <main> elements can be used to mark up the corresponding sections.
Here are some commonly used types of landmarks:
- Header: The header landmark typically contains the branding, logo, site title, and primary navigation of a webpage. It serves as the introductory section and provides essential information about the website.
- Footer: The footer landmark is placed at the bottom of a webpage and typically includes copyright information, legal notices, contact details, and additional navigation links. It serves as a closing section and offers supplementary information or actions.
- Navigation: The navigation landmark represents the primary navigation menu of a website. It contains links to various pages or sections within the website and helps users navigate to different areas.
- Main: The main landmark denotes the main content area of a webpage. It holds the primary content, such as articles, blog posts, or product descriptions. It should only be used once per page to define the central focus of the content.
- Aside: The aside landmark represents secondary content or supplementary information that is related to the main content but not directly part of it. It can include sidebar elements, advertisements, or additional resources.
- Complementary: The complementary landmark signifies content that is indirectly related to the main content but enhances it. This can include related articles, suggestions, or additional information that provides a broader context.
- Search: The search landmark represents the search functionality on a website. It allows users to enter keywords or queries and retrieve relevant information within the website.
- Form: The form landmark indicates a section of a webpage that contains a form. This includes input fields, checkboxes, radio buttons, dropdown menus, and submission buttons. It assists users in interacting with and submitting data.
- Article: The article landmark represents a self-contained composition, such as a blog post, news article, or forum post. It contains distinct content that can be independently distributed or referenced.
- Region: The region landmark defines a generic section within a webpage that doesn’t fit into any specific landmark type. It can be used to identify custom or unique sections that require accessibility support.
These are some common types of landmarks that developers can use to structure web content and enhance digital accessibility. Properly implemented landmarks contribute to a more organized, navigable, and inclusive web experience for all users, particularly those relying on assistive technologies.
ARIA Landmark Roles:
ARIA (Accessible Rich Internet Applications) attributes can be used to enhance the functionality and accessibility of landmarks. The role attribute, combined with the appropriate landmark roles, helps identify and describe different sections within a webpage. For example, the role="banner" can be used to define the header, role="navigation" for the navigation menu, and role="main" for the main content area. By specifying these landmark roles, we provide explicit instructions to assistive technologies and improve the overall accessibility of the webpage.
Here are Some Commonly Used ARIA Landmark Roles:
- role=”banner”: Indicates the landmark represents a banner or header section typically containing site branding, logos, and primary navigation.
- role=”navigation”: Identifies the landmark as a navigation menu, providing links to various pages or sections within the website.
- role=”main”: Specifies the landmark as the main content area of a webpage. It contains the primary content, such as articles, blog posts, or product descriptions.
- role=”complementary”: Indicates a section that is indirectly related to the main content but enhances it. This can include related articles, suggestions, or additional information that provides a broader context.
- role=”contentinfo”: Represents the landmark as supplementary information, typically found in the footer section of a webpage. It can include copyright information, legal notices, or contact details.
- role=”search”: Identifies the landmark as a search functionality or search form on a webpage. It allows users to enter keywords or queries and retrieve relevant information within the website.
- role=”form”: Specifies a section as a form, which contains input fields, checkboxes, radio buttons, dropdown menus, and submission buttons. It helps users interact with and submit data.
- role=”region”: Represents a generic section within a webpage that doesn’t fit into any specific landmark role. It can be used to identify custom or unique sections that require accessibility support.
ARIA Descriptive Attributes:
In addition to landmark roles, ARIA provides descriptive attributes that further enhance accessibility.
Here are Some Commonly Used ARIA Descriptive Attributes for Landmarks:
- aria-label: This attribute allows you to provide a concise text alternative that describes the purpose or function of a landmark. It is particularly useful when a landmark does not have visible text or when the existing text is not sufficient to convey its meaning.
Example: <nav aria-label="Primary Navigation">...</nav>
- aria-labelledby: The aria-labelledby attribute associates a landmark with an element on the page that serves as its label. The labeled element provides a descriptive text that helps users understand the purpose or content of the landmark.
Example: <main aria-labelledby="main-heading">...</main> <h1 id="main-heading">Main Content</h1>
- aria-describedby: This attribute links a landmark to an element that provides additional descriptive information about the landmark. It can be used to reference an element that elaborates on the content or purpose of the landmark.
Example: <aside aria-describedby="sidebar-description">...</aside> <p id="sidebar-description">Additional information and related resources</p>
By using these ARIA descriptive attributes, you can provide more detailed information about landmarks, making them more informative and accessible to individuals using assistive technologies. These attributes contribute to a comprehensive and inclusive browsing experience, allowing users with disabilities to navigate and understand web content more effectively.
Landmarks and correct markup using HTML and ARIA are integral components of digital accessibility. By implementing landmarks, we enable users with disabilities to navigate and comprehend web content more effectively. By utilizing HTML5 semantic elements and ARIA attributes, we can mark up landmarks with clear roles, labels, and descriptions, ensuring an inclusive and user-friendly web experience. Let us embrace the power of landmarks and correct markup to create a digital landscape that caters to the diverse needs of all individuals, fostering accessibility, inclusivity, and equal opportunities for everyone.
What is next?
In our next installment, we’ll discuss the importance of landmarks for Screen reader and how they promote inclusivity and ease of use for individuals relying on Screen reader . Stay in touch!
For more information on why accessibility is important in general, you can check out my previous blog post here.
For further information on how to make your product accessible to your audience, contact our experienced design experts, check out our Accessibility IQ for your website, download our guide Digitally Accessible Experiences: Why It Matters and How to Create Them, read more from our UX for Accessible Design series.
