ARIA `note`

Trying Markdown code indicators in my post title, not because I want it to convert, but because I am curious if people will ping me to tell me it broke their RSS readers. Oh, and so it converts to code when pasted into your GitHub issues.

ARIA note Role

A section whose content is parenthetic or ancillary to the main content of the resource.

The note role supports name from author (such as aria-label or aria-labelledby) but not name from content. It is a document structure role, which essentially means it’s just another flavor of <section> (which has the implicit section abstract role).

ARIA note Role Tests

I may have missed some obvious gotcha here. I do that. Weird hobby, yeah, but let’s not hobby shame.

See the Pen Testing `note` Role Exposure by Adrian Roselli (@aardrian) on CodePen.

ARIA note Role Test Results

I very quickly tested role="note" five different ways across seven browser/SR combos:

Firefox 122:

with NVDA 2023.3:

Chrome 121:

with JAWS 2024:

Edge 121:

with Narrator Win11 23H2:

Safari 17.3:

with VoiceOver / macOS 14.3:

Chrome 120 with TalkBack 14.1:

Firefox 121 with TalkBack 14.1:

Safari / iPadOS 17.3 with VoiceOver:

ARIA note Role Test Results Interpretation

An open book with hand-drawn boxes around (1) a few lines of very enlarged text with quote marks behind it, (2) an image of a form with caption below it, and (3) a block of content styled with a different background color and its own heading.
I wanted a physical example of related content on a page, and my ego demanded my 2002 book since all it does is hold the door open. In web parlance, 1 represents a block quote, 2 is a figure and caption, and 3 is an aside.

Depending on your goal with using the note role, you may find it is not exposed to screen readers the way you want. If you are using it as intended, that may not be an issue.

If you are using it in other ways, then look at the HTML elements that already exist and see which is the best fit for your content.

For example:

Each of those has slightly different rules for how it is exposed to users. Don’t necessarily pick them just for that exposure.

For context, I performed this testing for WHATWG HTML issue #10100 <callout> element for callouts/alerts/admonitions. I didn’t want it to be lost there because I spent a bunch of time on it.

4 Comments

Reply

In my RSS reader, I just got the raw markdown and it looked fine.

deborah kaplan; . Permalink
In response to deborah kaplan. Reply

Sweet. Thanks!

In response to deborah kaplan. Reply

Same for me here (Flym on Android).

deltragon; . Permalink
In response to deborah kaplan. Reply

Same, the backticks just showed in the post title. I use Feedbin

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>