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

Christian

By "heading order" it means you cannot skip a level, levels of
headings must be sequential.
You cannot go from h1 to h3 to h2 to h4 etc.
It is ok to go from h1 to h2 to h3 and then back to h1, or even start
with h2 and then going to h1, but you cannot start with h2 and go to
h4.
If we picture this, for instance, as a book with chapters, subchapters
and sub sub chapters.
h1 marks the title of the book (if there are transcriber notes first,
they should be an h2 or something, this way using the h1 shortcut key
can get users directly to the title of the book).
Chapter 1 needs to be an h2 heading then, subchapter 1.1 an h3 (not an
h4), sub subchapter 1.1.1. is an h4 heading (not an h5 or h6), but the
next subchapter should be an h3, and the next main chapter an h2.
So as long as your heading structure is logical and does not skip
steps unnecessarily, you're ok.
hth

On 3/4/13, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> 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>;
>>> >>> >>> >>>
>>
>