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

Consider using logo as <h1> if there is no other <h1> #1308

Open
LukasKalbertodt opened this issue Dec 18, 2024 · 0 comments
Open

Consider using logo as <h1> if there is no other <h1> #1308

LukasKalbertodt opened this issue Dec 18, 2024 · 0 comments
Labels
area:accessibility Accessibility related issues area:frontend Everything frontend related priority:low Low priority

Comments

@LukasKalbertodt
Copy link
Member

This consideration stems from the change where we made the homepage title configurable, with it being potentially absent. We showed a hidden <h1> in that case for accessibility. But people from the ETH had some more thoughts (see Olafs comment here):

Apologies for the belated comment, our accessibility expert had a look at the question of how this would impact accessibility:

"Having no H1 is a problem from the accessibility perspective. Adding a hidden H1 solves the problem for screen reader users: They don’t need to literally see the H1, they will hear it. But: Headings help all users to find their way through a webpage, people like you and me.

Checking the tobira video portal today, there is only one single heading:

grafik

If this one is gone, no heading at all is left. I’d see several ways to solve that issue:

  • Use only ETH zürich as a logo, and implement the “Videoportal” as a real text, giving it H1 level.
  • Leave the logo-videoportal-image as it is, but add an H1 on the page. We can always use something like “Übersicht” (Overview) or similar. Even “Welcome” is okay on a home page.

Talking about headings: We need more (hidden or visible) headings to help users understand the structure of that page. It is especially important for screen reader users, so hidden headings are okay. As a sighted user I see from the design which part is which: top navigation including search, language choice and light/dark mode plus login. The navigation. The main content. Last but not least: the footer. Those parts need headings, too. A possible structure could look as follows: H1: Videoportal H2 (hidden): Services H3 (hidden): Search H3 (hidden): Language choice H3 (hidden): Appearance choice H3 (hidden): User login H2 (hidden): Main navigation H2 (hidden): Main content H2 (hidden): Footer"

We probably have to revisit this upon further accessibility issues in the context of an update to the analysis we already did.

Just creating this issue to not miss this, but definitely not a high priority for now.

@LukasKalbertodt LukasKalbertodt added priority:low Low priority area:frontend Everything frontend related area:accessibility Accessibility related issues labels Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:accessibility Accessibility related issues area:frontend Everything frontend related priority:low Low priority
Projects
None yet
Development

No branches or pull requests

1 participant