Kevin Powell - Community•4mo ago

Usage of Headings

I've posted a couple times and got various feedback on projects, one of the things I always received feedback on is headings. Often times that I shouldn't use one. So for arguments sake here's a use case. Would someone please walk me through what parts are improper?

// CTA Header
<section>
  <h1>Example Header</h1>
  <p>Lorem ipsum text</p>
  <a href="#">Link Text</a>
</section>

// About Snippet 
<section>
  <h2>About Us</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <img src="" alt="" />
  <a href="#">Link Text</a>
</section>

// Link to Services
<section>
  <h2>Services</h2>
  <div>
    <a href="#">
      <h3>Service 1</h3>
      <img src="" alt="" />
    </a>
  </div>
    <div>
    <a href="#">
      <h3>Service 2</h3>
      <img src="" alt="" />
    </a>
  </div>
  ... etc
</section>

// Product Card Section
<section>
  <h2>Product Cards</h2>
  <div> 
    <a href="#">
      <h3>Product Name</h3>
    </a>
    <p>Product Description</p>
    <p class="sr-only">Rating 5 of 5 stars</p>
    <div aria-hidden="true">
      // Star Images
    </div>
    <a href="#">Select Options</a>
    <a href="#">Add to Cart</a>
    <a href="#">
      <img src="" alt="" />
    </a>
  </div>
  ... repeat
</section>

// Social Media Links
<section>
  <h2>Social Heading</h2>
  <div>
    <img src="" alt="Social Image" />
    <img src="" alt="Social Icon" />
  <div>
  <div>
    <img src="" alt="Social Image" />
    <img src="" alt="Social Icon" />
  <div>
  ... etc
</section>

// CTA Header
<section>
  <h1>Example Header</h1>
  <p>Lorem ipsum text</p>
  <a href="#">Link Text</a>
</section>

// About Snippet 
<section>
  <h2>About Us</h2>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <img src="" alt="" />
  <a href="#">Link Text</a>
</section>

// Link to Services
<section>
  <h2>Services</h2>
  <div>
    <a href="#">
      <h3>Service 1</h3>
      <img src="" alt="" />
    </a>
  </div>
    <div>
    <a href="#">
      <h3>Service 2</h3>
      <img src="" alt="" />
    </a>
  </div>
  ... etc
</section>

// Product Card Section
<section>
  <h2>Product Cards</h2>
  <div> 
    <a href="#">
      <h3>Product Name</h3>
    </a>
    <p>Product Description</p>
    <p class="sr-only">Rating 5 of 5 stars</p>
    <div aria-hidden="true">
      // Star Images
    </div>
    <a href="#">Select Options</a>
    <a href="#">Add to Cart</a>
    <a href="#">
      <img src="" alt="" />
    </a>
  </div>
  ... repeat
</section>

// Social Media Links
<section>
  <h2>Social Heading</h2>
  <div>
    <img src="" alt="Social Image" />
    <img src="" alt="Social Icon" />
  <div>
  <div>
    <img src="" alt="Social Image" />
    <img src="" alt="Social Icon" />
  <div>
  ... etc
</section>

13 Replies

ἔρως•4mo ago

i dont see anything wrong in that i would just avoid having any heading inside a link, but that is me for example, the <h3> inside the <a> would cause it so whitespace is also a link, which can be confusing and frustrating

LexiOP•4mo ago

So would it be better to have a <p> tag instead?

ἔρως•4mo ago

LexiOP•4mo ago

Or no tag?

ἔρως•4mo ago

just put the link inside the <h3> and dont worry about the link being repeated but, this depends on what you want if you want a card to be clickable in it's entire area, what you have is good but you have to make it super explicit (through the design) that everything is a link

LexiOP•4mo ago

I've noticed a lot of product cards are clickable through their entirety so the user doesn't have to be precise when clicking. But I think it's also a bad screen reading experience to go through:

<h3><a>Product Name
<img><a>Product Image
<a>Select Options
<a>Add to Cart

<h3><a>Product Name
<img><a>Product Image
<a>Select Options
<a>Add to Cart

For each product and kind of wonder if

<div>
  <a> 
    <h3>Product Name
    <img>Product Image
    <p>Select Options
  </a>
  <a>Add to Cart
</div>

<div>
  <a> 
    <h3>Product Name
    <img>Product Image
    <p>Select Options
  </a>
  <a>Add to Cart
</div>

is easier. I haven't been able to find a good article on accessibility and HTML structure for e-commerce usage.

ἔρως•4mo ago

you can try it yourself if you get irritated by it, imagine how bad it is for a blind person if you can navigate it with your eyes closed, then you're doing it right you can try multiple screenreaders in multiple browsers i've been testing with microsoft narrator and i want to defenestrate my company laptop

LexiOP•4mo ago

I feel the sentiment. I've also been testing with a narrator and it's impossibly frustrating.

ἔρως•4mo ago

it is irritatingly annoying but getting back on topic your headings seem perfectly fine as long as you have a proper architecture, and it all makes sense, you're very likely doing it correctly

Kevin Powell•4mo ago

The trick for this is to use position: absolute on a pseudo-element for the link, and have it cover the entire card.

ἔρως•4mo ago

that's what i usually do for nested links

Kevin Powell•4mo ago

something like:

.card {
  position: relative;
}

.card a::before {
  content: '';
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

.card a::before {
  content: '';
  position: absolute;
  inset: 0;
}

LexiOP•4mo ago

Gotcha, that's a lot cleaner of a solution. Thank you both

Gaming

Programming

Usage of Headings

Did you find this page helpful?