E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Document structure in aggregated content

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

From: Robert Fentress
Date: Wed, May 24 2017 9:24AM
Subject: Document structure in aggregated content
No previous message | Next message →

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>

From: Robert Fentress
Date: Wed, May 24 2017 11:17AM
Subject: Re: Document structure in aggregated content
← Previous message | Next message →

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 ADDRESS 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>

From: Robert Fentress
Date: Thu, May 25 2017 8:01AM
Subject: Re: Document structure in aggregated content
← Previous message | No next message

Continuing the ongoing conversation with myself. . .

I think I've decided to normalize the headings in PHP using
HtmlHeadingNormalizer <https://github.com/vikpe/php-html-heading-normalizer>.
Normalizing it in JavaScript could result in weirdness if the document
outline algorithm is ever implemented. This does mean I have to put in a
sort of placeholder H2 in some instances, because of the particular
constraints I'm operating under, but I *think* something like this is the
best way forward. So for any Wordpress theme developers, that would be
something like the following.

function normalize_content( $content ) {

// Check if we're inside the main loop in a single post page.
if ( !( is_single() && in_the_loop() && is_main_query() ) ) {
return @HtmlHeadingNormalizer::demote($content, 1);
}

return $content;
}
add_filter( 'the_content', __NAMESPACE__ . '\normalize_content' );

On Wed, May 24, 2017 at 1:17 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS 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>
>

--
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>