[Enhancement]: Breadcrumb WCAG compliant

[wbonekamp]

Is there an existing issue for this?

• I have searched the existing issues

Description of problem

Currently the DNN breadcrumb isn't WCAG compliant.

Description of solution

It should be a listing <ul><li>

We tried to convert the breadcrumb skinobject in a listing but didn't succeed.

Description of alternatives considered

Change core breadcrumb so it's WCAG complaint

Anything else?

No response

Do you be plan to contribute code for this enhancement?

• Yes

Would you be interested in sponsoring this enhancement?

• Yes

Code of Conduct

• I agree to follow this project's Code of Conduct

[jeremy-farrance]

A solid reference?
https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

[wbonekamp]

Yes that should be the output... but I can't change the core breadcrumb skinobject code in DNN.

Is there a workaround or way to create a wcag dnn creancrumb skinobject (token) that I can use in my theme?

[bdukes]

The "workaround" would be to copy the logic of the current Breadcrumb theme object and adjust the generated markup.

I'd definitely be open to accepting a PR that adds a property to the theme object to output ol/li markup (or even a totally different theme object, if there's another name we could use).

[trouble2]

Another suggestion might be to also add structured data for SEO purposes like:

<nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/services">
        <span itemprop="name">Services</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Webdesign</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

See here for reference: https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#html