Document examples of accessible link patterns

DanielleThierryUSDSVA commented 3 years ago

Issue description

We used to always put links on a separate line, with a full CTA. More recently, however, we began using more links within sentences. I'd like to define accessible link patterns for in-context links, and document examples for our VA.gov writers to make it easy for the content team to ensure we're creating accessible links.

The WCAG 2.0 and 2.1 guidelines on this are a little unclear to me. As I interpret the guidelines, they appear to say that it's best if the context of the link can be understood on its own. To me, this appears to align with our previous approach of separating links out on their own line with a full CTA.

But the guidelines then say it's still okay if the link can be understood when paired with its programmatically determined link content (ie, content within the same paragraph, list, or table cell). This is where I'm a little unclear.

I would love your guidance here, so I can make sure we're following the guidelines (at a minimum) and providing the most accessible links possible.

Example 1: Links to external websites

Please advise on which of the linking options below align with guidelines, and which 1 or more are most accessible. I believe #4 is not within guidelines, but would like to confirm. And would like to confirm guidance overall. Thank you!

Will an mRNA vaccine alter my DNA? No. mRNA vaccines that protect you from COVID-19 don’t alter your DNA. These vaccines work outside of your cell’s nucleus (where your DNA is kept). The vaccines teach your cells how to make a protein that triggers an immune response. Your cells then break down and get rid of the mRNA soon after they’ve finished using the instructions.

1 Go to the CDC website to learn more about mRNA vaccines

3 Go to the CDC website to learn more about mRNA vaccines.

4 To learn more about mRNA vaccines, go to the CDC website.

5 To learn more, go to the CDC's webpage on mRNA vaccines.

Example 2: Links to facility locator

Please advise on which of the linking options below align with guidelines, and which is most accessible. I think 2 is the most accessible. I think #1 is not within guidelines, but I'd like to clarify the reason for greater understanding. Is it because you could interpret "your local VA health facility" as the facility's website or something else other than the facility locator tool?

1 To schedule an appointment, call your local VA health facility.

2 To schedule an appointment, call your local VA health facility. Find the phone number for your local VA health facility

artsymartha68 commented 3 years ago

I love that you're getting so specific! cc @joshkimux and @1Copenut for help with this as well. I'll do some research too.

artsymartha68 commented 3 years ago

What I'm reading (another good example here https://webaim.org/techniques/hypertext/#screen_readers) is that we need to optimize for quick link navigation. To me, that means any superfluous language in the link like "read more about...", "learn more" or "go to the..." impedes that quick navigation.

Imagine a screen reader user just tabbing through the page from link to link in lightning speed. Any extra phrasing will impede that.

I think that means we'd just link to the key noun in the citation. So just "mRNA vaccines" in the top example, methinks? And "VA health facility"?

DanielleThierryUSDSVA commented 3 years ago

Thanks, @artsymartha68! That's part of what I'm confused about. In recent accessibility feedback in a ticket, the direction seemed to be saying the opposite, that we should not link just key words. But I may be misinterpreting the feedback, so I wanted to check. Looking forward to figuring this out together and then documenting for our writers!

Another point I'm interested in: We always make sure to make it clear when someone is going to go off the VA.gov site with language such as "Go to the CDC website." If we don't include that in the link itself, we're not making it clear for our users who are using screen readers that they're leaving VA.gov, right? Or maybe that's clear from how the screen reader reads the link itself or from the contextual context within the surrounding sentence. I don't know enough about screen readers to know, but I want to make sure we're giving all users that context.

DanielleThierryUSDSVA commented 3 years ago

cc @bethpottsVADEPO @RLHecht for awareness

joshkimux commented 3 years ago

Thanks for putting this write up together @DanielleThierryUSDSVA !

From a quick skim through-- agree with what @artsymartha68 is saying.

As for language when it comes to leaving a page, that is very much needed! However, there's lots of options on how to actually implement it depending on the context from sr-only text, external link icons with alt text, etc.
Another thing to consider: when it comes to navigating through links, technically it's ok to have something like To learn more about mRNA vaccines, <a>go to the CDC website.</a>, but if a user is tabbing through links on the page or using something like the VoiceOver rotor to quickly read through all links on the page, the important context of "To learn more about mRNA vaccines" won't be included and they have to take additional steps to navigate to that link and explore around it which is time consuming and frustrating.

There's lots of different behaviors and contexts we need to consider, so this will be a fun challenge to take on. I'll give this a more in detail look this week! Excited about standardizing some examples together 😄

DanielleThierryUSDSVA commented 3 years ago

Awesome, thank you, @joshkimux!

That makes total sense to me about the tabbing through of links, especially on pages that have a lot of info and where we point to the CDC website many times (and sometimes different specific pages within the CDC website), like the covid-related pages. And agree - this will be a great challenge to work through together!

Let me know your thoughts once you've had a chance to dig into this more, and then our content team can help with auditing/gathering more examples of how we use links if that's helpful.

1Copenut commented 3 years ago

I agree with @joshkimux assessment above about tabbing and moving through links async. In my experience, screen reader users navigate pages using headings first, and links second. I've observed a number of users opening the links menu in JAWS/NVDA and listening to each link rapidly, completely removed from their page context.

To Josh's point, links that say "to learn more about mRNA vaccines" in a menu or while tabbing will pass SC 2.4.4 Link Purpose (In Context) if the surrounding text answered where or how the user would learn more about mRNA vaccines.

IMO, the link text "to learn more about mRNA vaccines" would not pass SC 2.4.9 Link Purpose (Link Only) because the phrasing has some ambiguity with the word "to". Links that lead with a verb have a strong context and are clear in their intent.

learn more about mRNA vaccines feels more direct than to learn more about mRNA vaccines. The second link reads (to me) as a setup for the actual link text to come after.

joshkimux commented 3 years ago

@1Copenut and @DanielleThierryUSDSVA I'll be looping in @AngelaFowler82 , another one of our accessibility specialists, to this conversation as well! We'll be talking about this in the afternoon and will have more to add to this conversation this week.

DanielleThierryUSDSVA commented 3 years ago

Thank you, @1Copenut and @joshkimux, and welcome to the conversation, @AngelaFowler82!

Thank you so much for all the thoughtfulness and care you're putting into this. I really appreciate it.

I also wanted to make you aware that I'm going to be largely focused on a USDS discovery sprint from 3/15 through 3/26. So if I'm slow to respond starting next week, that's why!

AngelaFowler82 commented 3 years ago

Hello all, As a screen reader user, when navigating through links I like to know their purpose, followed by their target. For example: "Learn more about COVID vaccines at the CDC web site" would be ideal link test. Now, if you were linking to another site on va.gov, you would need only include "learn more about COVID vaccines," since it is assumed that I will be staying on va.gov. "Learn more about" would be the purpose, as it is important to distinguish this link from one which takes me to a page which would allow me to make an appointment to get vaccinated. The rest of the link text is the target, consisting of both the subject, COVID vaccines, and if necessary the location, the CDC web site. As was previously stated, there is no need to tell me to click, as my screen reader will let me know if I am on a clickable element and presumably sighted users can tell by the underlined text. Hope this helps, Angela

artsymartha68 commented 3 years ago

Thank you @AngelaFowler82 we are thrilled to have you on the team.

DanielleThierryUSDSVA commented 3 years ago

This is very helpful, @AngelaFowler82 - thank you!

joshkimux commented 3 years ago

I forwarded @AngelaFowler82 the source of this issue (the coronavirus FAQ page) to get her thoughts on the broader context as well. She spent some time auditing the page and had some more feedback to add:

Beyond the specific recommendations we've provided on links, we also hope to address the broader context and experience in which they live in. For example, consider ticket 18696 which discusses links that lack context on the coronavirus FAQ page. Even if the Section 508 issue in ticket 18696 is fixed, there will still be deeper usability issues around those links such as:

a tedious navigation for keyboard users who rely on the tab key due to the large volume of tab stops created by links on the page
a cluttered screen reader element list (a screen reader navigational tool that can list out all the links on the page) due to duplicate links in different FAQ responses (for example, Find a VA Location appears four times)
cognitive overload due to too much content, particularly for Veterans with cognitive disabilities

Usability is critical to accessibility even though it is not explicitly stated in WCAG 2.0. This is particularly true for those with cognitive disabilities, who find navigating the web more challenging than users without disabilities. They may be more likely to drop off when they interact with complex experiences that require higher cognitive load.

It's important that we prioritize making our experiences more easily usable, because it makes our experiences more accessible to people with cognitive disabilities. This is especially true since they make up a significant portion of our users on VA.gov (47.7% of all Gulf War II Veterans report experiencing cognitive disabilities).

@DanielleThierryUSDSVA that being said, would we be able to provide accessibility suggestions on link usage that go beyond just the links themselves? 🙏

As for specific guidance to this ticket, Angela and I would recommend that:

Example 1 follow option 2 Read more about mRNA vaccines on the CDC website.
Example 2 follow option 2 Find the phone number for your local VA health facility.

As Angela pointed out, it's ideal to have the purpose proceed the target 👍

DanielleThierryUSDSVA commented 3 years ago

Hi @joshkimux. First, thank you very much to you and @AngelaFowler82 for the additional input on the examples!

Re: the importance of UX and making content accessible for people with cognitive disabilities - we are 100% aligned on this shared goal.
Re: additional accessibility suggestions on link usage - yes, of course! I would welcome all accessibility suggestions on link usage. Our content team is in the process of refining content patterns and standards for plain language, content accessibility, and preparing content for translation. And we're hoping to collaborate closely with @artsymartha68 and you all on these efforts.
Re: cognitive overload: Also 100% aligned on this. For awareness - one of our primary content goals for 2021 is to lighten cognitive load on pages throughout the main benefit hubs through a combination of implementing new content design patterns and moving some content over into our new Resources and Support section.

I should note that this coronavirus faqs page, specifically, is a bit of an outlier. The team created it as a quick solution to an urgent need to consolidate all Veteran-facing coronavirus info across all VA departments. And a very small content team is managing a complex approval process and updates across 3 languages for both this and the vaccine content + the rest of the site content. This is not at all to say that we shouldn't work to improve this page. In fact, it's due for another run-through of questions we may be able to remove. But, I do just want to be totally honest about this particular page.

joshkimux commented 3 years ago

@DanielleThierryUSDSVA Thank you for providing valuable context here! It's super encouraging to hear some changes are inbound in terms of content. Please do reach out to either me or Angela if y'all need any extra hands when it comes to accessibility 😄

Also, do let us know if our answer satisfied this original request. If you need more details, I recommend this article by Accessibility Oz as a good resource for accessible links.. Otherwise, please feel free to reach out to us with any additional questions!

peggygannon commented 3 years ago

@peggygannon Adding myself to this ticket for awareness.

DanielleThierryUSDSVA commented 3 years ago

Thanks, @peggygannon! We'll be adding this to content documentation/style guide soon.

department-of-veterans-affairs / va.gov-team