Menu icon Foundation
Change Navigation Bar "Back" link from H5

The Navigation Bar in F4 uses an H5 element as the Back link. Is there a way to override this so that it will use another, non-heading element and my document will validate better?

When checking the pages through an Accessibility checker, the system doesn't like how an H5 does not follow an H4 and so on up the chain.

I can modify the JS files by hand to do this but then the next update I get for Foundation will overwrite any changes.

Thanks,
Shawn

navigationtopfoundation4accessibilitynavbartopbar

The Navigation Bar in F4 uses an H5 element as the Back link. Is there a way to override this so that it will use another, non-heading element and my document will validate better?

When checking the pages through an Accessibility checker, the system doesn't like how an H5 does not follow an H4 and so on up the chain.

I can modify the JS files by hand to do this but then the next update I get for Foundation will overwrite any changes.

Thanks,
Shawn

Shawn Oatley over 5 years ago

anyone? I'm surprised no one has run into this also as it is part of the WCAG 2.0 guidelines (4.1.1 Parsing).

Chris Holaday over 5 years ago

+1
I have the same question but my symptom is this element is now styled differently than my other elements. Specifically: On hover bg breaks.

Chris Holaday over 5 years ago

For anyone running into my style problems here is the override I used:

.top-bar-section {
  // Override Foundation's insertion of `h5` for the "Back" button for dropdowns
  .dropdown li.title h5 a {
    line-height: 1rem;
    font-weight: normal;
    font-size: 1rem;
    padding: rem-calc(12) $topbar-link-padding;

    &:hover {
      background: $topbar-link-bg-hover;
    }
  }
}