[Authentication code] Alt text may not be clear

[svinkle]

Issue summary

The alt text for each of the modal window images may not be clear as to convey the image context. This could lead to a confusing or frustrating user experience.

Screenshots

Current code

HTML

<img
  class="image"
  alt="Screenshot of COVID Shield mobile app with bottom sheet highlighted"
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Screenshot of COVID Shield mobile app with bottom sheet highlighted"
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Screenshot of COVID Shield mobile app with Submit code button highlighted"
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Screenshot of COVID Shield mobile app with I agree button highlighted"
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Screenshot of iOS permissions pop-ups"
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Screenshot of Android permissions pop-ups"
  src="…"
/>

Steps to reproduce

1. Go to https://portal.myshopify.io/ with with any supported browser
2. Login with admin@covidshield.app/password
3. Activate a "More information" modal control
4. With an active screen reader, navigate through the image content via virtual cursor

Behavior

Expected

• Image alt text to be clear and concise.

Actual

• Image alt text may not be clear for users to understand.

Recommendation

Adjust each image alt text to be clear by:

1. Indicating which screen in the app the screenshot is showcasing,
2. Sharing the exact label of the control being highlighted, and
3. Using proper sentence structure.

recommended code

HTML

<img
  class="image"
  alt="Covid Shield mobile app, home screen. A button at the bottom of the screen with the label, 'Covid Shield is ON', is highlighted."
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Covid Shield mobile app, 'Covid Shield is ON' section is expanded. A section with heading, 'Covid Shield code', and button with the label, 'Share code', is highlighted."
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Covid Shield mobile app, 'Share code' section is expanded. A form with heading, 'Please enter your 8 digit Covid Shield code', and button with the label, 'Submit code', is highlighted."
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Covid Shield mobile app, 'Submit code' success message screen. A page with heading, 'Share your random IDs', and button with the label, 'I agree', is highlighted."
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="iOS dialog with heading, 'Share your random IDs From This Device With Covid Shield?'. Options include 'Don't Allow' or 'Allow'."
  src="…"
/>
<!-- … -->
<img
  class="image"
  alt="Android dialog with heading, 'Share your random IDs with Covid Shield?'. Options include 'Cancel' or 'Share'."
  src="…"
/>

Specifications

• Component: Authentication code
• Related: [Authentication code] Step may not be descriptive #66
• WCAG Principle: Perceivable
• WCAG SC: 1.1.1 Non-text Content
• Severity: Medium
• Effort: Medium