[Athen] HTML coding question: anchors

[Heidi Scher]

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