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:

• Shows all as “Note” in the accessibility tree.
• Shows an accName only for those using aria-label and aria-labelledby.

with NVDA 2023.3:

• Makes no announcement of region entrance or exit.
• Is not listed in landmarks list.

Chrome 121:

• Shows all as “Note” in the accessibility tree.
• Shows an accName only for those using aria-label and aria-labelledby.

with JAWS 2024:

• Announces “note” when entering and exiting.
• Announces accName only when using aria-label.
• Not exposed in regions list.
• Not navigable as regions.

Edge 121:

• Shows all as “Note” in the accessibility tree.
• Shows an accName only for those using aria-label and aria-labelledby.

with Narrator Win11 23H2:

• Makes no announcement of region entrance or exit unless labeled via aria-label.
• Announces accName only when using aria-label.
• Not exposed in landmarks list.
• Not navigable as landmarks.

Safari 17.3:

• Shows all as “Note” in the accessibility tree.
• Shows an accName only for those using aria-label and aria-labelledby.

with VoiceOver / macOS 14.3:

• Makes no announcement of region entrance or exit.
• Is not listed in landmarks / regions list.

Chrome 120 with TalkBack 14.1:

• Makes no announcement of region entrance or exit unless labeled via aria-label.
• Announces accName only when using aria-label.
• Not navigable as landmarks.

Firefox 121 with TalkBack 14.1:

• Makes no announcement of region entrance or exit.
• Announces no accName.
• Not navigable as landmarks.

Safari / iPadOS 17.3 with VoiceOver:

• Makes no announcement of region entrance or exit.
• Announces no accName.
• Not navigable.

ARIA note Role Test Results Interpretation

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:

• If you are creating a pull-quote (to use print media terms) or quoting more than a few words, then use <blockquote>. Browser and screen reader support for <blockquote> is “better” than note.
• If there is a chart, table, image, video, etc. that could stand on its own (with a caption) but is referenced from the main content, then <figure> might be the best fit.
• If the content is tangentially related, and which could be considered separate, then use <aside>.

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.