WebAIM - Web Accessibility In Mind

E-mail List Archives

Document structure in aggregated content

for

From: Robert Fentress
Date: May 24, 2017 9:24AM

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>