A quick CSS3 sibling test with the video tag

I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup

<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS

section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

Class Equals Screen Reader Info

I’ve been using a little CSS trickery to hide content and data from the average user. I hate to mention it too often as it can open pandora’s box. There was a recent thread on the Microformat’s discussion list about this very topic. The gist of many programmers is that data worth sharing is data worth displaying.

However, there are times when your UED provides a design that lacks visual hooks for your screen reader users. A good example may be the ever-popular search form. Most sites will have an input and a button that says “search”. The label for this input is nowhere to be found.

The average sighted user can figure out such a simple form but the screen reader needs a bit more help. Here’s a sound clip of a screen reader trying to use the search form on Yahoo! Kids (.mp3). This was further complicated by the missing alt attribute on the image-based submit button.

I’ve also had to work with table based forms that need some assistance. The table is marked up with appropriate table headers and scopes, but the individual inputs lack labels due to the UED.

The simple solution

There are many ways to hide content via CSS. You want to avoid visibility:hidden and display:none. These will also hide it from the screen reader. You could use text-indent:-1000 em. I prefer using position:absolute; top:0; left:-1000em;. This hides the label by pushing it off screen yet the screen reader is still able to use it.

Updated CSS (updated 4/24/2008)

Adding a top position to your hidden may cause the page to jump when the item is focused. Only use a negative left position and leave the top position out of the equation.

Samples

Let’s look at the complicated table with hidden inputs. The table is properly coded with summary and scope. However, the table would still be difficult for a screen reader without form labels.

Here’s a sample of the HTML code:


Here’s the CSS for the labels


.srinfo {position:absolute; top:0; left:-1000em;}

Extending the hidden screen reader concept

I’ve written earlier about how Yahoo! Tech used a hidden collection of links to replicate an inaccessible flash movie. In a nutshell: screen readers cannot see a flash movie that has wmode:transparent. To get around this, we duplicated the flash content and moved it off-screen for screen readers and search engines.

You could also use this technique for providing information specific to screen reader users, such as:

Please note, this page uses JavaScript to continually update stock information. Look for the link: "disable stock updates" to turn this feature off

Hold the Presses, this isn’t perfect!

You can’t just throw anything off screen for the screen readers. The earlier Yahoo Tech example took about made 6 links invisible yet they were still accessible to keyboard users. So, remember, when you use the srinfo class to hide content for screen readers, keep in mind the impact on keyboard users.

Make Flash accessible to screen readers in transparent window mode

The detour around flash for accessibility

Yahoo! Tech’s home page features a flash-based media space that highlights stories, comparisons, buying guides, blog posts, and more. Making this accessible required a bit of trial and error, but the solution was simple and can be used by sites everywhere.

Step 1. Inserting the flash object

The site uses the Unobtrusive Flash Object script by Bobby van der Sluis. This script checks to see if the user has JavaScript enabled and the correct version of Flash in their browser. If so, it inserts the code required to display the movie. If the user doesn’t have the requirements, a default set of information is presented.

This script cures the validation errors caused by the normal flash insertion code. Theoretically, it would also allow you to provide good, accessible content to those not using JavaScript and Flash enabled browsers, i.e. screen readers and search robots.

Window Mode Transparency conflict

However, we had an issue with the flash movie conflicting with a DHTML drop down menu. The flash movie wanted to have the highest z-index and thus sat on top of the menu. To cure this problem, we added the attribute wmode:transparent. This tells the flash movie: your window mode is transparent, you are not the boss, go sit in the back and let others take center stage.

This cured the overlapping issues but negated the accessibility features that we had hoped for. User testing with a screen reader was disheartening. Screen readers ignore flash movies with window mode transparent. They want to do what’s best for the user and ignore the little guy in the back corner.

We began searching for answers on the flash and accessibility forums and couldn’t find a way to get screen readers to read a flash movie with wmode:transparent. It simply isn’t possible at this time.

Step 2. Time for a detour

The U.F.O. enabled page features a div with default text. This is where we originally duplicated the content being fed via xml to the flash movie. Our hope was that the screen readers would ignore the flash and read the HTML content in this div. When this wasn’t possible, we literally thought outside the box.

The U.F.O. script uses visibility:hidden to hide the default box. We tried using text-indent and negative margins instead, but it still was not available to the screen reader.

The default div now has your standard non-optimized warning text: “For the best experience, please enable JavasScript and download the latest version of Flash….

screen with css disabled - both versions viewable
We then created a new div (id=”alternatecontent”) that features the content from the flash movie. It is pushed off screen by using absolute positioning. This hides the duplicated content from the visual design while providing the content to those without the visual abilities.

We’re satisfying two audiences with just a little extra code. Add the extra div for your screen reader audience (…and search engines!) when using wmode:transparent in your Flash movie. You’ll create valid, visually dynamic, and accessible pages.

Listen to the Yahoo! Tech media space as read by a screen reader (.mp3)

Background image for visited links

Visited and unvisited screenshots on designmeltdown.com
I’ve been a recent convert to Design Meltdown. The site disects a visual theme and gives examples on how to use them and where they are being used. While exploring the latest post about sketches for the web, I noticed an interesting approach to the visited pages.

The Breakdown

The site has a series of floated divs to display the screenshots. The screenshot is applied as the background image of the div with an inline style. Inside the div is a link that is given display:block and a transparent background image.

Great idea – room for improvement?

While I think the visual design for these screenshots is well thought-out. I don’t like the underlying code. The screenshots are content; miniature representations of other sites. Adding them to the CSS is treating them as decorative elements. The text for each link is: “SCREENSHOT, ” making the page unusable with the styles disabled. To give this page more structure and semantic strength, I would modify the underlying code as such:

HTML Code

CSS Code


.screenshotlist {float:left; list-style-type:none;}
.screenshotlist li {float:left; margin:9px; }
.screenshotlist a {display:block; width:146px; height:130px; position:relative; }
.screenshotlist a strong {text-indent:-1000em; z-index:20; position: absolute; top:0; left:0; width:100%; height:100%; background:url(screenshot.png) no-repeat -154px 0; }
.screenshotlist a:visited strong {background-position:0 0;}
.screenshotlist a img {margin:5px 0 0 5px; border:none; z-index:1;}

Benefits of the new code

screenshot mask
The screenshots now have some structure; an unordered list with links full of good, crunchy content. Screenreaders and those without CSS will have access to the information. Javascript can be used to target links within the screenshotthumb div to open a new window without the need of inline scripting.

Cavaets: I haven’t tested this code yet. It’s very possible the z-index styles are not required. As an alternative, remove the margin on the image and replace it with a border. Add a rule to change the border color on hover and visited.

Design Meltdown is a great site for learning about design concepts. I’ve gleaned a number of nice ideas from them and would love to say I gave a bit of help back to them.

Hacking to fix for IE7

I’ve played around with IE7 for a while, but haven’t really started debugging with it until now. Fortunately, I’ve already set up the site to use conditional comments and deliver an IE6.css file and a separate IE7.css file. This has made it much easier to target the offending areas of the site.

IE7 has had a couple surprising problems for me. I have a topnav section that completely disappeared. The container div only has position:relative and inside are a number of floated elements. This actuall works great in all browsers… but IE7! No hacks for IE6, but hack for IE7! I went with the old adage, I think from Andy Budd, when all else fails float, if it’s already floated, unfloat. I added float:left to the container div and the topnav re-appeared from the IE7 void.

Munged Background Images

I’m using a series of positioning, text-indent, and background images on the site. Here’s a simplified version:


.targetdl dd {position:relative;}
.targetdl dd span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}
.happy0 span {background:url(/images/happy0.png) no-repeat 0 -650px;}

IE7 shows the background image ok on some pages and on other pages, it shrinks the background image. I tried adding zoom:1 and font-size:100% to no avail. I’ll try line-height next. This is an odd bug, but not the first time I noticed it on IE7 betas. It certainly seems to be buggy with positioning.

De-bugging Strategy

Since I’ve already got a fairly solid ie6.css file, I’m going to use that as the basis of my IE7 CSS construction. After fixing the topnav, the rest of the ie6.css file is going into the IE7 css and rules will be removed one at a time. This should help me figure out what is still needed.

I’ll keep notes on this site as I find it a convenient place to remember them. Has anyone else come across some positioning bugs in IE7? Sorry, no screen shots or details at this time, we’re still pre-alpha stage.