Skip to content

Notice box semantics

Noted by on his .


I’d rather make a notice a <section> with a heading, or an <aside> if it’s not related to the surrounding content.

You could even add a more specific ARIA (or DPUB-ARIA) role like role="note", role="doc-pullquote", role="doc-tip", etc. But don’t use them unless you have multiple kinds of aside elements and need to help people skim.

Most of these roles actually map to the section superclass rather than the complementary role of aside, which isn’t always a problem: the aside element tells reader-mode implementations to remove the element, but the role tells assistive technologies more useful information. I use a similar hack for my in-page section permalinks.

If the notice is important to the surrounding content and reader-mode shouldn’t remove it, use a section.


Web­mentions

This site supports Webmentions, a backlink-based alternative to traditional comment forms.

Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.

Webmentions received for this post appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. I replace broken links with Wayback Machine snapshots, if they exist.

Toggle Webmentions
by

This comment may have major formatting errors that could impact screen reader comprehension.

@tdarb I’d rather make a notice a <section> with a heading, or an <aside> if it’s not related to the surrounding content.You could even add a more specific ARIA (or DPUB-ARIA) role like role="note", role="doc-pullquote", role="doc-tip", etc. But don’t use them unless you have multiple kinds of aside elements and need to help people skim.Most of these roles actually map to the section superclass rather than the complementary role of aside, which isn’t always a problem: the aside eleme…

by

This comment may have major formatting errors that could impact screen reader comprehension.

@tdarb @fullstackthaumaturge Another thing I like about the section-based approach is that it looks good enough with browser default styles, including most reader-mode implementations. I’ve tested it with Chromium DOM Distiller, Edge’s Azure Immersive Reader, Safari’s Reader View, Firefox Readability, and Brave Speed Reader. They all predictably remove <aside> but preserve <section>, and emphasize the headings.Styling should not be a concern when designing semantics; however, looking ok…

by

@fullstackthaumaturge @tdarb while that works, I feel my solution is more efficient as it requires less HTML when writing content and a lot less CSS.In WP, all I meed to do is create a mew paragraph and add the class in the advanced menu. The CSS does the rest. 😊

by

This comment may have major formatting errors that could impact screen reader comprehension.

@kev @fullstackthaumaturge @tdarb One thing I like about having full control of my markup is being able to add arbitrary HTML elements and DPUB-ARIA roles, both of which are helpful for callouts. Callouts should have appropriate roles and labels, whether implicit or explicit.I don’t like the idea of working around the limitations of a CMS by ignoring those limits; if a CMS doesn’t let you make semantic callouts, maybe the answer is to avoid callouts instead of avoiding semantics. Notice b…

by

WordPress supports custom HTML blocks, so you can add any arbitrary HTML you like.@fullstackthaumaturge @tdarb

Feel free to contact me directly with feedback; here’s my contact info