[Athen] HTML coding question: anchors

[glen walker]

There is no WCAG rule about links being close to each other.  There is a
"best practice" that it's nice to combine links that are adjacent that go
to the same destination, but *not* doing that is not a WCAG failure.

I assume you're talking about the "cards" section on that sample page?
Such as "Our Research", "Who We Are", "College of Engineering", and
"Community Design Center".

Technically, the cards are ok and don't have WCAG problems.  From a
usability perspective, having each card be 3 or 4 tab stops might not be
the best.  ("Office for Sustainability" is 6 tab stops).

I'm not a designer but I would probably make the entire card a big link
with the link name being "Our research", "Who We Are", etc.  Then use
aria-describedby on the link to point to the paragraph of detailed text.

Your current code looks kind of like this:

<div class="panel">
  <a>
    <h3>our research</h3>
  </a>
  <div>
    <a>detailed paragraph text</a>
    <a>learn about our research</a>
  </div>
</div>

I would probably do something like this:

<div class="panel">
  <a aria-labelledby="heading" aria-describedby="details">
    <h3 id="heading">our research</h3>
    <p id="details">detailed paragraph text</p>
    <p>learn about our research</p>
  </div>
</div>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20200724/394ec0b2/attachment.html>