Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

h5 element accessibility issue #26

Open
skyme5 opened this issue Aug 19, 2020 · 2 comments · May be fixed by #34
Open

h5 element accessibility issue #26

skyme5 opened this issue Aug 19, 2020 · 2 comments · May be fixed by #34

Comments

@skyme5
Copy link

skyme5 commented Aug 19, 2020

While doing an accessibility test with admonitions, following warning appears on lighthouse

Heading elements are not in a sequentially-descending order

Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more

because of this

<div class="admonition admonition-tip alert alert--success">
  <div class="admonition-heading">
    <h5><span class="admonition-icon"></span>tip</h5> <!-- This has incorrect order -->

According to W3C standard for heading level

documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.

Consider changing h5 to h1 and use css for styling.
skyme5 added a commit to skyme5/remark-admonitions that referenced this issue Aug 23, 2020
@skyme5
fix(accessibility): fix h2 accessibility issues
c8896b7 
Using `h5` in admonitions would sometime skip heading level order, which is against standard web practices.

This commit fixes this issue by replacing `h5` with `div` tag.

Closes: elviswolcott#26
Signed-off-by: Aakash Gajjar <[email protected]>
skyme5 added a commit to skyme5/remark-admonitions that referenced this issue Aug 23, 2020
@skyme5
test(all): fix test case to reflext the changes
3321f88 
Closes: elviswolcott#26
Signed-off-by: Aakash Gajjar <[email protected]>
skyme5 added a commit to skyme5/remark-admonitions that referenced this issue Aug 23, 2020
@skyme5
style(lint): fix linting
7577319 
Closes: elviswolcott#26
Signed-off-by: Aakash Gajjar <[email protected]>
@epbarger
Copy link

epbarger commented Feb 2, 2021

Perhaps the heading level could become a configurable option?

@lex111 lex111 linked a pull request Apr 25, 2021 that will close this issue
Open
@junyper
Copy link

junyper commented Jan 21, 2022 •
edited
Loading

I've just discovered this issue as well. I don't think the heading level should be h1, because there should only be one h1 per page. It should probably be configurable per block. Or if that is not possible, not using a heading at all would probably be best. If only we could make the <h> element happen it would be perfect here.

@Josh-Cena Josh-Cena mentioned this issue May 5, 2022
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

refactor: remove redundant h5 element lex111/remark-admonitions
3 participants
@epbarger @junyper @skyme5