WebAIM - Web Accessibility In Mind

E-mail List Archives

accessible position of sidebox


From: Angela French
Date: Sep 28, 2010 10:57AM


I'm got a problem with pages in my site that have a floating sidebox. They LOOK fine, but they are not accessible in terms of a semantic document outline. The problem is that the headings I have given my sidebox aren't correct in terms of their position in my document flow (the code). So my goal is to put in a semantically correct headline, but have the sidebar appear in the document flow in a correct location for the context of the content. For instance, on this page (http://checkoutacollege.com/GetStarted/HSCompletion.aspx ) I would like to make the sidebar heading an <h2>, keep it where it is positioned visually, but have it located in the document flow (the code) right after the "What About State Testing" section. This is where, if the user was using a screen reader, or had turned off CSS, I would want them to encounter the content.

(This issue is similar in nature to the problem with accessibility when using pull quotes - their position in the document flow may not be what is desired. )

If anyone could tell me some general principles about that sort of thing I'd appreciate it. Or refer me to some web sites. I did a Google search, but I don't think my search keywords were on track.

I tried moving the content in the source code to where I want it, then absolutely positioning the sidebar box up where I want it, but that just layered the text blocks. I'm hoping this won't require major restructuring of the page layout, but I'm afraid it might. I do want to keep the main content "reaching" under the sidebar box.

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges