Campaign Landing Page audit

[laflannery]

Description

Complete a full accessibility audit of the Campaign Landing page product, including:

• https://www.va.gov/initiatives/sign-in-securely-with-logingov/
• https://www.va.gov/initiatives/vote/

Acceptance Criteria

• Accessibility audit has been completed
• Recommended updates and improvements have been documented
• Any high priority/critical updates are brought to the attention of PM/DM/PO
• Design review ticket is created

[laflannery]

Accessibility updates

Overall

• Other than “This page is for”, the small gray text is superfluous, it’s most likely getting skipped by SRs and sometimes it’s redundant (FAQs), can we remove these entirely?

Why this Matters

• This page is for:
  • Can we consider adding the bullets here? Unstyled lists are not always read properly in Safari so it really should only be used when absolutely necessary

What you can do

• Update the images to have a null alt

Video

• Can we move the video description above the video?
  • To me this seems like a better user flow - read what the video is about then you can more easily decide if you want to watch it
  • It is also more consistent with the rest of the sections on the page (Heading, intro text, then stuff)

Stories

• Change the images to null alt, these are decorative images

FAQs

• Q&As FE display:
  • Page specific and Reusable are currently separate on the Front end which might not necessarily be the desired situation. We have a ticket with an approved solution that should be implemented
  • Also if there is an instance of only 1 Accordion we shouldn’t show the expand all option. However, I think this would be moot once the above solution is implemented
• More links is a Secondary CTA that will need to be converted when ready (planned for mid-April)

Updates that should be made to align with upcoming DST changes:

<va-icon> migration
Planned for deprecation of current icons beginning of May~~

• Icons on Social links under "This page is for" section
• Icons on links under "Connect with us" section
• Icons on links under "VA benefits" section

Changes to external link guidance
No deadline (as of yet) on when changes need to be made

• Social links under "This page is for" section need to be updated to open in the same tab
  • Remove the special class
  • Overall this needs to be dealt with in vets-website but not 100% sure on ownership here
• All links in "Connect with us" need to be updated to open in same tab

Upcoming Heading/Link guidance
No timeline yet for when guidance will be formalized

• Consider unlinking headings and adding separate CTAs to align with new guidance for:
  • What you can do promos
  • Spotlights
  • Stories
• Other instances that need consideration but they may fall into the exception category:
  • Events
  • VA Benefis
• Any changes may require CMS work to add additional fields for these new CTA links

Components

• Action Link
  • Will need to be updated when ready for use from DST, planned for mid-April
  • Where it's used:
    • Hero Banner CTA, currently using a non-component reverse Action link
    • Why this matters CTA, currently a secondary action link
    • Video CTA:
      • This is currently using <va-link> component with the secondary action link class - that combination doesn’t work.
      • It should be a secondary action link (as the others are) so needs to be taken out of the <va-link> component
    • Downloadable resources CTA, currently a secondary action link
• Link
  • Download links under Downloadable resources
    • Also remove the aria-label that is currently being used here (probably won't be an issue once we update to component
  • Links under Connect with us
    • Also remove the aria-label that is currently being used here (probably won't be an issue once we update to component
• Card
  • Downloadable resources

Other updates/improvements:

Stories

• Link to other stories - This isn’t showing on the Front end, it also isn't working very well in Drupal (I can’t select other nodes)

Events

• When a recurring event is added here there is no indication, should there be?

[laflannery]

@aklausmeier would you want to review/go over the above notes and see how and/or what we might want to ticket for potential next steps? Particularly because I do have some small design/display questions in my comments?

[aklausmeier]

@laflannery yes

would you want to review/go over the above notes