Immediate accessibility fixes for RWD: Learn Accessibility by Building a Quiz

[bbsmooth]

Describe the Issue

• The "CSS" h2 and the textarea have the same id value. This is affecting screen reader users since this involves an input and associated label.
• The logo in the upper left needs alt text. I would suggest it just be "freeCodeCamp".

Affected Page

A lot of them.

Your code

N/A

Expected behavior

- Either the "CSS" h2 or the textarea needs to use a different id value. Changing the textarea would probably be easier since its id is added after the h2 in step 39. This is actually one of those instances where the user can choose any value for the id and then we put our own value in there for the remaining steps. Resolved

• Add alt text to the logo. Do we need to add an extra step for this or can we just add it to step 7?

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[ShaunSHamilton]

Seeing as the logo is non-functional, do we want the alt to be null? alt=""? If it does require an alt, then this should get its own step, and a clear description as to why it needs one should be given.

I suggest changing the id of the textarea (and associated label for) to question.

[bbsmooth]

Per WCAG 1.1.1: Non-text Content, the logo does require alt text. Functionality isn't the deciding factor here, it's if the image conveys information (i.e. is not purely decorative), which this image clearly does.

Do we want to split this off into its own issue if we are going to create a new step?

[ShaunSHamilton]

Do we want to split this off into its own issue if we are going to create a new step?

I would say yes, but it is not fun to deal with the merge conflict, when two PRs are opened at the same time.

[naomi-lgbt]

The logo still needs an alt text.

The logo is introduced in step 7: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-7

That step should be updated to instruct campers to give the img an alt text of freeCodeCamp. The seed code in all subsequent steps should be updated to include that new attribute.