WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: quick question: label for text input in the middle of a sentence

for

From: Mike Barlow
Date: May 21, 2016 7:14AM

Well you could also make use of a hidden span tag and using the
aria-labelledby role for the input field:

CSS Styling for hiding the label for sighted users:
.hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

Here is the html content:
<span class="hidden" id="Question">Answer to the question what cheese is
the moon made of?</span>

The moon is made of <input type="text" name="CheeseType"
aria-labelledby="Question" /> cheese


*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: <EMAIL REMOVED>

On Fri, May 20, 2016 at 12:38 PM, Brandon Keith Biggs <
<EMAIL REMOVED> > wrote:

> Hello,
> Do the whole sentence, especially if the screen reader user can just hit
> tab to get to the next blank.
> That way the screen reader user does not need to hit any other buttons
> other than tab to move to the next sentence.
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Fri, May 20, 2016 at 9:02 AM, Mike Warner < <EMAIL REMOVED> > wrote:
>
> > Hi all,
> >
> > maybe I'm not thinking straight today, since I got too little sleep, but
> > I'm unsure as to the best solution. We've got fill-in-the-blank
> exercises,
> > and the blank can appear anywhere in the sentence. Instead of having a
> > series of underscores and then the text input at the end, we have the
> text
> > input right where the missing word goes. Everything works great, and our
> > students enjoy the layout, but I'm not sure where to put the label for
> the
> > text input. The sentence could be as follows:
> >
> > The moon is made out of ____ cheese.
> >
> > Should the label tag be on the bit before, the blank, after the blank, or
> > on the whole sentence? I'm thinking that it should be the whole
> sentence,
> > but my tired brain can't decide.
> >
> > Thanks!
> >
> > Mike
> >
> > Mike Warner
> > Director of IT Services
> > MindEdge, Inc.
> > > > > > > > > >
> > > > >