Attractive graphs 2
The progress bar pt. 2
Providing the user with feedback regarding what the interface is doing, the status, is often a requirement for accessibility and usability. If not, it is still strongly recommended by experts. A progress bar is therefore a useful feature when your interface gets to be busy sometimes and needs the user to wait.
Can you bring that up for me?
One of the most often heard gripes about accessibility is that it supposedly forces developers to build ugly websites. This is not true, but to get some of the pretty stuff clients and users want, we do need to change our thinking on some subjects. One of those is how we utilize visual effects and graphics. A common line of faulty thinking in accessibility land is to only think of sighted- and non-sighted users. There’s a whole range of visually impaired users who do have (some) sight, but with limitations. The WCAG addresses this, and promptly gets it wrong in my opinion, by more or less mandating large text while there’s a whole slew of visual impairments out there which actually make large text harder to read. But that’s a gripe for another day. In this tutorial we are going to take the progress bar we looked at previously, and bring it up for those users who may want or need a closer look. We are going to do this using the same :hover trick we used to hide, and bring back, our large images in ‘Get your images out of the way’. After this tutorial, hopefully, you can apply this technique to many elements on your site where it might be useful.
This tutorial picks up where ‘Attractive graphs part 1: A progress bar’ leaves off.
Accessibility made simple
Accessibility at times seems to be a serious ball-and-chain proposition for designers and developers alike. The very nature of the WCAG guidelines is one of restrictions and imperatives. Although I sometimes disagree with them, I do hold the WCAG guidelines to be authoritative. But reading through them they do read as if you should give up two-thirds of your toolbox. In this series of articles I intend to provide simple and pragmatic approaches to using most of your toolbox without sacrificing unreasonable levels of accessibility. Accessibility is not the goal of design; it is a tool to do better design. Some of my tricks do bend or even break the rules, as far as I am concerned this is quite OK, if you provide a reasonable alternative for those with limited access. Where appropriate I will also provide tips on how to do that.
Please note: If you are already aware of using relative values in CSS and :hover, please do take a peek at the part under ‘Dealing with the pretty pictures’ for some thoughts on how to deal with images and reducing flicker.
Non-sighted users
Non-sighted users are not helped by, for them often arcane and abstract, concepts as ‘a tall yellow bar’. But be wary of totally hiding information from non-sighted users. Be aware that non-sighted users may still share information with sighted users, so knowing information is there is usually a good thing.
The case
When a website presents a progress bar or graphs, these are usually presented using non-accessible techniques such as (static) images or Flash. Some statistics packages provide text alternatives using regular keyboard characters. While this eliminates some of the accessibility issues associated with graphics it isn’t necessarily helpful for non-sighted users. So we are stuck with providing an alternative, and since we are we might as well focus on improving the usability of graphs for the rest of the world.
The problem with images
- Non-sighted people can’t see them; many visually impaired people can’t see them well enough. Especially text in images is a major issue.
- Images are considerably larger in terms of kilobytes than plain text; this means they lengthen loading times considerably.
- Images can easily get in the way of the way the eye moves over text.
The advantages of visual representation
- Complex data can be presented ‘at a glance’, drastically improving usability for, for example, users with dyslexia or other issues relating to reading ability.
- A visual representation of highly transitory information, such as the progress of a download or running process can drastically improve the usefulness of such information.
Tutorial
We start out with the progress bar we made earlier, just to refresh your memory, here’s the code:
<div class="container">
<div class="full"> </div>
<div class="indicator" style="width: 30%;"><p>30%</p></div>
</div>
The CSS:
.container {position: absolute;
width: 200px;
height: 18px;
margin: 0;
padding: 0;
}
.full {
position: absolute;
left: 0;
top: 0;
border: dotted 1px gray;
background: url(progress-bar-bg1.jpg) no-repeat top right;
width: 100%;
height: 18px;
z-index: 10;
}
.indicator {
position: absolute;
left: 0;
top: 0;
border: solid 1px black;
background: white url(progress-bar-bg2.jpg) no-repeat top left;
margin: 0;
height: 18px;
z-index: 20;
}
.indicator > p {
font-family: "lucida sans", verdana, arial, sans-serif;
background: url(progress-bar-bg3.jpg) no-repeat top right;
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0;
}
And back to the dirty hack
I have received feedback that it would be better to use :focus for this trick, since many users navigate sites using keyboard controls. I agree; it should be better to use :focus but the problem is that up to version 7, Internet Explorer doesn’t actually support :focus (correctly).
JavaScript
It is actually pretty common to do these types of tricks using JavaScript, and I really do not mind JavaScript. The thing is; many users, especially ones using assistive technology, have JavaScript turned off; as a catchall measure to stop pop-ups and ads, for security reasons (banks, secure networks, and so on) or for a wide range of other reasons. For that reason I always strive to find pure HTML/CSS ways to do things, and then if I feel like it, I add JavaScript to add some extra functionality or eye candy.
So we return to the trusty old empty Anchor element.
We already have a container element, but it’s a DIV. We do not want to overdo our code, less is more, and so we change the container DIV to A.
The code:
<a class="container">
<div class="full"> </div>
<div class="indicator" style="width: 30%;"><p>30%</p></div>
</a>
Now we can make stuff happen when the progress bar is hovered over, or clicked. We are going to take advantage of the fact that with CSS you can define the dimensions of any object using relative values. We already did that when we set the width of our two DIV’s inside the container to 100% and 30% respectively. (The 30%, obviously, just for display purposes since this is a value that will change dynamically.) So, when we introduce a :hover rule to our container, which is now an anchor and therefore will honour it, and change it’s width to 400 pixels rather than the 200 pixels it was when we left it alone, we get:
The progress bar expands sideways
The CSS:
.container:hover {
position: absolute;
display: block;
width: 400px;
height: 18px;
margin: 0;
padding: 0;
}
This by itself doesn’t help much. We’ve expanded the progress bar sideways but not, as such, made it easier to read. So, we need to tinker with the height values as well.
The CSS:
.container {
position: absolute;
display: block;
width: 200px;
height: 18px;
margin: 0;
padding: 0;
}
.container:hover {
position: absolute;
display: block;
width: 400px;
height: 36px;
margin: 0;
padding: 0;
}
.full {
position: absolute;
left: 0;
top: 0;
border: dotted 1px gray;
background: url(progress-bar-bg1.jpg) no-repeat top right;
width: 100%;
height: 100%;
z-index: 10;
}
.indicator {
position: absolute;
left: 0;
top: 0;
border: solid 1px black;
background: white url(progress-bar-bg2.jpg) no-repeat top left;
margin: 0;
height: 100%;
z-index: 20;
}
.indicator > p {
font-family: "lucida sans", verdana, arial, sans-serif;
background: url(progress-bar-bg3.jpg) no-repeat top right;
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0;
}
This works, when we hover over our progress bar it neatly doubles in size both on the x and on the y-axis. (Or, horizontally and vertically.) We simply enlarge the container, and the elements inside we give relative (percentage) values for their size, and they expand to fill their new space. The one dissident in our little progress bar club is the image; Images have a size, and keep it.
Images do not scale
You could use HTML/CSS to scale images but the result is always ugly because the actual pixels that make up the image do not go away, or double themselves. They just get crunched up or spread out. I’m probably not telling you anything new, but you can never tell who reads these tutorial things.
Dealing with the pretty pictures
Actually, I am glad the images don’t play nice. I think, because I’m an optimist, that most people I’m aiming these tutorials at already know all of the above to some degree. Maybe I provided some inspiration to expand on the idea, or that final push to say goodbye to less accessible techniques. The following bit, however, really needs to be told, and told again.
Evidence of my own eyes, surfing the web, tells me that.
A List Apart has an excellent tutorial about it, for those who want to delve deeper into this matter: http://www.alistapart.com/articles/sprites
Images and flicker
Flicker looks bad, but can also in rare cases induce seizures with people who have certain types of epilepsy. Automatically reloading pages also become pretty much unusable for a wide range of users. Using hover effects with images, especially when not properly preloaded, can result in flicker as the :hover state image loads. Using some common sense, a bit of knowledge of how images work and the powerful positioning capabilities of CSS we can bypass this problem without even preloading.
I am going to use two slightly different approaches, a simple one and a slightly more involved one.
1: The background
The background is a relatively simple graphic with a shadow on the top and right most edge. In Photoshop it is a trivial matter to simply mirror it, and thus double it’s size. Doing this, we do not even need to do anything about our CSS. The superfluous half of the image will be hidden until we :hover. Because we use one image only for both states, it is in effect, automatically ‘preloaded’ and will not flicker.
The lower part of the image was hidden until we expanded
Obviously, I chose to forego some obvious Photoshop trickery with the shades to really make it look like a larger version of itself. It’s just an example and this is not a Photoshop tutorial.
2: The slider
For the GGS (Ghastly Green Slider) we have a bit of a conundrum. Simply enlarging the image would mean either doubling up the image, or cutting it in half when not hovered.
So we are going to need a true larger version of the background, and for those who were paying attention; it’s actually two background images.
So we put those in one image too, we simply combine the larger and the smaller version in one picture and use positioning to show the one or the other. Pretty simple, no?
Two versions, large and small, in one image
The code looks like this:
.container {
position: absolute;
display: block;
width: 200px;
height: 18px;
margin: 0;
padding: 0;
}
.container:hover {
position: absolute;
display: block;
width: 400px;
height: 36px;
margin: 0;
padding: 0;
}
.full {
position: absolute;
left: 0;
top: 0;
border: dotted 1px gray;
background: url(progress-bar-bg1.jpg) no-repeat top right;
width: 100%;
height: 100%;
z-index: 10;
}
.indicator {
position: absolute;
left: 0;
top: 0;
order: solid 1px black;
background: white url(progress-bar-bg2.jpg) no-repeat top right;
margin: 0;
height: 100%;
z-index: 20;
}
.container:hover > .indicator {
position: absolute;
left: 0;
top: 0;
border: solid 1px black;
background: white url(progress-bar-bg2.jpg) no-repeat bottom right;
margin: 0;
height: 100%;
z-index: 20;
}
.indicator > p {
font-family: "lucida sans", verdana, arial, sans-serif;
background: url(progress-bar-bg3.jpg) no-repeat top right;
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0;
}
.container:hover > .indicator > p {
font-family: "lucida sans", verdana, arial, sans-serif;
background: url(progress-bar-bg3.jpg) no-repeat bottom right;
font-size: 28px;
line-height: 36px;
margin: 0;
padding: 0;
}
For another excellent tutorial on this technique, go here: http://wellstyled.com/css-nopreload-rollovers.html
A very important note
If you are going to be reloading your scrollbar to make it ‘move’ automatically, you are re-introducing flicker when the user hovers over the scrollbar when the page reloads, because it will start out in non-hovered state and therefore briefly ‘jump’. Using this particular trick therefore is only ‘safe’ with static progress bars such as you may use when a user is passing through a series of pages to complete at task. (Like a questionnaire.) PLEASE do not use it otherwise.
Also note that a great portion of users with limited sight already use screen magnification of some sort and you will be interfering with that, too. Use with caution, therefore.
Unsolved issues
I’m really only showing you a trick with a minimum of code, to keep things simple and readable. If you were to copy my code verbatim, you’d have to add quite a bit to make everything comply with standards and ‘bullet proof’. Basically it’s like this: I am not teaching HTML/CSS here. I’m showing proof-of-concept examples. If a user decides to enlarge text, for example, using FireFox’s ctrl-+ and Ctrl—functionality, my code / design will break. It’s up to you to decide if you can live with that. Make sure your text label has room to expand though, whatever you decide. In the end it’s about communicating something, not about forcing your design upon the user.
Happy web building!
No Comments yet.