Skip to content

[Authentication code] Alt text may not be clear #77

@svinkle

Description

@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 Screen Shot 2020-05-29 at 3 22 02 PM Screen Shot 2020-05-29 at 3 24 10 PM

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions