HTML landmarks are used to categorize and group content on a web page for better accessibility and SEO.[1]

Sectioning elements

HTML5 included the addition of the following content sectioning elements, which inherit default landmark roles:[2]

HTML Sectioning Elements and Their Default Landmark Roles
Element Default Landmark Role
<header> banner when in the context of the <body> element. The <header> element is not a banner landmark when it is a child of any of the following sectioning elements: <article>, <aside>, <main>, <nav>, <section>.[3]
<nav> navigation
<main> main
<aside> complementary
<form> form when it has an accessible name using one of the following attributes: aria-labelledby, aria-label, or title.[3]
<footer> contentinfo when in the context of the <body> element. The <footer> element is not a contentinfo landmark when it is a child of any of the following HTML sectioning elements: <article>, <aside>, <main>, <nav>, <section>.[3]
<section> region when it has an accessible name using one of the following attributes: aria-labelledby, aria-label, or title.[4]

Landmark roles

The role attribute is used to define an element's role on a page. When sectioning elements were introduced, the role attribute became used less for landmarking. This is because roles were applied by default to most sectioning elements, therefore, they were more widely used and accepted for their simplicity.[5]

The role attribute is not only used for assigning roles to content sections. The attribute can also be used to assign roles to many other elements, although it is used less nowadays due to new semantic HTML elements.[6]

Examples

<div role="banner">
    <h1>Hello, world!</h1>
</div>

The code above is the same as the following more widely accepted version:[7]

<header>
    <h1>Hello, world!</h1>
</header>

Misuse

Following the addition of sectioning elements in HTML5, there was confusion regarding whether role attributes were needed for sectioning elements. It is in fact redundant to give sectioning elements the role attribute.[8]

Additionally, you should not try to alter sectioning elements' default roles.[9]

Examples of misuse

The role of main on the <main> element is useless, as it already inherits that role as its default landmark role:

<main role="main">
    <p>Hello world!</p>
</main>

Applying the form role to <header> is semantically improper, because it overrides <header>'s the default role of banner:

<header role="form">
    <!--Some HTML code here-->
</header>

See also

References

  1. ↑ Clark, Richard; Studholme, Oli; Murphy, Christopher; Manian, Divya. Beginning HTML5 and CSS3. pp. 75–81.
  2. ↑ Wood, Adam. "HTML5: What's New in The Latest Version of HTML?". HTML.com. Retrieved 2022-03-13.
  3. 1 2 3 "HTML Sectioning Elements: ARIA Landmarks Example". www.w3.org. Retrieved 2022-03-13.
  4. ↑ "ARIA: region role - Accessibility | MDN". developer.mozilla.org. Retrieved 2022-03-13.
  5. ↑ "How Not To Use Aria". cccaccessibility.org. Retrieved 2022-03-13.
  6. ↑ "Using ARIA: Roles, states, and properties - Accessibility | MDN". developer.mozilla.org. Retrieved 2022-03-13.
  7. ↑ "How to Use ARIA Roles, Properties, and States in HTML". Web Design Envato Tuts+. 17 November 2020. Retrieved 2022-03-13.
  8. ↑ "WAI-ARIA Authoring Practices 1.1". www.w3.org. Retrieved 2022-03-13.
  9. ↑ "Using ARIA". www.w3.org. Retrieved 2022-03-13.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.