WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Document structure in aggregated content

for

From: Robert Fentress
Date: May 25, 2017 8:01AM

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