WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Document structure in aggregated content

for

From: Robert Fentress
Date: May 24, 2017 11:17AM

As another option, one could use ARIA to redefine the heading level using
aria-level. I have tested this out with VoiceOver on macOS Sierra and on
JAWS 16 and 17 and NVDA 2017.1 with IE 11 and FF 53. Seems to work with
some caveats.

1. You have to explicitly set role="heading", else it won't work with
JAWS.
2. Neither JAWS 16 nor 17 recognize heading levels deeper than 6, so if
you try to redefine an H6 as H7, it is reported as H6. Trying to redefine
H2 to H7 causes JAWS to report it as H2.

So, I wonder if a polyfill that implemented the document outline model
correctly using ARIA would work. Currently investigating to see if anyone
has done this. Anybody downsides you can think of to this approach, aside
from the H6 limit on JAWS? Haven't tested on mobile yet.

On Wed, May 24, 2017 at 11:24 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

> Hello, all.
>
> I'm designing an accessible WordPress theme and wondered if anyone had
> advice about how to handle the display of the same post in different
> contexts, in terms of page structure, particularly headings. For instance,
> when a post is displayed on a single page, the heading structure of that
> document might be.
>
> - H1 Title for Post 1
> - H2 Sub Heading for Post 1
> - H3 Sub-sub Heading for Post 1
>
>
> This is all well and good, but what happens when you display the same
> content on an index page that aggregates a number of these posts? For
> instance:
>
> - H1 Category Page Title
> - H2 Title for Post 1
> - H2 Sub Heading for Post 1
> - H3 Sub-sub Heading for Post 1
> - H2 Title for Post 2
> - H2 Sub Heading for Post 2
> - H3 Sub-sub Heading for Post 2
>
> Now the relationship between the post heading and its subheading is no
> longer correct. It is not a problem to change the level of the post title,
> since that is not a part of the content proper. However, it seems less
> than ideal if I try to muck about with rewriting the heading levels for
> different contexts.
>
> For one thing, if I wanted to fix this by rewriting the headings so they
> are one level deeper in the hierarchy when displayed on the index page (H2
> becomes H3, and so forth), then what happens when the original content
> creator had an H6 level heading in their document? HTML5 doesn't support
> H7, so what then? And, of course, it seems quite hackish generally.
>
> The most obvious solution would be to use sectioning elements, like
> <article>, to reset the hierarchy, but according to Steve Faulkner
> <https://www.paciellogroup.com/blog/2013/10/html5-document-outline/> (at
> least as of 2014), no user agents support the HTML5 outline algorithm.
>
> I even thought of just only allowing headings 3 through 6 for post
> content. Then, on the single page display, I would insert a sort of
> placeholder H2 tag, so it wouldn't skip a heading level. That would look
> like this:
>
> - H1 Title for Post 1
> - H2 Post
> - H3 Sub Heading for Post 1
> - H4 Sub-sub Heading for Post 1
>
> But this seems wrong too, since it only leaves 3 heading levels for the
> content creator to work with. And the extra added heading isn't really
> doing much of anything.
>
> It is actually even more complicated than this because of some other
> constraints I am working under, but if I can get some traction with this
> particular scenario, it will be helpful. Ideas?
>
> Best,
> Rob
>
> --
> Rob Fentress
> Senior Accessibility Solutions Designer
> Assistive Technologies at Virginia Tech
> Electronic Business Card (vCard)
> <http://search.vt.edu/search/person.vcf?person54847>
> LinkedIn Profile
> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
>



--
Rob Fentress
Senior Accessibility Solutions Designer
Assistive Technologies at Virginia Tech
Electronic Business Card (vCard)
<http://search.vt.edu/search/person.vcf?person54847>
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>