Link does not visually or programatically communicate a new page opens

ashleypeacock commented 4 months ago

Issue

Not all screen-readers understand _blank to communicate the opening of a new window. As a result this can create disorientation for blind, partially sighted users and signed users where there's no visual representation

Resources

3.2 Predictability

Recommendations

Add a visual icon to indicate the item moves into a new page for sighted users
Add aria-label attribute to the link to communicate page opening for a screen-reader, for example: <a class="btn" href="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd-2SAtuNmLysyr_SS41rxinLnzGHSnVZqLqWAVg9HCSg-_jw/viewform" target="_blank" aria-label="Add a Resource, opens a new window">Add a Resource</a>

melissaegg commented 3 months ago

I think I fixed this at least behind the scenes by adding aria labels to the 4 links that open a new site (all on the homepage).

To be done - adding a visual icon for sighted users.

ksyro98 commented 3 weeks ago

Hey! @ashleypeacock is this icon what you had in mind?

melissaegg / trauma-informed-design-resources