[a11y Support] MHV Cartography: Newsletter Signup Interaction

[sara-amanda]

CAIA Assignee(s)

• Jamie
• Sara

About the Cartography Team

• Team name: Cartography team
• OCTO product owner: Patrick Bateman
• Product name: MHV landing page
• Product manager: Wes Rowe
• Slack channel: mhv-on-vagov-cartography-team
• Dedicated a11y specialist on your team (if you have one): Dan Bivins

Issue Description

Material Honesty

• The current single-field sign-up form on the MHV landing page is not materially honest about its function (navigating to a new page when selecting "Subscribe")
• The CTA button has inaccurate link text. The word "Subscribe" is not accurate - the email address provided by a user does gets added into the first form field on the GovDelivery signup page, but nothing is submitted in this process

Designs

Current implementation

The image shows a heading that says "Subscribe to get My HealtheVet updates" with an Email address text field below and a "Subscribe" button below the input field.

Proposed design (MHV Cartography Team)

The image shows a heading that says "Subscribe to get My HealtheVet updates" with a line of text under that heading saying, "Get the updates you need to manage your health care by signing up for our biweekly newsletter." Underneath this text is a chevron icon pointing to the right and link text next to it saying "Subscribe to the MyHealtheVet newsletter (at GovDelivery.com)". The link would point directly to https://www.myhealth.va.gov/subscribe

Remediation Thoughts c/o MHV Cartography Ticket

To address these issues the MHV Cartography Team is recommending:

• Remove the form field & button from the design.
• In its place, insert paragraph text underneath the H2 on the MyHealtheVet landing page to describe the newsletter and what value it provides the Veteran.
• Include a secondary action link that opens in a new tab to route the user to the GovDelivery page where they can sign up.

Definition of Done

### a11y Tasks
- [x] **Review for Material Honesty** Material honesty. Do not style a link to look or behave like a button ([material honesty](https://adamsilver.io/blog/but-sometimes-buttons-look-like-links/)).
- [x] **Clarity needed** between  GovDelivery signup page and www.myhealth.va.gov/subscribe page
- [x] **VADS Guidance** Review [External Links Section](https://design.va.gov/content-style-guide/links#linking-to-external-sites)
- [x] **Review USWDS Guidance** on [External Links](https://designsystem.digital.gov//components/link/)
- [x] **Confirm Redirect Location**: www.myhealth.va.gov/subscribe ; this is a [VA sub-domain exception that opens in a new tab or window](https://design.va.gov/content-style-guide/links#va-sub-domain-exceptions-that-open-in-a-new-tab-or-window) (review guidance)
- [ ] **Provide Feedback:** Provide feedback and recommendation

[coforma-jamie]

@danbivins, a question for you:

Currently, if a user uses the form field on MHV to enter their email address and hits "Submit," they're taken to a new page where their email address is already entered in, and they need to re-type it to confirm.

Using the proposed design, there IS no form field on MHV. So when the user clicks on the link, are they taken to a page where they need to enter in their email address twice? What does that look like?

[danbivins]

@coforma-jamie We were thinking they'd be taken right to the Gov Delivery's subscribe page which then the user would then enter their email (on the Gov Delivery page) and then be taken to the following page where their email address is retained, as you mentioned. So I think it's adding one more click to take them to the Gov Delivery's subscribe page but then the interaction at that point seems the same.

[coforma-jamie]

Gotcha :) Then from an a11y point of view, I think you have a solid plan! The action link provides visual emphasis while being materially honest.

One thing you'll need to consider is that this should open in a new window per VADS guidance. CAIA content will be the authority on this, but the link text will probably end up being something like "Sign up for our newsletter (opens in new tab)". The (new tab) needs to be contained within the link text so that "tabbers" will hear it.

[danbivins]

That makes total sense. We'll plan to do that. Thanks for the feedback!

[danbivins]

To close this loop, Jamie and I chatted with Laura in Slack and landed on this text for the link: "Subscribe to the My HealtheVet newsletter on GovDelivery.com (opens in new tab)"