search

w3c / wcag

Web Content Accessibility Guidelines
https://w3c.github.io/wcag/guidelines/22/
Other
1.06k stars 232 forks source link

H1 not visually prominent on mobile view #2883

Open mitchellevan opened 1 year ago

mitchellevan commented 1 year ago

Current

Example screenshot from a Pixel phone, 412x892 resolution, portrait view, with 200% text size (Chrome browser setting). Only the banner and "Page contents" are visible. The mobile browser does not show the page title.

Impact: When landing on the page, there is nothing visual to identify and confirm which page I'm on.

Screenshot as described above

Proposed

Move the h1 above the "Page contents"

or

Reduce the banner

shawna-slh commented 1 year ago

Thanks for the screen grab and specifics. When integrating ARIA APG into this design (example), there were strong statements (from screen reader user) for putting the h1 after the page contents. I think some discussion is in GitHub, however, I won't dig for it right now.

I added idea of reducing the banner to existing issue https://github.com/w3c/wai-website-theme/issues/84

stefanFarnetani commented 1 year ago

@shawna-slh i also find the mobile view important. perhaps a solution without changing the position could be to convert the "page content"-element in a disclosure or HTML summary element.

ArnaudDelafosse commented 1 year ago

...there were strong statements (from screen reader user) for putting the h1 after the page contents...

That's interesting, but I'd like to challenge that.

  1. I think that we'd agree that SR users can easily jump to the h1 or the secondary nav landmark if needed
  2. And semantically, I think it makes more sense that the h1 should introduce (in code order and visually) all of the page content, including the Page contents.

Let me illustrate this: WAI-h1