A months or so ago we launched a new SPH homepage. It is much cleaner, more flexible and more compliant with web standards. But there is one problem. The design does not contain places for level-two heading for each section of the page. Only the “In the News” section contains an actual heading.
This is a problem semantically, as well as for the accessibility of the page. When we look at the page, we know that the social media icons all grouped together form a section of the page. We can tell that because the icons all look similar and are placed together. But someone who cannot see our page, but instead has it read aloud to them, would have no way of knowing that. They would just suddenly hear “Link to http://www.facebook.com/pages/Ann-Arbor-MI/University-of-Michigan-School-of-Public-Health/13345778541?ref=mf title Find UM SPH on Facebook.” While this may not seem like such a bad thing, it goes against the whole idea of pages needing to be machine-readable in addition to being well-designed aesthetically.
To resolve this I placed the missing headings in the code (Navigation, SPH feature, SPH in Social Media, and Hot Topics) and used CSS to hide their display. I’ve tried this before and had the same thing happen: someone calls me or emails me to say they see the headings on the page and it “looks funny.”
I used the following CSS to hide these headings:
visibility:hidden;
display:none;
position:absolute;
top:-900px;
left:-900px;
One would think that this would work, but it didn’t. The headings weren’t visible to me in any browser, but two important stake holders emailed me to say they could see them. So I ended up commenting them out. This is certainly far less than ideal. I am stumped.
