Make Breadcrumb Output Accessibility Compliant

  • The plugin output should be accessibility friendly using semantic elements.

    According to W3C (https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html) the output should be:

    <nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../">
        WAI-ARIA Authoring Practices
      </a>
    </li>
    <li>
      <a href="/WAI/ARIA/apg/patterns/">
        Design Patterns
      </a>
    </li>
    <li>
      <a href="/WAI/ARIA/apg/patterns/breadcrumb/">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="index.html" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>
Viewing 1 replies (of 1 total)
  • Plugin Author John Havlik

    (@mtekk)

    This should already be possible, assuming you are writing a call to bcn_display() (the widget and the block don’t support this markup form at the moment). It appears the recommendation follows the bootstrap 4 breadcrumb format. See the calling code presented in this article: https://mtekk.us/archives/guides/breadcrumb-navxt-and-bootstrap-4-breadcrumb/

    As for getting the the aria-current entry, since Breadcrumb NavXT 6.3, the breadcrumb template tag bcn-aria-current implements this. For example, your breadcrumb templates probably should look similar to:
    <a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%">

Viewing 1 replies (of 1 total)
  • The topic ‘Make Breadcrumb Output Accessibility Compliant’ is closed to new replies.