shadcn-ui
Don't use HTML Section Heading elements
The following lines use an <h3> and an <h5> tag respectively.
https://github.com/shadcn/ui/blob/5a2ce61e2e13b7e0ffc5f9b617080c3009b0fb1c/apps/www/components/ui/card.tsx#L36
https://github.com/shadcn/ui/blob/5a2ce61e2e13b7e0ffc5f9b617080c3009b0fb1c/apps/www/components/ui/alert.tsx#L39
From The HTML Section Heading elements > Usage Notes, this breaks or potentially breaks the following:
- Do not use heading elements to resize text.
- Do not skip heading levels: always start from
<h1>, followed by<h2>and so on.
Instead the font-size and font-weight CSS attributes should be used.
h1 & h5 is perfectly valid to define elements. Can you point out what these two tags break? and what is the benefit of using font-size & font-weight over native elements?
@abhinav-anshul It's not that header elements are invalid and should never be used, it's that they need to describe an actual section of the page and you should not skip levels. How these tags are being used here is simply to resize the text and not (necessarily) to describe an actual section of the page and there is no way to know whether header levels are being skipped or not. Therefore, the best solution is to use CSS only.
a11y Project also highlights the accessibility issues of using heading tags for styling rather that as titlesfor each section of the page
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
