Question

I have a shipping form. Three input fields surround the shipping address.

Below are the labels (and in parenthesis their “for” values)

1) Address/P.O. Box (for=”shipAddress1″)
2) Address 2 (for=”shipAddress2″)
3) Use for International Address only(for=”shipAddress3″)

Our designer has proposed to label them simple as “Street Address or P/O Box”, but I still want to present these 3 labels for Web Accessibility (right?).

What should I do with items 1, 2, & 3 above — should I apply a text-indent:-1000em; or something like that. I’m assuming using display:none mean screen reader can’t see them also, right?

Thoughts?

Answer 1

Do you need to show the labels to the user or not? If not, use text-indent:-999px to position them off the page. Display:none will not be picked up by screen readers.

This is a good overview on positioning rather than hiding for accessibility: http://www.nickfitz.co.uk/2007/02/14/why-left-9999px-is-better-for-accessibility-than-display-none/

Still, I’m not entirely sure what you need to show your users. Your question is a bit confusing.