WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: HTML Anchor Syntax Question

for

Number of posts in this thread: 3 (In chronological order)

From: Jim Homme
Date: Tue, Dec 13 2022 2:37PM
Subject: HTML Anchor Syntax Question
No previous message | Next message →

Hi,
Looking at https://html.spec.whatwg.org/dev/text-level-semantics.html#the-a-element, it seems to say that block level elements are allowed inside the text portion of an anchor tag. I'm looking at a page where there are some h3 tags inside anchors. Am I reading the spec correctly? I'm asking because the page in question keeps making the screen reader say heading 3 and link, when reading by arrow keys, which makes it sound like multiple links, when the source shows one link.

The page in question is https://highmarkwholecare.com/Medicare/Member-Tools/Get-Started-with-Highmark-Wholecare.

Thanks.

Jim
=========Jim Homme
Senior Digital Accessibility Consultant
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/
Support the dreams of independence through employment for students with disabilities with your Amazon purchases.
https://smile.amazon.com/ch/83-0988251

From: glen walker
Date: Tue, Dec 13 2022 2:51PM
Subject: Re: HTML Anchor Syntax Question
← Previous message | Next message →

Yes, it's valid HTML and yes, it can be confusing. If you tab to the link,
you hear the heading text and the plain text all as one link but if you
arrow down, you hear each block element separately so it does indeed sound
like multiple links.

From: Mark Magennis
Date: Wed, Dec 14 2022 12:47AM
Subject: Re: HTML Anchor Syntax Question
← Previous message | No next message

Jim,

I can't access the page you referenced but if a heading is also a link, it is best if the link is within the heading, not the heading within the link. This is because in VoiceOver/Safari, headings that are within links aren't announced as headings when the button is tabbed to or arrowed to. And when navigated to using the 'h' shortcut, the heading level is not announced. In JAWS/Chrome and NVDA/Firefox there is no difference.

There may also be an effect on the clickable . Notwithstanding other CSS treatments, if the link is within the heading, only the text is clickable. Whereas if the heading is within the link, the entire rectangular area encompassing the heading becomes clickable.

Mark