Callouts HTML headings level for a11y #37607
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
On many pages, Bootstrap added callouts to inform, warn or alert readers about specific problems. 33 of them begin with HTML heading.
- Live example in drodpdowns: https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#rtl
- Live example in tooltips: https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#overflow-auto-and-scroll
For those callouts (having a HTML heading), there is sometimes a problem with the title level, which does not follow directly the previous title level, which is recommended for accessibility purposes.
Is a HTML heading really needed there ? It makes the callouts title enter into the page table of contents, which is strange. I would suggest to use a <div> with a class like .h5. Moreover, it would harmonize the look of all callouts having HTML heading (they currently have different headings level and look slightly different).
Among the 33 callouts with HTML heading,15 have a heading level issue (see list below).
Reduced test cases
Screen copy of callout with HTML heading:
List of callouts having HTML heading:
- Overview/RTL:
- https://twbs-bootstrap.netlify.app/docs/5.2/getting-started/rtl/#experimental-feature: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/getting-started/rtl/#edge-cases-and-known-limitations: no heading level problem
- Customize/optimize:
- https://twbs-bootstrap.netlify.app/docs/5.2/customize/optimize/#default-exports: no heading level problem
- Content:
- Reboot:
- Tables:
- Forms/overview:
- Components:
- Alerts:
- Badge:
- Breadcrumb:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/breadcrumb/#using-embedded-svg: no heading level problem
- Buttons:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/buttons/#conveying-meaning-to-assistive-technologies: h5 after h2
- Button-group:
- Card:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/card/#conveying-meaning-to-assistive-technologies: no heading level problem
- Carousel:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/carousel/#asynchronous-methods-and-transitions: no heading level problem
- Collapse:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/collapse/#asynchronous-methods-and-transitions: no heading level problem
- Dropdowns:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#rtl: h4 after h2
- https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#data-bs-toggledropdown-still-required: h4 after h2 (and not really suitable text for a heading)
- List-group:
- Modal:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/modal/#asynchronous-methods-and-transitions: no heading level problem
- Nav & tabs:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/navs-tabs/#asynchronous-methods-and-transitions: no heading level problem
- Offcanvas:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/offcanvas/#asynchronous-methods-and-transitions: no heading level problem
- Popovers:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#specific-markup-required-for-dismiss-on-next-click: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#making-popovers-work-for-keyboard-and-assistive-technology-users: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#data-attributes-for-individual-popovers: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#asynchronous-methods-and-transitions: no heading level problem
- Progress:
- Toasts:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/toasts/#asynchronous-methods-and-transitions: no heading level problem
- Tooltips:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#overflow-auto-and-scroll: h5 after h2
- https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#making-tooltips-work-for-keyboard-and-assistive-technology-users: h5 after h3
- https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#data-attributes-for-individual-tooltips: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#asynchronous-methods-and-transitions: no heading level problem
- Utilities/colors:
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
v5.2