search

radancyco / radancyco.github.io

Standards, guidelines, and best practices used by Radancy developers and designers
https://radancy.dev
10 stars 2 forks source link

Use of H1 vs H2 tags #13

Open DrewRHill opened 9 years ago

DrewRHill commented 9 years ago

Not sure if this is the right place to ask/recommend this, but.... One of the things I noticed is the use of H1 tags in modules around the module's title. This won't pass compliance for government sites, however if they were H2s they most likely would. Probably not as big an issue with our commercial accounts, but would certainly help on our government site roll-outs.

Example: The new "Job Alert Management" page has three modules, all have an h1.

Thanks for the consideration.

Drew 2.0

mhartz commented 9 years ago

So this is something else I was getting ready to create an issue on as well.

Here was what I had as a proposed standard (not including the example):

Then in red I noted: "Accessibility issues? (LOOKUP)".

You have any resources about the subject matter? I would like to know any problems it would cause.

michaelspellacy commented 9 years ago

@mhartz, I TOTALLY agree that using multiple h1's in sectioning elements is appropriate way to go, however, upon validating a page with multiple h1's we have the following warning:

"Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools)."

I think even the W3C recognizes that not all screen readers and other programs may not be fully up to speed on handling the HTML5 outline algorithm. Hence why it is only flagged as a warning. I'm not against using an extra h1 or two if it makes sense to do so, but I think we have to find a middle ground here to work in until there is more support.

michaelspellacy commented 9 years ago

@DrewRHill I have concerns about testing software being up to date as well. Let's say more screen readers come around and start support outline. Great. Testing software might still flag such things as a false positive. It is a bit of messy situation right now. Probably all the more reason to play it safe and not use a ton of h1's on a page.

DrewRHill commented 9 years ago

@michaelspellacy you are 100% right. We find ourselves in the position of having to explain to the customer how the testing software is marking it as a false positive...

@mharz I think your standards are right on the money. The instance that I am bringing up is a scenario where we have 3 h1 tags inside the same div. If it were a single h1 and then h2 or an h3 - I wouldn't have even thought to pose the question. Maybe the fix is to wrap the forms with DIVs? That way you can have as many h1s as your heart desires.

Personally, I would say that content like filters, job alerts, job matching, location links, etc. are not primary so why would they be given a primary header? They are secondary to the main content on the page. A proper document structure would be Page Title as the h1. Subheadings would follow under that. Then, in other sections, it would be h2 or greater.

The original example I gave was from the "Job Alert Subscript Management" page. When you create the page, your code is:

<form id="job-alert-list"> <h1>My Alert Subscriptions</h1> </form>

<form id="job-alert-unsubscribe"> <h1>Unsubscribe</h1> </form>

<form id="job-alert-list-editor"> <h1>Add New Alerts</h1> </form>

I agree that the "My Alert Subscriptions" should be an h1. It's the title of the page. However, the "Unsubscribe" and "Add New Alerts" headers would be secondary or h2. However, if we want to keep the h1 Maybe we should be wrapping each form with a div/section tag to make it meet @mhartz standards and 508 compliance?

I might be wrong, but I don't think the current format (original example) would pass compliance on an updated testing platform.

mhartz commented 9 years ago

@DrewRHill If the parent element is not a sectioning element (<section>, <article>, <nav>, <aside>) or isn't the <h1> for the section root (after the <body> and before the first sectioning element) and is in just a <div> or a <form>, it shouldn't have any <h1> elements in it at all.

So a div shouldn't really have an h1 tag in it unless containing one of the sectioning elements.

scampbell44 commented 9 years ago

I agree with @mhartz statement...

Personally, I would say that content like filters, job alerts, job matching, location links, etc. are not primary so why would they be given a primary header? They are secondary to the main content on the page.

Such headings should be relegated to secondary or tertiary headings.

DrewRHill commented 9 years ago

@mhartz - I am in 100% agreement. What Talent Brew gives you when you add a new "Job Alert Subscript Management" page looks a little like this:

<body> <div class="main"> <form id="job-alert-list"> <h1>My Alert Subscriptions</h1> </form>

<form id="job-alert-unsubscribe"> <h1>Unsubscribe</h1> </form>

<form id="job-alert-list-editor"> <h1>Add New Alerts</h1> </form> </div> </body>

Which won't pass compliance.

The following modifications would be more accurate and would also pass 508 compliance:

<body> <div class="main"> <form id="job-alert-list"> <h1>My Alert Subscriptions</h1> </form>

<form id="job-alert-unsubscribe"> <h2>Unsubscribe</h2> </form>

<form id="job-alert-list-editor"> <h2>Add New Alerts</h2> </form> </div> </body>

mhartz commented 9 years ago

Yea that is wrong and the system will be going through a full review with fixes when we hash out a majority of the new standards' issues proposed in the documentation.

michaelspellacy commented 9 years ago

Agree with everybody here. :-)

So a div shouldn't really have an h1 tag in it unless containing one of the sectioning elements.

@mhartz 99.5% true. :-) There may be exceptions where an extra h1 is needed outside of this scenario. We do what is right for the needs and demands of content, even if it means failing a scan from time to time. Fortunately, this is why we have sectioning now. :-)

Also, if there are ANY markup concerns in the TB core, please direct them to me and I will work with @fwitkowski and Fatema to address them.

mhartz commented 9 years ago

Proposed changes. Can probably be shortened. Let me know what you think:

New <h1> Usage Rules:

<!-- Not Recommended: no h1 before sectioning content -->
<body>
  <article>
     <h1>Improper Use</h1>
      <h2>Improper Use: The Wrong Way</h2>
      <p>This is the wrong way.</p>
    </article>
 </body>

<!-- Recommended: h1 before sectioning content -->
<body>
  <div>
    <h1>The Right Way</h1>
  </div>
  <article>
     <h1>Proper Use</h1>
      <h2>Proper Use: The RightWay</h2>
      <p>This is the right way.</p>
    </article>
 </body>

<!-- Not Recommended: improper order -->
<section>
  <h2>Improper Order</h2>
  <p>This is in the wrong order.</p>
  <h1>This is Wrong</h1>
</section>

<!-- Not Recommended: duplicate h1 -->
<section>
  <h1>Duplicate h1's</h1>
  <p>There should only be one h1 tag.</p>
  <h1>This is Wrong</h1>
</section>

<!-- Recommended -->
<section>
  <h1>This is the Proper Way</h1>
  <h2>This is the Right Order</h2>
  <p>Looking good so far.</p>
  <h3>Very Nice</h3>
  <p>This is how you correctly do sectioning content.</p>
</section>
DrewRHill commented 9 years ago

Awesome!

Sent from my iPhone

On Mar 31, 2015, at 5:07 PM, "mhartz" notifications@github.com<mailto:notifications@github.com> wrote:

Proposed changes. Can probably be shortened. Let me know what you think:

New

Usage Rules:

  • Use one set of

    tags per sectioning root or content section.

  • There should always be a

    level heading between the opening tag and the first content section, to label the overall document.

  • When a

    level heading is to be used to label a content section, it should be the first heading that appears in the section, because the first heading is always interpreted as the section's label.

  • If a

    level heading is used to label a content section, any other headings used in that section should be

    or lower in order to create an accurate document outline.

Improper Use

Improper Use: The Wrong Way

This is the wrong way.

The Right Way

Proper Use

Proper Use: The RightWay

This is the right way.

Improper Order

This is in the wrong order.

This is Wrong

Duplicate h1's

There should only be one h1 tag.

This is Wrong

This is the Proper Way

This is the Right Order

Looking good so far.

Very Nice

This is how you correctly do sectioning content.

Reply to this email directly or view it on GitHubhttps://github.com/tmpworldwide/tmpworldwide.github.io/issues/13#issuecomment-88247803.

mhartz commented 9 years ago

So if everyone is cool with this as an addition to the standards I will go on and put it in there in the "Markup" section after "Semantics and Nesting". Going to be adding a new proposal for most of the elements with rules, so I am thinking I will add a new sub-section called "Elements".

stephendelancey commented 9 years ago

I agree with max

actaylor87 commented 9 years ago

I concur

sbkates commented 9 years ago

If testing software is marking it as a "false positive", why not just stick to only one h1 per page? Why do we feel dedicated to the idea that we want h1 tags as section headers? Wouldn't h2 tags suffice, and bonus, not come up as 'wrong' with testing software?

michaelspellacy commented 9 years ago

Again, there are times where an extra h1 might be appropriate. I do not wish to see us deter a developer from using an element, any element, that might be adequate in giving a document proper semantic meaning. Each developer is free to make the best choices they can here in properly defining a document. If that means an extra h1 or two - SEO be damned! We can deal with those question in code reviews. This is a difficult area to apply rules around because each developer is going to come at it with their own sensibilities. :-)

My only concern here is with the first point in the proposal:

Use one set of <h1> tags per sectioning root or content section.

Now, I totally want to start using sectioning element headings the way they were intended for us to use, but we must be sensitive to accessibility needs for the foreseeable future. According to Mozilla, assistive technology is not up to speed on outlining yet, so not using h1 elements, per section, is the middle ground here we all need to agree upon - unless situation I mentioned above applies and is required for betterment of that content.

michaelspellacy commented 9 years ago

Mozilla link: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

Note: There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

michaelspellacy commented 9 years ago

p.s. Mozilla link is a very good read if you are unsure of what all this outlining business is about. :-)

mhartz commented 9 years ago

Yea I am not saying that every sectioning element needs an <h1>, but that there can only be one <h1> tag per sectioning element. Text needs to be cleared up about that.

michaelspellacy commented 9 years ago

Okay. Then you get a thumbs up here. :+1: I'm not terribly concerned with raising a false positive if we are doing what is right for our content. I don't expect that to happen too often, either.

mhartz commented 9 years ago

Ok so here is the new updated text to include:

<!-- Not Recommended: no h1 before sectioning content -->
<body>
  <article>
     <h1>Improper Use</h1>
      <h2>Improper Use: The Wrong Way</h2>
      <p>This is the wrong way.</p>
    </article>
 </body>

<!-- Recommended: h1 before sectioning content -->
<body>
  <div>
    <h1>The Right Way</h1>
  </div>
  <article>
     <h1>Proper Use</h1>
      <h2>Proper Use: The RightWay</h2>
      <p>This is the right way.</p>
    </article>
 </body>

<!-- Not Recommended: improper order -->
<section>
  <h2>Improper Order</h2>
  <p>This is in the wrong order.</p>
  <h1>This is Wrong</h1>
</section>

<!-- Not Recommended: duplicate h1 -->
<section>
  <h1>Duplicate h1's</h1>
  <p>There should only be one h1 tag.</p>
  <h1>This is Wrong</h1>
</section>

<!-- Recommended -->
<section>
  <h1>This is the Proper Way</h1>
  <h2>This is the Right Order</h2>
  <p>Looking good so far.</p>
  <h3>Very Nice</h3>
  <p>This is how you correctly do sectioning content.</p>
</section>
michaelspellacy commented 6 years ago

For some reason, we never added this. We should review and see if still relevant.