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:03PM

Oh, did not seen Jared's post before posting.
Basically, if you can do both (landmark and a heading), it's always
good (I just conducted a study with my colleague on the habits of
screen reader users, 70%of them know off, and navigate by, headings,
but only 32% know off landmarks, even fewer use them for navigation,
we hope this will change with better user training and more widespread
use of structural elements).
I'd use a form rather than a search role for the landmark up there
myself, but feel free to do whatever seems most appropriate.
Again, h1 should not be the first heading on a page, in my opinion, it
should designate the main section of the page. If something preceeds
it, fine, especially when it ismarked up with a higher level heading.
-B

On 3/4/13, 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>;
>> >> >> >>
>