[A11y] - WCAG 2.1 - Guideline 1.1.1 LIst of Non-Text Content Issues

[aliciajbrookshire]

Describe the bug

Password visibility button on login page does not have alt text that is read by screen reader

Expected behavior

1.1.1
Non-text Content
Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)

Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)

Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/auth/login
2. Turn on screen reader
3. Confirm password visibility button is not identified by screen reader
4. Use WAVE tool to identify accessibility issues, confirm this button is flagged as not having associated text

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113..0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

[aliciajbrookshire]

Describe the bug

Notification Bell button on in nav bar does not have alt text that is read by screen reader

Expected behavior

1.1.1
Non-text Content
Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)

Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)

Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/auth/login
2. Turn on screen reader
3. Confirm notification button says "collapsed button" and does not identify the button as the notification button

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113..0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

[aliciajbrookshire]

These issues were previously noted in #671. For this reason, I am closing this issue.