EDSC 3075-Fix 508 compliance 'element must contain ALT attribute'

[Chauncy-S]

Overview

What is the feature?

This is a fix for a 508 Compliance issue/task to add text to all A elements or an IMG with an ALT attribute. see #1368.

What is the Solution?

Since each A element already had text and they weren't images, the solution was to add an 'aria-labelledby' attribute to all of the A elements listed in the given picture from the issue. I followed the Sort sites accessibilities checkpoint page based of the provided error from the picture/text. Link: https://www.powermapper.com/products/sortsite/rules/acchtmllinktextblank/

What areas of the application does this impact?

All of the A elements within

near the bottom of body.html.

Testing

I tried to make changes to the 'span' elements that contain the anchor tags by taking out the text between the anchor tag to see if a screen reader would pick it up but even if I took out the text the page would still render with the same text it was originally supposed. For example, even if I took out NASA Privacy Policy, the site would still render it to say NASA Privacy Policy like in the picture below even though the HMTL file was updated.

Reproduction steps

• Environment for testing:
• Collection to test with:

1. Step 1
2. Step 2...

Attachments

Please include relevant screenshots or files that would be helpful in reviewing and verifying this change.

Checklist

• I have added automated tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[abbottry]

@Chauncy-S there are a lot of formatting changes here, spaces turned into tabs and no-longer aligned start and end blocks. Please take a pass at formatting.

Also, I'm seeing things like data - show - fbm="true" which is invalid code and would fail at run time and test time. Please ensure you've tested your changes locally through the browser as well as by running the tests.

A nice confirmation of this ticket would be a screenshot of the 508 tool showing these items no longer being an issue.

[Chauncy-S]

Hi Ryan, @abbottry I can fix the formatting changes, VS Code auto formats when I save I didn’t realize that the commits would pick up on it. Can you explain to me what ‘data-show-fbm=”true”’ means, I didn’t mess with this and so I am not sure what that is and how its invalid code. I ran npm test and it stated that 529 out the 529 test suites passed and 2957 of 2957 tests also passed, however when I run Cypress I fail the first two authentication tests so I was going to ask if it had something to do with the secrets.config.json file and updating the cypress section or if it was something else related to the data-show-fbm=”true” because I have only changed a few lines in the body.html file. I also would not be able to screenshot the 508 tool showing these items because I do not have access to the https://inside.nasa.gov/webservices/support/section-508-testing-sortsite from which I think the error was provided in the issue listing. I am not sure if there is a work around for me to do this or not but that would help me to see if they did pass or not.