E-mail List Archives
Thread: Aria roles instead of headings?
Number of posts in this thread: 13 (In chronological order)
From: Christian Biggins
Date: Mon, Mar 04 2013 8:40PM
Subject: Aria roles instead of headings?
No previous message | Next message →
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>;
From: Jared Smith
Date: Mon, Mar 04 2013 8:58PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
On Mon, Mar 4, 2013 at 8:40 PM, Christian Biggins wrote:
> 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.
There's nothing wrong with having an h2 precede the h1.
> 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'
Either (but not both) would be fine. You already have a form element,
so it'll be cleaner to just add the search role to it.
> rather than having a heading at all up there?
Why not do both? This would provide easier page navigation for users
that navigate by headings and those that navigate by landmarks.
Jared
From: Birkir R. Gunnarsson
Date: Mon, Mar 04 2013 9:00PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
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 ADDRESS 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>;
> > > >
From: Christian Biggins
Date: Mon, Mar 04 2013 9:00PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
Hi Jared,
Everything I have read about headings suggest that they must be in order
and that you cannot 'skip' a heading level.
Christian
Christian Biggins <http://about.me/cbiggins>;
On 5 March 2013 14:58, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Mon, Mar 4, 2013 at 8:40 PM, Christian Biggins wrote:
>
> > 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.
>
> There's nothing wrong with having an h2 precede the h1.
>
> > 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'
>
> Either (but not both) would be fine. You already have a form element,
> so it'll be cleaner to just add the search role to it.
>
> > rather than having a heading at all up there?
>
> Why not do both? This would provide easier page navigation for users
> that navigate by headings and those that navigate by landmarks.
>
> Jared
> > > >
From: Birkir R. Gunnarsson
Date: Mon, Mar 04 2013 9:03PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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>;
>> >> >> >>
>
From: Christian Biggins
Date: Mon, Mar 04 2013 9:04PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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>;
> > > > > > > >
> > > >
From: Birkir R. Gunnarsson
Date: Mon, Mar 04 2013 9:06PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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>;
>>> >>> >>> >>>
>>
>
From: Jared Smith
Date: Mon, Mar 04 2013 9:10PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
On Mon, Mar 4, 2013 at 9:00 PM, Christian Biggins wrote:
> Everything I have read about headings suggest that they must be in order
> and that you cannot 'skip' a heading level.
You shouldn't skip heading levels when moving down the document
structure (e.g., from an h2 to an h4). Going from an h2 to an h1 is
not skipping a heading level. It's equivalent to going from an h3 to
an h2 later in the document. Both are perfectly acceptable. If this is
wrong, the WebAIM site has been wrong for over a decade and nobody's
every complained about it.
There are some who will advocate that the document must start with an
h1, but there is nothing in HTML or any accessibility guidelines that
would suggest this (that I'm aware of).
Jared
From: Duff Johnson
Date: Mon, Mar 04 2013 9:05PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
I have questionsÂ…
On Mar 4, 2013, at 10:58 PM, Jared Smith wrote:
> On Mon, Mar 4, 2013 at 8:40 PM, Christian Biggins wrote:
>
>> 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.
>
> There's nothing wrong with having an h2 precede the h1.
Legal HTML, yes, but is it "best practice" for accessibility in HTML?
>> 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'
>
> Either (but not both) would be fine. You already have a form element,
> so it'll be cleaner to just add the search role to it.
>
>> rather than having a heading at all up there?
>
> Why not do both? This would provide easier page navigation for users
> that navigate by headings and those that navigate by landmarks.
Why should it be a heading at all? Isn't that question dependent on the context, and the nature of the page (volume of content, etc)? Is this good *generic* advice?
Duff.
From: Jared Smith
Date: Mon, Mar 04 2013 9:22PM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
On Mon, Mar 4, 2013 at 9:05 PM, Duff Johnson wrote:
> Legal HTML, yes, but is it "best practice" for accessibility in HTML?
I've yet to hear anything to the contrary. The only arguments I've
seen for requiring that a document begin with an h1 are due to
misunderstanding the requirements for heading structure.
>> Why not do both? This would provide easier page navigation for users
>> that navigate by headings and those that navigate by landmarks.
>
> Why should it be a heading at all? Isn't that question dependent on the context, and the nature of the page (volume of content, etc)? Is this good *generic* advice?
My recommendation was not generic, it was specific to Christian's
situation. He indicated that his search form already had a heading for
a title, thus my recommendation to keep the heading rather than turn
it into something else. I didn't suggest that search functionality
should always have a heading, though if it has a visual heading (as is
seemingly the case here), it should probably be marked up as a heading
regardless of whether it comes before an h1 or after.
Jared
From: Bo Nilsson
Date: Tue, Mar 05 2013 3:20AM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
Hi!
As a many years screen reader users, I would like to say something about the
use of headings.
The most superior way to quickly get to the main content is in my opinion
that there is placed the first heading of the page,preferably a H1. This is
now a widely established practice, although it is not explicitly set in the
guidelines. It has the advantage of not often need to examine the
methodology the side might use to get to the main content. Just press h or
1.
There are also the methods links and landmarks to reach the main content,
where landmarks would possibly come to compete with headings. I would prefer
the use of headings and landmarks in parallel to maximize efficiency.
I also wish to argue restrictivity with headlines outside of the main
content and limit them to what is really justified for the grand navigation,
for example, for some important menu. It can be accepted that sometimes have
a single heading before the main content when you press h or 1. Such
headlines may well be H1.
On the contrary, the landmarks would probably be avoided in the main
content, there gives headlines H2 and less adequate support. Landmarks
should probably be reserved for the grand navigation outside of the main
content.
I want to emphasize that I do not speak as an expert on guidelines or
design, but as a screen reader user.
Bo Nilsson
List Member in Sweden
----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, March 05, 2013 5:22 AM
Subject: Re: [WebAIM] Aria roles instead of headings?
> On Mon, Mar 4, 2013 at 9:05 PM, Duff Johnson wrote:
>
>> Legal HTML, yes, but is it "best practice" for accessibility in HTML?
>
> I've yet to hear anything to the contrary. The only arguments I've
> seen for requiring that a document begin with an h1 are due to
> misunderstanding the requirements for heading structure.
>
>>> Why not do both? This would provide easier page navigation for users
>>> that navigate by headings and those that navigate by landmarks.
>>
>> Why should it be a heading at all? Isn't that question dependent on the
>> context, and the nature of the page (volume of content, etc)? Is this
>> good *generic* advice?
>
> My recommendation was not generic, it was specific to Christian's
> situation. He indicated that his search form already had a heading for
> a title, thus my recommendation to keep the heading rather than turn
> it into something else. I didn't suggest that search functionality
> should always have a heading, though if it has a visual heading (as is
> seemingly the case here), it should probably be marked up as a heading
> regardless of whether it comes before an h1 or after.
>
> Jared
> > >
From: Don Mauck
Date: Wed, Mar 06 2013 9:17AM
Subject: Re: Aria roles instead of headings?
← Previous message | Next message →
I only disagree with the H1 heading, I think it should reflect the title of the page and that any main content could also start with an H1. As far as having a preference, I think that at the end of the day when landmarks are used correctly, they are different than headings and that the proper use of both will have great benefit.
From: Christian Biggins
Date: Wed, Mar 06 2013 4:55PM
Subject: Re: Aria roles instead of headings?
← Previous message | No next message
Thanks everybody for your opinions and information. I am going to try and work out a best-practise approach for our site building and structure.
Thanks again,
Christian
On 07/03/2013, at 3:17 AM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
I only disagree with the H1 heading, I think it should reflect the title of the page and that any main content could also start with an H1. As far as having a preference, I think that at the end of the day when landmarks are used correctly, they are different than headings and that the proper use of both will have great benefit.