WebAIM - Web Accessibility In Mind

E-mail List Archives

Related content labelling and styling?

for

From: Rick Hill
Date: May 16, 2012 12:20PM

We have a feature in our CMS that allows users to add a spotlight box of related content to the right of the main content. This is not a right column (which we also allow) but a floated block of content. Visually this works well and the user base wants the feature. Unfortunately, there are accessibility issues as it is now implemented. First, in order to get the content div to float right, it must appear above the content it is related to in the HTML. Second, content block starts with a header 3. As a result, the resulting HTML markup ends up tagged incorrectly. The H3 ends up in the middle of the main content and all of the main content below is therefore associated with the h3.

The ideal would be to position the related content at the bottom of the associate main content and then position it at the top right of the main content. So visually it would look the same but the HTML reading order and header nesting would be correct. We cannot find and CSS solution that will do that. Anyone?

Assuming that is the case, is there a way to have this content appear above the main content that it is related to, but NOT apply a header yet label it in semantic fashion that indicates its relationship to the document? ARIA? <div role=complementary >

There are some limitations to what we can provide given this is a CMS system that services many sites. However, we have reasonable control of how the output is generated and would prefer to provide this feature yet make some reasonable concessions for accessibility.

A sample page using this spotlight feature is at http://cms.ucdavis.edu
–––––––––––––––––––––––––––––––––––––––
Rick Hill, Web CMS Administrator
University Communications, UC Davis