WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Related content labelling and styling?

for

From: Rabab Gomaa
Date: May 16, 2012 4:11PM

Hello Rick,

The possible CSS solution would be coding the side div at the end with
<div style="position: absolute; top:10px; left: 650px; width: 250px">
and wrap the H1 and first paragraphs with a div <div
style="width:400px;"> (you can have this in a class so use can add it
whenever they choose to have the side div).

<div id="main_section" role="main">
<div id="center_column">
<div id="center_column_inner_wrap">
<div id="page_title">
<div class="page_block">
</div>
<div style="position: absolute; top:10px; left: 650px; width: 250px">
<!-- Code side div at the end-->
</div>
</div>

Hope this helps,
Rabab
>>> Rick Hill < <EMAIL REMOVED> > 5/16/2012 2:20 pm >>>
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