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
andaria-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
andaria-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
andaria-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
andaria-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” thannote
. - 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
4 Comments
In my RSS reader, I just got the raw markdown and it looked fine.
In response to .Sweet. Thanks!
In response to .Same for me here (Flym on Android).
In response to .Same, the backticks just showed in the post title. I use Feedbin
Leave a Comment or Response