Article: Making links accessible

[Kodecheff]

Hi @ericwbailey 🙂, I have a post idea I want to write about - making links accessible. Is this a good idea to write on?

Description

Link is one of the primary concept in web development. The article provides quick tips on making links accessible to everyone.

Would you like to write the article or request that it be written?

I would like to write the article

[boring-cyborg[bot]]

Thanks for opening your first Issue! Please make sure you've read our Code of Conduct and Contributing guidelines.

[ericwbailey]

@Kodecheff Could you please provide an outline for us to review?

[Kodecheff]

Sure @ericwbailey Links are one of the primary elements in web development. Links can be made accessible by making them clear, descriptive and purposeful out of context. This helps break accessibility barriers for both screen readers users and clear sighted users.

• Link texts such as more, click here are ambiguous and not appropriate. Rather a concise link text so users can know the exact destination of the link should be provided.
• The aria-label attribute should be used, because it provides a descriptive link text for screen readers users.
• Links should not be made to look like a button, to avoid confusion.
• Links text are best not repeated to avoid disorientation for users with cognitive disability.

There are several mistakes web authors make that creates a barrier for accessibility on their websites or applications in regards to hypertext links. This article will provide a guide to help create an accessible website or application.

Thank you.

[ericwbailey]

@Kodecheff This sounds good. Please make sure you read and adhere to our Content Style Guide before submitting the post for review.

[Daniel-Dragon]

I'd like to grab this and run with it if that's alright. I have a basic outline started, but might add more if I think of anything important.

• How Accessibility Software (Or say Screen Reader?) Uses Links -- Discuss the WHY this is important to consider, show how they list all links ETC. I think getting the WHY helped to explain why the suggestions are the way they are.
• Avoid Redundancies -- Avoid link to or click here because it's implied by the elements role.
• Avoid Link Blocks -- It's exhausting too have too much text linked. Keep links to < 100 characters long if possible. Can even go into some strategies on how to expand clickable area to a container using CSS (a strategy I've used with some success)
• Avoid Unexpected New Windows -- Need to use text or an icon with some alt text to alert the user that this link will open a new window to avoid confusing.
• Links on Images -- the image should have alt that describes the link location or the action taken, rather than describing the content of the image in this case.
• Edge Case Strategies -- There are always some cases that don't fit cleanly, and we need to bandage them. I want to just explain some situations where you might use a title attribute or hidden text in a link or even aria-label for links to give screen readers the context needed. But this should be a last resort.

[ericwbailey]

Closed for inactivity.