Accessibility: Visually differentiate external links in the footer

[Homaid]

Title

[Footer] Visually differentiate external social links from internal links

Description

In the footer of p5js.org, the "Resources", "Information", and "Socials" sections all present links with the same appearance. However, the "Socials" section includes links to external platforms like GitHub, Instagram, and Discord.

Currently, these external links are not visually distinguished from internal ones, which may confuse users — especially those relying on screen readers or keyboard navigation.

This creates an accessibility concern where users are unable to anticipate whether clicking a link will navigate away from the site or not.

Steps to Reproduce

1. Visit https://p5js.org
2. Scroll to the footer
3. Compare the "Resources" and "Socials" sections
4. Hover or tab through the links (e.g., “GitHub” in Socials vs “Reference” in Resources)
5. Observe that all links look identical, despite some being external

Element location: .footer .footer-socials a
Interaction method: Pointer hover and keyboard focus

Actual Behavior

All links appear visually identical. External links in the "Socials" section do not provide any indication that they will open external platforms. There’s no icon, hover text, or tooltip indicating that behavior.

Expected Behavior

Users should be able to identify external links via:

• A visual indicator (e.g., external link icon ↗)
• A tooltip like “Opens in new tab”
• An aria-label for screen readers indicating that it’s an external link

Environments

No response

Suggested Fix

No response

Reference

No response

What is your operating system?

None

Web browser and version

No response

[Homaid]

Hi! Just checking in to see if this issue would be good to work on. If so, I’d love to open a PR.

@coseeian would love your thoughts when you get a chance. Thank you!

[coseeian]

I think differentiating external links from internal links is a recommended best practice for both usability and accessibility. Users should be able to anticipate the result of activating a link—especially if it opens an external site or a new browser tab.

For external links, consider the following approaches to inform users:

• Open in new tab: If the link directs users outside the website, use target="_blank" on the <a> element to open the link in a new browser tab or window.
• Visual Indicator: Add an external link icon (such as ↗) next to the link text. This helps all users—including those with low vision or cognitive disabilities—easily identify external links.
• Tooltip (title attribute): Provide a tooltip such as “Opens in new tab” using the <a> element’s title property. Most screen readers will announce the title, and sighted users will see it on hover.
• Screen Reader Text: If you use the title attribute, an additional aria-label is not necessary. In fact, aria-label will override the accessibility name link text for screen readers, which is not recommended. If further explanation is needed, consider using aria-description (supported in modern browsers and assistive technologies), which adds supplementary information without replacing the accessibility label.

Applying these enhancements will make the interface clearer and more accessible, helping all users to understand the nature of each link.

[Homaid]

Thanks for the helpful explanation

Would it be alright if I got assigned to this issue so I can submit a pull request?

Thanks again!