WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Links as headings

for

Number of posts in this thread: 8 (In chronological order)

From: Weissenberger, Todd M
Date: Wed, Sep 17 2014 9:46AM
Subject: Links as headings
No previous message | Next message →

Some of our partners are using heading levels on certain groups of links. It might look like:

<h4>Links</h4>
<h5><a href="">Link</h5>
<h5><a href="">Link</h5>
<h5><a href="">Link</h5>
<h5><a href="">Link</h5>

Any comment on this practice?

T.M. Weissenberger
Web Accessibility Coordinator
University of Iowa
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
319-384-3323

From: Jukka K. Korpela
Date: Wed, Sep 17 2014 10:16AM
Subject: Re: Links as headings
← Previous message | Next message →

2014-09-17 18:46, Weissenberger, Todd M wrote:

> Some of our partners are using heading levels on certain groups of
> links. It might look like:
>
> <h4>Links</h4> <h5><a href="">Link</h5> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5> <h5><a href="">Link</h5>
>
> Any comment on this practice?

If that's actual markup, it's grossly invalid and won't work (missing
</a> tags, missing URLs).

If it's just sketchy and the point is simply that a list of links is
written with an h4 heading and with the links in h5 elements, then it
causes a completely wrong outline. The headings will appear as headings
for empty sections.

This does not matter much (if anything) in practice, but what matters is
that user agents will treat the h5 elements, and the user will be
mislead. For example, in headings reading mode, the links will be read,
but they not headings for anything.

I wonder what the excuse is. Let me guess... "SEO"?

Yucca

From: Olaf Drümmer
Date: Wed, Sep 17 2014 10:35AM
Subject: Re: Links as headings
← Previous message | Next message →

My rule of thumb for when to use headings and when not:

Would you include the piece of content at hand in a table of contents or not?

If not, then most probably it should not be tagged as a heading.


Jukka just pointed to one other important aspect: if there is no content 'underneath' it - how can it be a heading?


Olaf



On 17 Sep 2014, at 17:46, "Weissenberger, Todd M" < = EMAIL ADDRESS REMOVED = > wrote:

> Some of our partners are using heading levels on certain groups of links. It might look like:
>
> <h4>Links</h4>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
>
> Any comment on this practice?
>
> T.M. Weissenberger
> Web Accessibility Coordinator
> University of Iowa
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> 319-384-3323
>
> > >

From: Sailesh Panchang
Date: Thu, Sep 18 2014 7:40AM
Subject: Re: Links as headings
← Previous message | Next message →

Perhaps the markup should be:
<h4>Group-1 name</h4>
Followed by list of links in ul/li
then
<h4>Group-2 name</h4>
Followed by list of links in ul/li
and so forth.

I do come across links marked up as headings like the h5 ones in your
example sometimes and there is associated functionality like the links
really expand / collapse and the expanded content is displayed below
the link. When expanded the h5 does work like a section heading but
the problem is that the expand/collapse state is not conveyed merely
by the h5. So that's not correct markup.
Best wishes,
Sailesh







On 9/17/14, Weissenberger, Todd M < = EMAIL ADDRESS REMOVED = > wrote:
> Some of our partners are using heading levels on certain groups of links.
> It might look like:
>
> <h4>Links</h4>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
>
> Any comment on this practice?
>
> T.M. Weissenberger
> Web Accessibility Coordinator
> University of Iowa
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> 319-384-3323
>
> > > >

From: Rakesh P
Date: Fri, Sep 19 2014 11:36AM
Subject: Re: Links as headings
← Previous message | Next message →

In this example <h5> holds a link and if these links have expand
collapse functionality they can be headings, but I am little
uncomfortable when the links are collapsed.
When the links are collapsed having aria-expanded state is used
screen readers may read as follows.

heading level 5 link 1 collapsed.
heading level 5 link 2 collapsed.
code for this will be.
<h5><a href="link1.html" aria-expanded="false">link 1</a></h5>
<h5><a href="link2.html" aria-expanded="false">link 2</a></h5>
In this case I have two level five headings with no section content .
When the same links are expanded as code below, I am comfortable
having headings.
<h5><a href="link1.html" aria-expanded="true">Link 1</a></h5>
<p>some content or links</p>
<h5><a href="link2.html" aria-expanded="true">Link 2</a></h5>
<p>Some content or links</p>
Any thoughts on this.

Thanks & Regards
Rakesh


On 9/17/14, Weissenberger, Todd M < = EMAIL ADDRESS REMOVED = > wrote:
> Some of our partners are using heading levels on certain groups of links.
> It might look like:
>
> <h4>Links</h4>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
> <h5><a href="">Link</h5>
>
> Any comment on this practice?
>
> T.M. Weissenberger
> Web Accessibility Coordinator
> University of Iowa
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> 319-384-3323
>
> > > >

From: Sailesh Panchang
Date: Fri, Sep 19 2014 11:51AM
Subject: Re: Links as headings
← Previous message | Next message →

Hi Rakesh,
That's why I said that's not correct markup. And as a user, when I see
aset of links one after the other marked up as h4 etc. I suspect
there's more to it and guess that they may be expandable!
It is right to use aria-expanded (along with a visual cue to convey
state) but if the links make up a group, they should merely be marked
up as a llist with no headings.
The expanded content may have a separate heading using h<n> and be
within a region.
Sailesh
On 9/19/14, Rakesh P < = EMAIL ADDRESS REMOVED = > wrote:
> In this example <h5> holds a link and if these links have expand
> collapse functionality they can be headings, but I am little
> uncomfortable when the links are collapsed.
> When the links are collapsed having aria-expanded state is used
> screen readers may read as follows.
>
> heading level 5 link 1 collapsed.
> heading level 5 link 2 collapsed.
> code for this will be.
> <h5><a href="link1.html" aria-expanded="false">link 1</a></h5>
> <h5><a href="link2.html" aria-expanded="false">link 2</a></h5>
> In this case I have two level five headings with no section content .
> When the same links are expanded as code below, I am comfortable
> having headings.
> <h5><a href="link1.html" aria-expanded="true">Link 1</a></h5>
> <p>some content or links</p>
> <h5><a href="link2.html" aria-expanded="true">Link 2</a></h5>
> <p>Some content or links</p>
> Any thoughts on this.
>
> Thanks & Regards
> Rakesh
>
>
> On 9/17/14, Weissenberger, Todd M < = EMAIL ADDRESS REMOVED = > wrote:
>> Some of our partners are using heading levels on certain groups of links.
>> It might look like:
>>
>> <h4>Links</h4>
>> <h5><a href="">Link</h5>
>> <h5><a href="">Link</h5>
>> <h5><a href="">Link</h5>
>> <h5><a href="">Link</h5>
>>
>> Any comment on this practice?
>>
>> T.M. Weissenberger
>> Web Accessibility Coordinator
>> University of Iowa
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> 319-384-3323
>>
>> >> >> >>
> > > >

From: Rakesh P
Date: Fri, Sep 19 2014 12:00PM
Subject: Re: Links as headings
← Previous message | Next message →

Exactly Sailesh. I second.


On 9/19/14, Sailesh Panchang < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Rakesh,
> That's why I said that's not correct markup. And as a user, when I see
> aset of links one after the other marked up as h4 etc. I suspect
> there's more to it and guess that they may be expandable!
> It is right to use aria-expanded (along with a visual cue to convey
> state) but if the links make up a group, they should merely be marked
> up as a llist with no headings.
> The expanded content may have a separate heading using h<n> and be
> within a region.
> Sailesh
> On 9/19/14, Rakesh P < = EMAIL ADDRESS REMOVED = > wrote:
>> In this example <h5> holds a link and if these links have expand
>> collapse functionality they can be headings, but I am little
>> uncomfortable when the links are collapsed.
>> When the links are collapsed having aria-expanded state is used
>> screen readers may read as follows.
>>
>> heading level 5 link 1 collapsed.
>> heading level 5 link 2 collapsed.
>> code for this will be.
>> <h5><a href="link1.html" aria-expanded="false">link 1</a></h5>
>> <h5><a href="link2.html" aria-expanded="false">link 2</a></h5>
>> In this case I have two level five headings with no section content .
>> When the same links are expanded as code below, I am comfortable
>> having headings.
>> <h5><a href="link1.html" aria-expanded="true">Link 1</a></h5>
>> <p>some content or links</p>
>> <h5><a href="link2.html" aria-expanded="true">Link 2</a></h5>
>> <p>Some content or links</p>
>> Any thoughts on this.
>>
>> Thanks & Regards
>> Rakesh
>>
>>
>> On 9/17/14, Weissenberger, Todd M < = EMAIL ADDRESS REMOVED = > wrote:
>>> Some of our partners are using heading levels on certain groups of
>>> links.
>>> It might look like:
>>>
>>> <h4>Links</h4>
>>> <h5><a href="">Link</h5>
>>> <h5><a href="">Link</h5>
>>> <h5><a href="">Link</h5>
>>> <h5><a href="">Link</h5>
>>>
>>> Any comment on this practice?
>>>
>>> T.M. Weissenberger
>>> Web Accessibility Coordinator
>>> University of Iowa
>>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>> 319-384-3323
>>>
>>> >>> >>> >>>
>> >> >> >>
> > > >

From: Hans Hillen
Date: Fri, Sep 19 2014 5:00PM
Subject: Re: Links as headings
← Previous message | No next message

Agreeing with others. Headings should head content, these ones don't (there
was no mention of them being expandable) and should be marked up as a list.

On Sat, Sep 20, 2014 at 6:00 AM, Rakesh P < = EMAIL ADDRESS REMOVED = > wrote:

> Exactly Sailesh. I second.
>
>
> On 9/19/14, Sailesh Panchang < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi Rakesh,
> > That's why I said that's not correct markup. And as a user, when I see
> > aset of links one after the other marked up as h4 etc. I suspect
> > there's more to it and guess that they may be expandable!
> > It is right to use aria-expanded (along with a visual cue to convey
> > state) but if the links make up a group, they should merely be marked
> > up as a llist with no headings.
> > The expanded content may have a separate heading using h<n> and be
> > within a region.
> > Sailesh
> > On 9/19/14, Rakesh P < = EMAIL ADDRESS REMOVED = > wrote:
> >> In this example <h5> holds a link and if these links have expand
> >> collapse functionality they can be headings, but I am little
> >> uncomfortable when the links are collapsed.
> >> When the links are collapsed having aria-expanded state is used
> >> screen readers may read as follows.
> >>
> >> heading level 5 link 1 collapsed.
> >> heading level 5 link 2 collapsed.
> >> code for this will be.
> >> <h5><a href="link1.html" aria-expanded="false">link 1</a></h5>
> >> <h5><a href="link2.html" aria-expanded="false">link 2</a></h5>
> >> In this case I have two level five headings with no section content .
> >> When the same links are expanded as code below, I am comfortable
> >> having headings.
> >> <h5><a href="link1.html" aria-expanded="true">Link 1</a></h5>
> >> <p>some content or links</p>
> >> <h5><a href="link2.html" aria-expanded="true">Link 2</a></h5>
> >> <p>Some content or links</p>
> >> Any thoughts on this.
> >>
> >> Thanks & Regards
> >> Rakesh
> >>
> >>
> >> On 9/17/14, Weissenberger, Todd M < = EMAIL ADDRESS REMOVED = > wrote:
> >>> Some of our partners are using heading levels on certain groups of
> >>> links.
> >>> It might look like:
> >>>
> >>> <h4>Links</h4>
> >>> <h5><a href="">Link</h5>
> >>> <h5><a href="">Link</h5>
> >>> <h5><a href="">Link</h5>
> >>> <h5><a href="">Link</h5>
> >>>
> >>> Any comment on this practice?
> >>>
> >>> T.M. Weissenberger
> >>> Web Accessibility Coordinator
> >>> University of Iowa
> >>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >>> 319-384-3323
> >>>
> >>> > >>> > >>> > >>>
> >> > >> > >> > >>
> > > > > > > >
> > > >