WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Aria roles instead of headings?

for

From: Birkir R. Gunnarsson
Date: Mar 4, 2013 9:00PM

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>;
> > > >