Accessibility issue with labels in Registration Form course

Describe the Issue

There are two related issues:

• The label for the file input does not use a for attribute and this is causing the NVDA screen reader on Windows and ORCA screen reader on linux to not announce the label text when the user tabs to the input. I have a codepen demo to illustrate this.
• It is considered a best practice to use a for attribute on a label, even when the input is embedded in the label itself, because some screen readers may not read the label correctly without the for attribute (as demonstrated in the issue above). This is also noted in step 30 of the Accessibility Quiz course.

All of the inputs on the form in this course are embedded in a label and none of the labels have a for attribute.

Affected Page

All steps of the Registration Form course that have inputs embedded in labels.

Your code

Current HTML for file input:

<label>Upload a profile picture: <input type="file" name="file" /></label>

Expected behavior

Should be something like:

<label for="file-upload">Upload a profile picture: <input id="file-upload" type="file" name="file" /></label>

Screenshots

No response

System

• Device: Desktop
• OS: Windows 11
• Browser: Firefox
• Version: 101
• Screen Reader: NVDA
• Version: 2022.1

Additional context

I’m only bringing this up because I thought it might be a good opportunity to teach campers that valid HTML isn’t always as accessible as it could be and best practices should be followed because they help eliminate these types of edge cases.

[JohnathanTWebster]

@Sboonny thank you. I will look into this further. I checked the documentation site for how to “edit” but there were only steps on how to create new challenges.

[JohnathanTWebster]

@Sboonny Okay, I can take a look. Since the concept is mentioned early on in the course I can start adding “for” in the labels.