Banner content lacks semantic structure

[mcking65]

This test rules page, which I think uses the template in this repo, has banner content that is not structured.

Here is what it looks like for someone using JAWS or NVDA. I have added meta info in [].

[link] Skip to content
WCAG 2 Test RulesFor developers of evaluation tools and test methodologies
[link] About WCAG 2 Test Rules
[link graphic] W3C
[link graphic] Web Accessibility Initiative

Problems:

1. The content is not contained in a landmark region. It should be inside of a banner.
2. There is no structure to the content. This is part of the reason that "rulesfor" is presented as a contiguous string and thus becomes rather unintelligible.

I don't know what the semantic markup should be. I am guessing that "WCAG 2 Test Rules" is like a site name? If so, there is a possibility it should be an H1. But maybe not? The following content starts with a preposition, so maybe the site name is just "WCAG 2 Test" and "Rules" actually belongs to the second portion of the string as a sort of subtitle?

I am trying to imagine what this looks like visually and how it is intended to be understood.

Looking at the site named All Supplemental Guidance, I perceive something similar:

Supplemental Guidance to WCAG 2Additional ways to improve accessibility, not required to meet WCAG

In this case because "2Additional" involves a number followed by an adjective, it seems a bit more obvious that perhaps the first part of the string might be a site name/brand and the second string might be a subtitle/tag line.

Semantically, the first elements:

WCAG 2 Test Rules

and

Supplemental Guidance to WCAG 2

Are really stumping me. Do those elements represent the names of the web sites? How prominent are they? Are they subtile or hard to overlook?

Itseems likely that those elements should be headings. I did some looking around to see if I could find another site with similar bits of static text in their banner. Usually if there is a tag line of some kind, it seems to be prefaced by an image link that is both the brand logo and link to home. I couldn't find any that have a static text string that serves as a site title. It's quite possible this is really common, and I have just ignored it.

[mcking65]

I like the suggestion of @jongund in w3c/wcag-act-rules#98 for the title and tagline to make the title a link to the primary page of the site and the tagline a paragraph. This would solve the semantic and screen reader presentation issues.

I agree with Jon that it would be easier to understand and more consistent with common convention if the W3C image link and WAI image link were to precede the title link in the visual presentation and reading order. But, by far, having solid semantic markup by using link and paragraph is most important.

It does not matter if the title link is duplicating the functio of another link on the page. That is common in a huge portion of designs across the web. I believe providing multiple paths to home is often considered a design feature.

[shawna-slh]

for @SteveALee & @shawna-slh to discuss...

[shawna-slh]

@SteveALee Here is the GitHub issue for linking the minimal-header-name to the first page (e.g.,
All Supplemental Guidance, All WCAG 2 Test Rules, the APG Home)

Also note above to put the minimal-header-subtitle in a <p>

[mcking65]

@shawna-slh there are two problems called out in this issue:

1. The content is not contained in a landmark region. It should be inside of a banner.
2. There is no structure to the content. This is part of the reason that "rulesfor" is presented as a contiguous string and thus becomes rather unintelligible.

In the APG site, problem 2 is fixed!! Thank you!!

I don't see that fix on the test rules site yet. Because we have a fix on APG, does that mean the template itself is fixed?

Problem 1, missing banner landmark, is not fixed.

BTW, another requirement related to the banner is naming it. The name should match the name of the content info (footer), which currently defaults to "Site". We have some APG feedback that the name "Site" is not sufficient. I agree that it might help some users if the name were more specific, e.g., "WAI" or "WAI Site" might be better than just "Site". Either way, we probably want a default name that can be overridden with a parameter, and "Site" is a good default.

Should I separate the landmark problem into a separate GitHub issue? Or is it OK to leave these problems combined in a single issue?

[SteveALee]

@mcking65 tracking in this issue is fine, thanks

[SteveALee]

I've added the Banner and paragraph for the subheading

We plan to do a full site review of landmark and label use so I've left the aria-label till then

[richnoah]

Reopening this issue. The site header is now wrapped in a element. This is not a custom element nor a valid HTMl element.

<banner class="minimal-header" id="site-header">
  <div class="minimal-header-container">
    <div class="minimal-header-name">
      <a href="/WAI/ARIA/apg/">
          ARIA Authoring Practices Guide (APG)
        </a>
    </div>
    
      <p class="minimal-header-subtitle">
          How to build accessibility semantics into web patterns and widgets
      </p>
    
  </div>
  
  <div class="minimal-header-logo">
        <a href="http://w3.org/">
            <img alt="W3C" src="/WAI/assets/images/w3c2.svg" width="92" height="44">
        </a>
        <a href="/WAI/">
            <img alt="Web Accessibility Initiative" src="/WAI/assets/images/wai.svg">
        </a>
  </div>
</banner>

This should be wrapped in a <header></header> element.

[SteveALee]

I'm not sure how that got through - it was supposed to be a header.
I will fix ASAP.

[SteveALee]

@richnoah Fixed in the them so will be picked up in future builds.
Can you close this issue once confirmed? Thanks.

[richnoah]

@SteveALee yes, will confirm once built and close.

[shawna-slh]

built, deployed, checked (leaving for y'all to confirm and close)

[richnoah]

@SteveALee confirming that the banner element is now replaced with a header element. Unfortunately, I do not have permission in this repo to close the issue.

[SteveALee]

@richnoah oh, OK I'll close it. Thank you.