Widget Accessibility Issue with extra empty links created

LiveWhale
1

Hi there!

I have an odd widget issue causing empty link accessibility errors on our highly-trafficked apply page and I can’t figure out what’s happening.

My HTML format for each item in widget is:

<li class="shadow-sm" style="list-style:none;">
    <a href="{href}" target="_blank">
    <div>
      <p class="month">
        <strong>{date}</strong>
      </p>
      <p class="description">
        {title}
      </p>
    </div></a>
  </li>

but it is coming out like this (even just in the backend preview) with three empty links in it:

<li class="shadow-sm" style="list-style:none;">
    <a href="https://events.smccd.edu/academic-calendar/event/93346-six-week-session" target="_blank"></a>
    <div>
    <a href="https://events.smccd.edu/academic-calendar/event/93346-six-week-session" target="_blank">
        <p class="month"><strong>Jun 9</strong>&nbsp;</p>
    </a>
    <p class="description">
        <a href="https://events.smccd.edu/academic-calendar/event/93346-six-week-session" target="_blank"></a>
        <a href="https://events.smccd.edu/academic-calendar/event/93346-six-week-session">Six Week Session</a>
    &nbsp;</p>
</div>
&nbsp;
</li>

any thoughts on why? I don’t feel like I’m doing anything particularly odd here to cause this behavior. Thank you (:

2

@frangosh I suspect the <div> inside the <a> is not valid. Try changing the <div> to a <span>.

Scatch that. Try using {title_clean} instead of {title} since {title} automatically includes an <a>, and you can’t have a link nested in a link.

3

Oh wow, that solved it immediately (: Thank you Jon, I didn’t know that {title_clean} was an option but its functionality is really what I meant to do in the first place!

I appreciate your help (:

1 Like
4

Thanks Jon! Yes, {title_clean} is a great trick here. I will add that I’ve seen more and more that browsers (and a11y checkers) seem to be getting troublesome in support for <div> inside of <a>. It’s something we’ve moved away from in our own builds in the last few years, partly because – while there seems to be some discussion of it maybe being supported in current HTML specs? – it’s not seemed worth the trouble to be fighting browser behavior or automated a11y checkers. But, glad you got a workable solution here!