Forms doc labels not accessible #133

Closed
ricklowes opened this Issue Dec 2, 2011 · 5 comments

Comments

Projects
None yet
4 participants

Was just looking at the markup for your Forms doc - I don't believe these are coded to proper practice for accessibilty - the form input labels need to be either explicitly related to the input field (using the "for" attribute) or implicitly by including the input element inside the label element.

So for example this markup:

<label>Standard Input</label>
<input type="text" class="input-text" />

Should be like this (in order to make an 'explicit' relationship, which I believe is recommended):

<label for="standard-input">Standard Input</label>
<input id="standard-input" type="text" class="input-text" />

This should be done throughout the Forms doc since many people will simply cut/paste this markup, and it's easy to add in these accessibility best practices as examples. There are likely other best practices as well to include in the forms, but just noted this one quickly so wanted to pass it on.

Contributor

smileyj68 commented Dec 2, 2011

Good point Rick - we'll make that change shortly. Definitely true plenty of people will cut/paste, so it's good to show the right way to do it. If you see anything else like that let us know.

@ricklowes - got a link to a good overview of accessibility best practices?

Hi Allan,

It's a very broad area with a lot of pieces to it - the definitive source
of course being the W3C WGAG 2.0 Guidlines and their "techniques" pages:
*
*

There's a number of other sites out there as well with good advice.

Also here's a good "accessibility checklist" that has a more summary view
of best practices built in (it's a bit older, but still relevant):

http://cameronmoll.com/archives/2008/06/web_accessibility_checklist/

There's lots of other resources out there as well on specific topics etc -
check www.smashingmagazine.com, www.nettuts.com,
www.teamtreehouse.com(need membership), etc.

Hope that helps.

Rick

On Sat, Jan 7, 2012 at 3:46 AM, Allan White <
reply@reply.github.com

wrote:

@ricklowes - got a link to a good overview of accessibility best practices?


Reply to this email directly or view it on GitHub:
zurb#133 (comment)

Contributor

smileyj68 commented Feb 14, 2012

We updated this in the docs, and I'm saving this as FAQ for future reference. We're going to keep working on accessibility for the next rev.

smileyj68 closed this Feb 14, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment