search

fac-13 / ab-fac

Eade, Jennah, Nicos, Vanessa AbFACulous Team
https://fac-13.github.io/ab-fac/
1 stars 0 forks source link

`<p>` tags wrapping the inputs... #33

Open haydnba opened 6 years ago

haydnba commented 6 years ago

https://github.com/fac-13/ab-fac/blob/051cefe6edbe43a65115af9c2158704a10880a5b/index.html#L137

I think that wrapping the inputs in paragraph tags leads to issues being raised by accessibility audits - although this is what formspree does by default it seems...

Also, there are no labels for the form inputs which screen readers don't like

🐿

helenzhou6 commented 6 years ago

For lines of code https://github.com/fac-13/ab-fac/blob/master/index.html#L137-L146

Just a comment re:adding labels on your contact form, you can actually put your input tags inside a label tag (that may make more sense than using p tags). E.g.:

                <label for="form-name">First Name
                    <input name="First Name" id="form-name" type="text" aria-label="Name" 
 placeholder="Your Name" required/>
                </label>

I know this means you will have 'First Name' displayed so you'll need another class to hide it (like <span class="is-hidden">First Name</span>)? 🤔

eadehemingway commented 6 years ago

thanks for this, we have just altered it to use 'arialabelledby' which now works with chromevox!