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.

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

Accessibility: Use proper semantic HTML #81

Open
Lenni009 opened this issue Aug 7, 2024 · 0 comments
Open

Accessibility: Use proper semantic HTML #81

Lenni009 opened this issue Aug 7, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@Lenni009
Copy link
Member

Lenni009 commented Aug 7, 2024

Issue

On the item pages, the name, subtitle and description are all heading tags.

Subtitle and Description are not headings.

Also these pages do not have an h1.

Suggestion

Use h1 for the item name.
Use a <p> or <div> tag with font-size: 1.6rem as subtitle.
Use a <p> tag with font-size: 1rem as description.
For multi-line descriptions, use <span> with display: block to emulate a <div>, while conforming to the HTML spec.
The tooltips on the keyboard bindings can probably also be done with <span>.
Elements like <div> and <p> are not permitted inside <p> itself.

See Content Categories on MDN

Here's an example of what I mean:
html_mockup

@Lenni009 Lenni009 added the enhancement New feature or request label Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant