Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility For Web Developers Build an Accessible Form Delivery Information Screen

Sebastiaan van Vugt
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sebastiaan van Vugt
Python Development Techdegree Graduate 13,554 Points

Why does Lighthouse give me a different accessibility score?

So, I have typed with the video and added this code to the index.html:

                   <form>
                <fieldset>
                    <legend>Delivery Information</legend>
                    <p class="hint">* - required field</p>
                    <label for "name">Your Name *</label>
                    <input type="text" id="name" name="user-name">
                    <label for "email">Your email *</label>
                    <input type="text" id="email" name="user-email">
                    <p class="hint">Receipt will be sent to this address.</p>
                    <label for "address1">Street address *</label>
                    <input type="text" id="address1" name="user-address1">
                    <label for "address2">Apartment/ Office Number *</label>
                    <input type="text" id="address2" name="user-zip">
                    <label for "zip">Zip Code *</label>
                    <input type="text" id="zip" name="user-zip">
                    <p class="hint">City and state will be looked up from Zip Code.</p>
                    <label for "tel">Phone *</label>
                    <input type="text" id="tel" name="user-phone">
                    <p class="hint">No Phone? Include alternative contact below.</p>
                    <textarea id="delivery-instructions"
                    name="user-delivery-instructions"></textarea>
                    <button type="submit">Continue to Billing</button>
            </form>

After putting the code on GitHub pages, Lighthouse gave me an accessibility score of only 87% and says there are the following issues:

Form elements do not have associated labels

Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more.

Failing Elements input#name input#email input#address1 input#address2 input#zip input#tel textarea#delivery-instructions

I do believe that all these labels are present though. Does anyone know what's wrong here?

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Sebastiaan van Vugt! You're very very close. The problem here is that on the labels that are "missing", you've forgotten an = in the for attribute. So it never really got assigned.

For instance, on the name input, the label says this:

<label for "name">Your Name *</label>

But you meant to type:

<label for="name">Your Name *</label> <!-- note the = between for and "name" -->

Just a few = signs missing here and there.

Hope this helps! :sparkles:

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Hey Jennifer, can you help me with how to do this whole hosting part. I tried looking at at the Whole Hosting course for 23 minutes. I am not able to understand what's going on I do not know anything about hosting, API's or javaScript masking too