WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: labeling a link in the html code question

for

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

From: Tyler Shepard
Date: Mon, Dec 09 2019 3:27PM
Subject: labeling a link in the html code question
No previous message | Next message →

When a link is coded and a name is given for it eg click here to read out menu, is that put in the code?
(a) click here to read our menu (/a)
Asking to learn.

From: L Snider
Date: Mon, Dec 09 2019 3:38PM
Subject: Re: labeling a link in the html code question
← Previous message | Next message →

I would suggest taking out the 'click here to'. Make the link descriptive
without extra words, short and sweet for everyone. Plus on mobile, one
doesn't click!

Oh and remember to make the link noticeable with a different colour and
underline. This makes it more accessible for everyone.

Cheers

Lisa

On Mon, Dec 9, 2019 at 6:27 PM Tyler Shepard < = EMAIL ADDRESS REMOVED = >
wrote:

> When a link is coded and a name is given for it eg click here to read out
> menu, is that put in the code?
> (a) click here to read our menu (/a)
> Asking to learn.
> > > > >

From: Samuel Hobson
Date: Mon, Dec 09 2019 3:38PM
Subject: Re: labeling a link in the html code question
← Previous message | Next message →

Hey, Tyler -

Yes. The text that sits within <a> tags forms the name or 'label' for that link.

<a href="#">read our menu</a>.

However, if you have a case where you're not putting text inside the link - maybe it's an image, or an icon you want to work like a link, you can use aria.

<a href="#" aria-label="Read our menu"> ... </a>

Or, if you have text elsewhere on your page that could suit as the link's accessible name, you could reference the id for that text:

<a href="#" aria-labelledby="idName"> ... </a>

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of L Snider < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, 10 December 2019 8:38 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] labeling a link in the html code question

I would suggest taking out the 'click here to'. Make the link descriptive
without extra words, short and sweet for everyone. Plus on mobile, one
doesn't click!

Oh and remember to make the link noticeable with a different colour and
underline. This makes it more accessible for everyone.

Cheers

Lisa

On Mon, Dec 9, 2019 at 6:27 PM Tyler Shepard < = EMAIL ADDRESS REMOVED = >
wrote:

> When a link is coded and a name is given for it eg click here to read out
> menu, is that put in the code?
> (a) click here to read our menu (/a)
> Asking to learn.
> > > > >

From: Brian Lovely
Date: Tue, Dec 10 2019 8:04AM
Subject: Re: [External Sender]labeling a link in the html code question
← Previous message | No next message

Samuel said "However, if you have a case where you're not putting text
inside the link - maybe it's an image, or an icon you want to work like a
link, you can use aria.

<a href="#" aria-label="Read our menu"> ... </a>"

There are many ways to place an image, but in the case of a linked inline
image, you can leverage the required alt attribute:
<a><img src="path/to" alt="My Profile" /></a>

...you could use a similar technique with a linked SVG and the SVG's title
element.




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.