Tuesday, February 11, 2025
HomeJavaScriptA "part" with out an accessible identify is nothing however a "div"

A “part” with out an accessible identify is nothing however a “div”


I used to be studying Vadim’s submit on coloration theme switching once I found an attention-grabbing code snippet.

<part aria-label="Shade scheme switcher">
  <button aria-pressed="false" worth="gentle">
    Gentle
  </button>
  <button aria-pressed="true" worth="gentle darkish">
    Auto
  </button>
  <button aria-pressed="false" worth="darkish">
    Darkish
  </button>
</part>

The HTML for his coloration theme switcher contains three buttons, and every indicators its state with aria-pressed. To date, so good. However did you discover the part aspect? Why does Vadim use a <part>, and why does it embrace an aria-label?

When must you use the part HTML aspect?

I’ve recognized concerning the <part> aspect for a few years, however I have to admit that I not often use it. So, I did some digging. Here is the <part> definition from MDN:

The “part” HTML aspect represents a generic standalone part of a doc, which does not have a extra particular semantic aspect to characterize it. Sections ought to all the time have a heading, with only a few exceptions.

General, this definition is not useful, however to search out some solutions Bruce’s article on article and part parts is golden. Sadly, the submit has some damaged pictures, however it’s nonetheless nice!

Here is the tl;dr:

The <part> aspect was launched to assist the concept of a doc define, which might have enabled “good headings”. An HTML doc with a number of <h1>s can be honest recreation if nested appropriately in sectioning parts. Sadly, browsers by no means applied this doc define performance. So, often, you need not trouble enthusiastic about sections, except…

you wish to sign to a display reader person the place an necessary part begins and ends. Bruce’s article showcases the abstract of Smashing Journal articles.


<part aria-label="Fast abstract">
  ...
</part>

Once you examine the abstract’s HTML, you may uncover that the aspect has a correctly accessible identify outlined by way of aria-label and the function area due to the <part> aspect.

Chrome DevTools highlighting the accessible name "Quick Summary" and role "region"

The accessible identify and function are necessary for assistive know-how.

Each time utilizing aria-label concentrate on its translation points. For that cause, it is typically advisable to make use of aria-labelledby as a substitute.

The significance of landmark roles

Each time the browser parses HTML, it’s going to first create the DOM tree after which use the DOM tree to supply a content material illustration that can be utilized by assistive applied sciences — the accessibility tree. Much like the DOM tree, the accessibility tree accommodates nested objects that then embrace a reputation, description, and function, amongst different issues.

To take an instance from MDN:

<button aria-describedby="trash-desc">Transfer to trash</button>

<p id="trash-desc">
  Objects within the trash can be completely eliminated after 30 days.
</p>

This HTML button has the identify “Transfer to trash”, the outline “Objects within the trash can be completely eliminated after 30 days.” and the function button. This info is represented within the accessibility tree and may be picked up by assistive know-how.

DevTools showing the accessibility tree for a button with a name, description and role.

The function property typically describes no matter “a factor” is, and all of the roles are grouped into six classes:

  • Summary Roles
  • Widget Roles
  • Doc Construction Roles
  • Landmark Roles
  • Stay Area Roles
  • Window Roles

The <part> HTML aspect is mapped to the area function and is a part of the landmark roles.

Landmark roles outline landmark areas and allow assistive know-how like display readers to navigate your HTML doc. For instance, this is a screenshot of how I can use VoiceOver to navigate all landmarks on this web site.

Example showing the landmark navigation for stefanjudis.com

Fairly cool. Only some HTML parts default to landmark roles, although.

  • banner<header>
  • complementary<apart>
  • contentinfo<footer>
  • kind<kind>
  • principal<principal>
  • navigation<nav>
  • area<part>
  • search<search>

And there is a catch: a few of these HTML parts solely develop into landmarks beneath sure circumstances. For instance, varieties are solely uncovered as landmarks once they have an accessible identify, and at the moment I discovered that the identical applies to part parts.

A <part> solely will get the function area (and turns into a navigatable landmark) if it has an accessible identify. In any other case, its function can be generic. Are you aware what parts have the generic function? <div> and <span>, they’re simply generic container parts.

For the article abstract (and the colour theme switcher), because of this with out the aria-label the part won’t be uncovered as landmark.

VoiceOver example showing that a section without accessible name is not accessible via landmark navigation.

And with out an aria-label or aria-labelledby, <part> parts develop into nothing however generic containers that will not be accessible by way of landmark navigation.

The place does this discovery deliver us?

  1. Typically, you possibly can neglect about sections as a result of they have been launched to assist the define algorithm, which by no means went anyplace.
  2. If you wish to expose an necessary space in your web site, test in case you can set a landmark with a becoming aspect (<nav>, <header>, and so on.)
  3. If nothing suits, use <part>, however keep in mind to supply an accessible identify by way of aria-label or aria-labelledby. In any other case your part will not present an accessibility profit.

Now, bear in mind that I am no accessibility professional, and I solely examined the landmark navigation in VoiceOver. However I feel the spec may be very clear on this subject. Regardless, my inbox is all the time open if in case you have any corrections or suggestions.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments