I'm looking to define what makes more sense in a page visual hierarchy for both visual design / consistency & accessibility.

We commonly have tabs under our h1 heading. Each tab content block contains a h2 as part of the button to toggle the tab open and closed. These h2's are styled separately from our standard h2 styling to fit the space, the markup looks something like this;

<h1>h1 Heading up here somewhere</h1>
<section class="tab">
  <a class="tab__button">
    <h2 class="tab__heading">Lorem ipsum</h2>
  </a>
  <div class="tab__content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit...</p>
    <h3>Lorem ipsum...</h3>

    ...

and the output looks something like this;

tabs markup output

We maintain the standard style for H3s even though we've broken the type styles at the h2 heading level. The problem is that at this point the page can look like it's going from a h1 to a h3. Additionally if there is another h2 before these tabs it could look like the tabbed content under the heading is owned by the h2 above the tabs because visually it looks like it's going from the h2 above the tabs to the h3 in the tabs without any recognition that there's a h2 between the two content blocks.

In this case is it better to style the content in tabs to have the visual appearance to be 1 heading style higher than it is, So h3s as h2s and h4s as h3s? Screenshot attached below

tabs markup output with adjusted headings

Or is it better to maintain the default standard heading sizes for headings in standard content (so h3s as h3s). This issue feels like it impacts on user experiance and usability but it's likely that users will see these pages in isolation and may never see another content page so is it even a problem and would it be something that matters to a user?

  • I don't see any difference between the two screenshots but I don't think it's absolutely necessary for the tab names to have a bigger font size than the content below it. However, I feel like this isn't the best way to represent tabs – Shreyas Tripathy Nov 8 '17 at 4:45
  • Thanks @ShreyasTripathy. I've updated the screen shots so you can better discern the differences in the two images. I'm not suggesting making the tab headings bigger as this is the format tabbed content normally comes in. I'm suggesting enlarging the headings under tabs to bring them back inline with the visual hierarchy of the rest of the site content. If you don't think this is the best way to represent tabs how would you do it differently? Id be very interested in your thoughts. – wellhairy Nov 8 '17 at 9:26
  • You shouldnt use chevron down icon in this content as it is pretty often used in accordion (toggled vs closed state). – xul Jul 10 at 15:15

The problem is you're not using your tags right, semantically. Those tabs aren't headers. In fact they're not even links, because you stay on the same page.

Use the HTML < button > element instead.

This has two effects. 1 - you are semantically correct. Which is more than just an abstract neatness tickbox; it prevents you from accidentally styling the tabs with cruft of header-css, or vice versa. It also helps a bit with screen readers and bots. 2 - you free up your H2 tag to... actually use it as an H2 tag. No nees to use H3 as a H2 substitute or whatever other hack you can come up with. It just is what it says on the tin.

However do not nest the <button> element inside an <a> element. This isn't valid HTML5 according to HTML5 standards. W3schools has an example on how to use JS to create a tab.

In short, the site elements become more logically named and organized, which benefits you in terms of development speed/flexibility/stability, site usability, and SEO ranking.

  • Thanks @PixelSnader, the reason we use <a> tags instead of <button> tags is because we use native browser functionality to assist our document structure. We use hash changes so that users can link to contents under a tab and so that tabbing is registered by the history state. H2s are used in this case to maintain the document structure, each tab button is a heading for the content that follow's it so it makes sense that the tab heading is part of the document structure in this way. In addition to the markup above we also use aria tags to inform screen readers of the tab state. – wellhairy Nov 8 '17 at 14:28
  • @wellhairy you can use hash links with other elements besides headers, just add an id or a name to the element. Besides, if you're liking to a sub-element you already (with proper naming convention) know which element it is a sub of. Each tab should be treated as a different document, IMO, because they are a very strong separation metaphor. Which slowly starts to beg the question; what is the purpose of these tabs? How is the content underneath each tab different from the others? – PixelSnader Nov 8 '17 at 17:01
  • My issue isn't really if the tab button should be a button. We'd still need to use a h2 and style it separately from standard heading styles. The markup looks more like an accordion than a tab. we order the content using flex-box. the document structure looks more like; heading, content, heading, content rather than a standard ways of building tabs. This isn't really answering my question. I'm looking to define; if I've broken the heading styling for tabs at the h2 level can I raise it in later headings to re-instate the heading structure or would this cause an issue for users? – wellhairy Nov 9 '17 at 13:13
  • No you don't need the H2 for styling. You can just style class="tab_button", there's only one bit of text in there so you don't even need to specify sub-elements. – PixelSnader Aug 4 at 8:42

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.