Use semantic tag elements wherever possible

[gadenbuie]

From the original discussion in #575 (comment)

[I think we should] use a <header> element [for the sidebar title]. We use role="complementary" on the sidebar div, which is equivalent to <aside> (and we should probably switch to using that element directly if we can). Within the aside, we can wrap the sidebar title in <header>, which will cause it to be announced appropriately as a banner even if the title element doesn't have a heading role. In the case when an author knows they should use an appropriately-leveled hX tag, e.g. h3(), they can still give the title argument that tag and the resulting markup is still a good choice – <header><h3>Sidebar Title</h3></header>.

This has led me consider a few more changes:

• Instead of using <div role="main">, should we use an <article> element for the sidebar layout container?

  • The primary complaint is that role="main" should be used once per document.
  • ARIA: main role - Accessibility | MDN
  • : The Article Contents element - HTML: HyperText Markup Language | MDN
  • Why You Should Choose HTML5 article Over section — Smashing Magazine

• Instead of <div role="complimentary"> we can use <aside> for the sidebar itself. I think this is a given if we switch to <article>.

• Should page_navbar() use main()? In other page_() layout functions it's relatively easy to add main() tag (but we could also make that the default), but adding main() in page_navbar() is slightly trickier for the same reasons it has a sidebar argument.

[github-actions]

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.