1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-14 17:42:09 +00:00
seirdy.one/content/notes/notice-box-semantics.md

18 lines
1 KiB
Markdown
Raw Normal View History

2022-09-22 16:10:44 +00:00
---
title: "Notice box semantics"
date: 2022-09-22T09:10:41-07:00
2022-11-15 22:50:42 +00:00
replyURI: "https://bt.ht/notice/"
2022-09-22 16:10:44 +00:00
replyTitle: "RE: Creating a Simple HTML/CSS Notice Box"
replyType: "BlogPosting "
replyAuthor: "Bradley Taunt"
2022-11-15 22:50:42 +00:00
replyAuthorURI: "https://bt.ht/"
2022-09-22 16:10:44 +00:00
---
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`.