Unique and descriptive link text - In-accordion CTAs

[angelina-smith]

User / Persona

As an assistive technology user, link text needs to be descriptive and unique

Reason / Justification

so that when I pull up a list of links, I know exactly where I will be taken.

Acceptance Criteria (AC)

As an assistive technology user, I want all link text to be clear, so that I know exactly where I will be taken when I interact with it.

• [ ] I expect links to be distinguishable by just their link texts or WAI-ARIA labels ('aria-labelledby' or 'aria-label') to make it clear that they lead to different destinations.

Other Notes

Location: Call to action links within the benefit accordions. What is currently happening: The same link text is used for links going to different destinations. Users might not know the difference if they are not somehow explained. Remediation Recommendation: Use of WAI-ARIA labels to make it clear that links with same link text has different end destination. Note: Depending on how we decide to address this, we will want to make sure any WAI-ARIA labels sound correct (and translated, if needed) on the Spanish version.

• 

• 

[angelina-smith]

@fongcindy

[fongcindy]

I've assigned @ErnestoFernandezAlvarez to this ticket and unassigned Scott for now.

Diego will have to work with Ernesto to determine the link text for the CTAs and also the Spanish translations. This might impact the design, width/height of the CTA. Once the text and button sizes are determined, we can assign this for Scott to build. Thanks

[ErnestoFernandezAlvarez]

hello guys @diegocob @fongcindy This is the button size that we decided on:

Do we need another version?

[diegocob]

We agreed on this design. Did Ernie see this?

A few content suggestions:

• [ ] We need to create a new field in the Agency CMS node to add the agency abbreviation. Otherwise it will not populate the (visit agency acronym)
• [ ] Change "Learn more about the"-->"Learn more:" this helps with ES gender conjugations since sometimes it will be "de, del, de la"
• [ ] Could we delete the periods in between SSA
• [ ] "Visit" in the parens should be lower case.

hello guys @diegocob @fongcindy This is the button size that we decided on:

Do we need another version?

[fongcindy]

Ernie has confirmed that we can keep the CTA text links and button design as is. On the backend, aria labels will be created to announce a more descriptive description for users.

Next step: @angelina-smith and/or @diegocob to propose list of suggested wording for each benefit link on the results page.

[diegocob]

So, we won't be using the benefit or agency name on the button, just "Learn more"?

[fongcindy]

@angelina-smith Were you able to get a USAGov example of the link text we can use as an example from Dave/Julia? Thanks!

[angelina-smith]

@fongcindy @diegocob When we had our meeting with Ernie about this, he liked the idea of keeping the current text we have for the CTA/links. Instead, we'll use ARIA labels to provide additional context.

So for the following screenshot, the CTA text of "Visit Social Security Administration (SSA)" would stay the same, but an ARIA label would be added to specify "Social Security Administration Supplemental Security Income page".

(Also, if we have any of our CTAs linking directly to a PDF file, that needs to be specified in the ARIA label as well. ie. "Social Security Administration Supplemental Security Income PDF file")

Do we have a list of all of the CTA link destinations/URLs for each benefit? If so, we can create a spreadsheet and I can write the ARIA label text that corresponds with each destination?

[ErnestoFernandezAlvarez]

Hello @fongcindy @diegocob @angelina-smith Are we following this model for all the accordions for all scenarios (Likely eligible, Not eligible and Need more info)? Visit "agency name" (agency acronym)

I'd like to confirm this so I change this on the accordions for the re-design Thank you!