Styling Forms with Attribute Selectors - Part 1

This is an exciting article, marking the first of a multiple part series by renowned CSS author Christopher Schmitt that explores modern CSS design techniques, mainly focused around implementing CSS3 techniques that gracefully degrade if browser support is not there. This particular article covers attribute selectors.

( Read the article )

Why do you use

label[for="byear"], label[for="bdate"] {
  position: absolute;
  left: -999px;
  width: 990px;
}

instead of the following?

label[for="byear"], label[for="bdate"] {
  display: none;
}

scipio, that is a trick to hide stuff visibly. It will still be read by screen readers though, which wouldn't be the case with your solution.

scipio, the reason is mentioned after the screenshot:

Note that typically we could remove an element like the two label elements above using the display property set to none. However, this presents an accessibility issue - almost all screenreaders would miss out the elements hidden in this fashion. So, in order to keep the content available for readers with visual impairments, set the position to absolute and move it out of the way with the left properties.

Originally posted by AyushJ:

scipio, the reason is mentioned after the screenshot:

Originally posted by hzr:

scipio, that is a trick to hide stuff visibly. It will still be read by screen readers though, which wouldn't be the case with your solution.

Thanks for your replies, I had clearly missed that explanation. It still looks a bit like a hack though, isn't there a more elegant way to do this?

Originally posted by hzr:

scipio, that is a trick to hide stuff visibly. It will still be read by screen readers though, which wouldn't be the case with your solution.

Actually, labels hidden with display: none will be read by screen readers, or at least in Jaws last time I checked.