Improving Form Accessibility with DOM Scripting

12 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Ian Lloyd

    @gillbates: I’ve aluded to doing that in the last paragraph – a combination of CSS and DOM scripting to get it looking like a normal label, but retaining the semantic relationship that you get with fieldset/legend and contents. The DOM part could come it to hide the fieldset and legend (because they are such a bitch to style in CSS) and use the text found in the legend to create a new (easy-to-style) text element elsewhere. Am I making sense here? It’s early in the morning and I’ve yet to have a cup of coffee!

  2. gillbates

    Just a quick question, why not use fieldset instead of label (maybe even styled as the rest of the form’s labels) in the case of a D.O.B. or other “multi-input inputs”?

  3. gillbates

    I gotcha Ian, I re-read everything paying real attention and it became clear that you had already addressed this. I guess I must’ve missed my coffee when I read it =)

  4. Russell Polo

    Cool. I’ve been making webforms for years. I had no idea how much of a noob I was. ;-)

    Is the “for” attribute a defined attribute or is it something you just made up to work with your script ?

    And what does the thisId = labels[i].htmlFor; do?

    isn’t getAttribute supported by IE ?

  5. Scott Sauyet

    Instead of getting the text by using labels(i).childNodes(0).nodeValue and parsing the string, why not use the title attribute of the label element, which “offers advisory information about the element for which it is set.” (WC3 Recommendation).

    It seems the perfect fit, not only semantically correct, but

    format = labels(i).title;

    is certainly a less brittle implementation than

    var format = labels(i).childNodes(0).nodeValue;

    var startpoint = format.indexOf("(format ")+ 8;

    var endpoint = format.indexOf(")");

    format=format.substr(startpoint,(endpoint-startpoint));

    Does this make sense?

    —Scott, who does know that those are supposed to be square brackets, but Textile isn’t playing nicely with source code…
  6. Simon Roe

    “But why not just use display:none?”

    Because display:none makes some screen readers ignore the content and not read it. This is a very nice way of doing it!

    By the way, you might want to fix the tab order on this form, as tabbing from “http://” to the Message takes me to the logo at the top of the screen!

  7. Terrence Wood

    The off left technique is a better solution than display:none which, as Simon points out, most screen readers honor by not announcing it. See discussion at : http://css-discuss.incutio.com/?page=ScreenreaderVisibility

    No js required, hiding labels can be solved with a little css.

    label {

    position:absolute;

    left: -9999px;

    }

    That said, IMHO it is better for accessibility to leave the labels visible so you have a bigger target to hit with your mouse – clicking the label focusses the field which is good for people with motor disabilities.

Impress us

Be friendly / use Textile