Promo banner is inaccessible to keyboard and screen reader users, poor usability on mobile

[joshkimux]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

The problem

The promo banner (VA Design System) creates an inequivalent experience for screen reader, mobile, and keyboard users.

The promo banner's float property in particular can:

• hide keyboard focus for keyboard users
• cause clutter with other floating elements (like parts of the site that still have the old feedback button and sticky in this section menu)
• accidentally trigger unintended clicks and disorient users (especially since this is a full width touch target)
• create an unpredictable tabbing experience (keyboard users would be disorientated with a focus that jumps from the top, then to the bottom, and then back to the top)

It's also difficult for screen reader users to find as:

• it's not a landmark
• it doesn't have a heading
• it doesn't announce as an alert (and if it did, it would be very annoying)

Screen.Recording.2021-10-19.at.10.14.12.AM.mov

Removing the float property, but styling it at the bottom of the page would still result in an unpredictable tabbing experience and it would no longer be visible on page load.

Removing the float property and styling it at the top of the page would be better, but may result in an undesirably chunky header.

The usability of this component also diminishes with added complexity e.g. multiple alerts and multiple promo banners on the homepage.

Recommendation

Before

@cgednalske demoing what this looks like at 175% zoom

After

I spent some time mocking 4 potential resolutions to the issues taking into account added complexity with:

• multiple alerts
• mobile
• multiple promo banners

Promo banners and alerts have unique h2s above the h1 in a separate complementary landmark

• Pro: Used by NHS and Gov.UK. Uses complementary landmark with an aria-label which separates promo banners that are unique to the main content from the main
• Con: Places h2 above the h1 which may confuse some folks who aren't familiar with the pattern. Also adds volume to the landmark list.

A status region contains all promo banners and alerts as a list without any headings inbetween the header and the main

• Pro: Announces to all users upon loading on the page in a polite fashion.
• Con: Not discoverable by headings. Needs review to see if multiple status announcements (aria-polite) at once can announce poorly or create issues

Promo banner and alerts are nested in the header

• Pros: Works well for promo banners like site maintenance as it's being shared on all pages at all times. Place it early in the DOM makes it more easy to discover.
• Con: Not discoverable by headings and can bloat the header.

Promo banners and alerts are a part of the main as h2s after the h1

• Pro: h2s are ordered below the h1 making announcements easily discoverable and logically ordered
• Con: Does not split unrelated content like site maintenance into a separate landmark.

If we decide to jump into this discussion more, I can create codepen prototypes featuring each of these. Would also love to invite feedback on this from others too.

Acceptance criteria

• The promo banner is not sticky to the footer
• The promo banner's click target is limited to the link text itself, not the full width of the component (we can fix this now @bkjohnson for awareness)

Related tickets and conversations

Conversation with Dave, Ryan, and Kelson, this proposal was tabled by Dave for the following reasons:

• Let's worry about getting the content managed by the CMS.
• Hold off on the other fixes.
• Here's why: We're (Ryan) looking at redesiging the homepage in totality over the next few months and I'd like to consider both 508-first alongside Mobile first as we rebuild, rather than piecemeal this and possibly have throwaway work.

Several other va-alert tickets address padding issues on mobile. I hope these designs can help further that conversation 🙇

Resources

• Gov.uk has a wonderful thread on this with accessibility requirements which reinforces the argument that the promo banner should not be stickied to the bottom of the page where it will be unnoticeable to screen reader users

[humancompanion-usds]

@joshkimux - Which 508 defect level would you assign to this? I want to label it appropriately and want to get your input on the severity. By your description I would say a 1 or a 2. Does that seem right?

[joshkimux]

I assigned this originally as a defect-level-2 ✌️

[bkjohnson]

@joshkimux regarding this acceptance criteria:

The promo banner's click target is limited to the link itself, not the full component

I believe that it is already satisfied, the actual link just takes up a lot of space:

[joshkimux]

@bkjohnson thanks for clarifying, I'll update the acceptance criteria! Ideally we'd like the link to not be full width beyond the text itself to prevent misclicks on mobile screen readers (because this is sticky and full width).

[joshkimux]

Updated this to include a screenshot from @cgednalske on how big the promo banner can be at 175% zoom for Veterans with low vision

[humancompanion-usds]

@joshkimux - @Jenny-yw will reach out to you in order to review a test plan we have related to Announcements and banners. Moving that forward may "make space" for promo banner to move up in the page hierarchy. However, otherwise, we don't really have cycles on the Design System Team to move this forward. I suggest you work with Michelle Middaugh on where the Promo banner might live on the home page in future. That team was getting feedback on a component that may handle similar content.

[TiffanyPender]

I recently came across a related promo banner issue when doing an accessibility audit of the newly redesigned VA.gov home page. When doing screen reader testing, there are two landmarks that appear in the rotor that are not actually visible on the page. This means that although nothing is visible, to assistive technology users they may mistakenly think something is there. Both have a role=“region”. One has a data-widget-type=“maintenance-banner”, and the other is a related to the PACT Act.
Additional details can be found in GitHub issue #11827 (closed as it was out-of-scope for the homepage redesign). It seems that the empty maintenance banner is an existing backlog issue that occurs site-wide.

[humancompanion-usds]

@wesrowe - Is Promo banner no longer with the home page update? Or does it still lurk on va.gov?

[wesrowe]

I don't see any reason for it not to be available. Did you expect it somewhere it didn't appear?