<div dir="ltr">Hi Glen,<div><br></div><div>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.</div><div><br></div><div>Stay well,</div><div><br></div><div>Heidi<br clear="all"><div><div dir="ltr" class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div>+++++++++++++++<br>Heidi Scher, M.S., CRC<br>Associate Director - AT<br></div><div><i>she, her, hers</i><br></div><div>Center for Educational Access at the University of Arkansas</div><div>1 University of Arkansas, ARKU 209<br>Fayetteville, AR 72701<br>479.575.3104 phone<br>479.575.7445 fax<br>+++++++++++++++</div></div></div></div></div></div></div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Jul 24, 2020 at 3:55 PM glen walker <<a href="mailto:glen.walker@gmail.com">glen.walker@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>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.</div><div><br></div><div>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".</div><div><br></div><div>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).</div><div><br></div><div>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.<br></div><div><br></div><div>Your current code looks kind of like this:</div><div><br></div><div><div class="panel"><br> <a><br> <h3>our research</h3><br> </a><br> <div><br> <a>detailed paragraph text</a><br> <a>learn about our research</a><br> </div><br></div></div><div><br></div><div>I would probably do something like this:</div><div><br></div><div><div class="panel"><br> <a aria-labelledby="heading" aria-describedby="details"><br> <h3 id="heading">our research</h3><br> <p id="details">detailed paragraph text</p><br> <p>learn about our research</p><br> </div><br></div></div></div>
_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman12.u.washington.edu" target="_blank">athen-list@mailman12.u.washington.edu</a><br>
<a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list" rel="noreferrer" target="_blank">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a><br>
</blockquote></div>