search

lemoynelibrary / lemoyne

Files used in setting up new web design in LibGuides v2 and elsewhere
5 stars 1 forks source link

Accessibility: fix breadcrumbs across all library domains #68

Closed tomkeays closed 4 years ago

tomkeays commented 4 years ago

As documented in Issue #63, need to add semantic <nav> elements with proper ARIA roles to breadcrumbs in banner navigation across all of the library domains.

Update breadcrumbs in either banner navigation or page template files

Note: 360 Link will not be live until 9:30 am the day after it was updated.

tomkeays commented 4 years ago

See documentation on updating the templates:

tomkeays commented 4 years ago

I sent Springshare an email about fixing the breadcrumbs in LibCal. This is not something I can address myself in the Look-and-Feel admin panel.

tomkeays commented 4 years ago

Just for future reference, here's how we're coding breadcrumbs for non-LibGuides sites.

  <nav id=”s-lib-bc” aria-label=”breadcrumb”>  
    <ol id="s-lib-bc-list" class="breadcrumb">
      <li id="s-lib-bc-customer">
        <a title="Noreen Reale Falcone Library" href="http://resources.library.lemoyne.edu/library">Noreen Reale Falcone Library
        </a>
      </li>
      <li id="s-lib-bc-group">
        <a title="Library Services" href="http://resources.library.lemoyne.edu/library-services">Library Services
        </a>
      </li>
      <li id="s-lib-bc-guide">
        <a title="Ask Us! Reference Services" href="http://resources.library.lemoyne.edu/askus">Ask Us! Reference Services
        </a>
      </li>
      <li id="Ask Us! FAQ" class="active"><i class="fa fa-question-circle fa-lg lmc-askus"></i>&nbsp; Ask Us! FAQ
      </li>
    </ol>
  </nav>

We're using the <nav id=”s-lib-bc” aria-label=”breadcrumb”> element, including the id so that the breadcrumb has a consistent hook for the CSS to use. Here's what that CSS snippet should look like

#s-lib-bc .breadcrumb {
  font-size: 13px;
  font-weight: normal;
  margin-left: 15px;
}