Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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 karan
seal-mask
.a{fill-rule:evenodd;}techdegree
karan karan
Web Development Techdegree Student 4,470 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