WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Aria roles instead of headings?

for

From: Christian Biggins
Date: Mar 4, 2013 9:04PM

Hi Birkir,

I wasn't aware that you could specify a level - this might work perfectly.
Generally our search forms have no visible label, so an 'h2' for a purely
styling perspective is unnecessary.

Thanks for this information.

Christian Biggins <http://about.me/cbiggins>;





On 5 March 2013 15:00, Birkir R. Gunnarsson < <EMAIL REMOVED> >wrote:

> Hi
>
> There is no way to move the search form further down in html order,
> but use CSS to keep positioning it where it is?
> This idea seems just fine, but it's also good to mark it up with a
> heading. That would be ideal. I think people generally don't expect a
> search form to be on top of the page they are looking at.
>
> You can also do this "invissibly" via aria.
> Simply put a div around a paragraph, link, or whatever form element
> could serve as a heading and add the code:
> ... <div role="heading" level="x"> ... where x is a value from 1 to 6,
> i.e. the level heading you want to appear there.
> This way you can create a heading as far as assistive technologies are
> concerned, without affecting your layout or vissible structure at all
> (the browser tells A.T. there is a heading there, but it does not
> display it as a heading or anything).
> You could even make the text inside the heading a paragraph which is
> positioned off-screen with CSS, if necessary, thus creating anentirely
> invissible heading, if that helps.
> HTH
> -B
>
> On 3/4/13, Christian Biggins < <EMAIL REMOVED> > wrote:
> > Hi All,
> >
> > We use a 'skeleton' design for all our sites with some basic elements
> > marked up in a specific way to aide in quicker development. Its a little
> > tricky to move too many of these elements but changes can be made.
> >
> > One problem is the markup of our search form. It usually sits above the
> > page title (h1) and has been marked up incorrectly with an h2 for the
> > search form title. But, because of its position, we can't move it down
> > under the h1, nor can we make it an h1, because its not.
> >
> > My question is, is it acceptable to wrap the form with a div containing
> the
> > role 'search' or even give them 'form' tag the 'role' attribute of
> 'search'
> > rather than having a heading at all up there?
> >
> > Any opinions, thoughts etc would be greatly appreciated.
> >
> > Thanks.
> >
> > Christian Biggins <http://about.me/cbiggins>;
> > > > > > > >
> > > >