[Athen] HTML coding question: anchors

Heidi Scher hascherdss at gmail.com
Mon Jul 27 06:23:46 PDT 2020

Hi Glen,

Thanks for that information! I've been out of the HTML coding game for
awhile, so I greatly appreciate it and will pass it along.

Stay well,

Heidi Scher, M.S., CRC
Associate Director - AT
*she, her, hers*
Center for Educational Access at the University of Arkansas
1 University of Arkansas, ARKU 209
Fayetteville, AR 72701
479.575.3104 phone
479.575.7445 fax

On Fri, Jul 24, 2020 at 3:55 PM glen walker <glen.walker at gmail.com> wrote:

> 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>

> _______________________________________________

> athen-list mailing list

> athen-list at mailman12.u.washington.edu

> http://mailman12.u.washington.edu/mailman/listinfo/athen-list


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20200727/c7a1b77b/attachment.html>

More information about the athen-list mailing list