Accessibility: Use proper semantic HTML

Open

#81 opened on Aug 7, 2024 0 comments 0 reactions 0 assignees View on GitHub

enhancement

Description

## 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 `

` or `

` tag with `font-size: 1.6rem` as subtitle.
Use a `

` tag with `font-size: 1rem` as description.
For multi-line descriptions, use `` with `display: block` to emulate a `

`, while conforming to the HTML spec.
The tooltips on the keyboard bindings can probably also be done with ``.
Elements like `

` and `

` are not permitted inside `

` itself.

See [Content Categories on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories)

Here's an example of what I mean:
![html_mockup](https://github.com/user-attachments/assets/32bce32b-dc37-47c0-a691-ee63909d9404)

This issue has not been assessed yet.