Are you being selective enough with your CSS? Maybe too much? CSS Selectors are the basis of good CSS. Inappropriate Selector choice is one of the most common sources of problems I find when troubleshooting CSS. The best strategy I know of is to start simple, and build on it. Don't start with obscure Class names, start with the type selectors. How can you define a Class meant to apply to paragraphs, if you haven't defined paragraphs? Define the basic HTML your site is built from before you add anything else.

For the sake of this discussion, let's define some simple HTML.

<div id="header"><div id="logo"><img></div><h1>Site Name</h1></div>

<div id="navigation"><ul><li><a></a></li><ul><li><a></a></li><ul><li><a></a></li></ul</div>

<div id="content><h1>page title</h1><p>content</p><p><img>content</p>

<ul><li><a></a></li><ul><li><a></a></li>

</div>

Once you've defined the basics like h1, paragraph (p) , and lists (ul, li, ol, etc.), the next step is exceptions to those basics. This doesn't necessarily mean class tags yet, we can do better. Let's start with navigation. We've defined the basic unordered list CSS for the content section, but our navigation will also be a unordered list. While applying Class tags to the navigation lists would work, Descendant selectors are a better choice. If you use the styles "#navigation ul" and "navigation ul li" you can define you basic navigation list. Want another level? Use "#navigation ul ul". Using descendant CSS selectors allows you to use clean class-free HTML. Easy to write, easy to update.

Image selectors on the same HTML would be similar. Define the basic img style, then define exceptions. In this example "#logo img" or "#header #logo img" could be the exception.

You'll see a trend here. Keep it simple. Start with the basics, get a good foundation, then build on it. Maybe class selectors will be required, but they're not the place to start.

I just noticed at Dries Buytaert's site that New York State Senate is using Drupal. It's now a very stylish looking Drupal site. Its' visual style is quite nice, but what lurks below the surface?

• No skip links to bypass blocks of content for screen readers or keyboard-only users
• Links not clearly identified
• No hover or focus effects on links to assist in navigation and link identification
• No level one header (h1) on home page to identify the page
• Drop down navigation is useless for keyboard-only navigation. It leaves some content extremely difficult to reach, if not completely beyond reach.

Why the half measures? Making a site accessible is more work. Making a site this un-accessible takes an active effort. The default CSS property for a link is to have an outline. This site has a focus outline property of zero. It's turned off so that a link with focus is not visible. An active effort to remove one property that identified focus, without adding another in its place. The default link property has an underline text-decoration. This site uses links with no text-decoration. A property helpful for identifying links was actively removed without replacement. I'm happy to see a very good platform like Drupal being more widely used, and this site is a good place for it. Dynamic content, multiple RSS feeds, press releases and more. All features with which Drupal excels. Unfortunately this is a bad example of Drupal theming. A good layout, a good overall design, but no thought to accessibility. What could have been a beautiful site, unfinished.

I was asked by a friend to take a look at recovery.gov yesterday. To be honest, I was disappointed. While it is a pretty site, it isn't nearly as accessible as it should be.

Here's a few things that I see that should really be fixed.

1. Content is not organized using headings as it could be. That would improve the ability of screen readers to navigate.
2. Color contrast is low in a number of areas. Difficult for the partially sighted to read.
3. No default language is defined.
4. Form controls need to be associated with labels.
5. In-line images are used as bullets rather than controlling with CSS. This can be awkward for screenreaders
6. The very clever looking sliding timeline at the bottom of the page is not keyboard navigable, making it unaccessible to anyone using a traditional browser without a mouse. I do see that it's replaced with a table version if you have JavaScript disabled, which is a nice touch, but  that doesn't cover everyone.
7. Skip Links should be fixed to work in Internet Explorer, and made visible at least on focus. (added (4/22)

There are some other minor issues, but those six bullet points cover the important ones I see. There is an accessibility page, but unfortunately it's been mostly used to make a political statement.

The Obama Administration has a comprehensive agenda to empower individuals with disabilities in order to equalize opportunities for all Americans.

A wonderful goal, but that's not what accessibility pages are for. This is to explain accessibility functionality in general, and specifically for the site. There is a bit of that at the end, but not enough. This site should be a perfect example of accessibility. Don't say that you want to "empower individuals with disabilities", do it. Empower individuals with disabilities by giving them the means to access the information on your website. I see this site as a wonderful opportunity... missed.

More bad news from Microsoft. Despite the uproar caused when they originally suggested making developers opt in, to get standards compliance mode in Internet Explorer 8 (IE8) they've now quietly returned to this unwise strategy. So developers are now back where we were a year ago, before Microsoft backed away from this plan. It seems we're being reprimanded for not making all of our sites compatible with a browser that hasn't been officially released yet. Why didn't I fix my sites for IE8 Beta? Because I'd have had to fix them again for IE8 Beta 2. Why not for Beta 2? Because I'd have had to fix them for IE8 Release Candidate 1. You get the picture.  Microsoft has a history of making significant changes right before the official release of their products, so I'll be waiting until I see a finished version before I change anything. Here's a few choice quotes about the progress of Internet Explorer 8. IEBlog : Compatibility View Improvements to come in IE8

With IE8’s Beta 1 release, Microsoft demonstrated its commitment to interoperability by making the most standards-compliant default view for web pages IE’s default.

With IE8’s Beta 2 release, we introduced the Compatibility View button. This button enables savvy end-users to resolve compatibility problems they encounter with sites that rely on legacy IE behavior.

When users install Windows 7 Beta or the next IE8 update, they get a choice about opting-in to a list of sites that should be displayed in Compatibility View. Sites are on this list based on feedback from other IE8 customers: specifically, for what high-volume sites did other users click the Compatibility View button? This list updates automatically, and helps users who aren’t web-savvy have a better experience with web sites that aren’t yet IE8-ready.

I translate this progression of quote like this

1. We'll be standards compliant
2. We give you the choice of being standards compliant
3. We'll choose whether you're standards compliant or not for you

While they suggest that users will get to choose to opt out of this "compatibility list" on installation, how many users will select "review and modify each setting individually" on installation? I'd guess very few. This setting will theoretically also be in the preferences, but I'd be willing to bet few IE users will go looking for it there either. Microsoft says that they're taking this course of action because they became aware that:

"...large groups of people were having a less than great experience because they weren’t aware of the manual steps required to make certain sites work."

They were surprised that a new feature was not being properly used in a Beta product? Did it occur to them that fixing the problems with the Beta product would alleviate this issue? How about educating their users about their new feature? Apparently not. Why spend all this time and money to improve their product, and IE8 is a big improvement, if you're going to force it to replicate the behavior of its flawed predecessor?

Website's in general, and blogs in particular, are all about links. Sending people where you want, to content that they want. Are your links easy to find? How about if your site was viewed by someone colorblind or partially sighted?

Accessibility can be viewed as the "ability to access" the functionality, and possible benefit, of some system or entity. - Wikipedia

If your viewers can't find your links, can't navigate your site, can they benefit from your content? The problem I often see with links isn't with the main navigation, but with links in the content of a page. Too often I see content links that don't contrast enough with the main content to be easily identifiable. They blend in to content, and therefore are useless. A link unseen is a link unused. In this sentence, which words are links? It's a trick question actually, because every word is linked. I've used a bit of inline CSS to change the appearance of most of them. I've also suppressed the hover and focus psuedo-classes on some of the links. This means that they don't change when you mouse or tab over them. Not a helpful change if you're trying to find links, but one I've seen in use. The important part of links is that they are consistently identifiable. They need to be seen to be used. Links can have just about any effect applied to them you'd like. Choose from things like added color to bold, italic, underlined and overlined text. These can be done singly, or in any combination. For accessibility purposes, you should use at least two of them. One thing that accessibility guidelines agree on is that color should never be the sole method of passing on information. WCAG 1, WCAG 2 and Section 508 all have similar things to say on this subject. If color is your only identifier, it only takes a poor monitor to make them invisible. Use multiple signals to identify links and everyone will be better off. I'll go into the CSS of links in another post, but for now think on this. The design of your links is important. Color and style, underlined or not, background color or not, these are all can affect the flow of traffic through your site. How important is visitors finding your content to you? Thank you to Glenda Watson Hyatt for starting the discussion that lead to this post. Now I suggest reading her post on 3 Tips for Making Your Hyperlinks More Usable.

I've logged close to thirty hours in Internet Explorer (IE) 8 in the last few weeks doing browser testing. The more I use it, the more I think to myself "why would you use Internet Explorer?" There are other, better choices. Here's a quick roundup of what's out there to choose from. Internet Explorer: Each version gets better, I'll grant you that, but that's about all I'll grant you. Even the soon to be officially released IE8 isn't going to stand up to Firefox, Opera, or any of the others listed below. It's a step ahead for IE, but not a big step. Improved security, improved rendering, improved standards compliance... sounds good, doesn't it? Let's look at it another way. The last place runner in the race for the perfectly compliant browser has made huge gains on his competitors... but hasn't caught any of them. Internet Explorer 8 will remind you of Internet Explorer 7. In fact it looks just like it.  As with other Microsoft programs, you have no choice of themes. It does have a few add-ons for functionality, most notably the web developer toolbar which has now been built into IE8. It is supported on the Windows operating system (OS) only. It does not support mouse gestures, a method of executing common commands (like page forward/backward, close tab, new tab) by moving the mouse the current web page, without using the toolbar or keyboard. Firefox: It has good web standards compliance and quick loading times. It's highly adaptable. I see just over 6,000 add-ons available on their site, and about 600 themes. Some of these would be for older versions, but it's till a high level of support for changing function and appearance to suit the user. It is supported on Windows, Mac and Linux operating systems. Several add-ons are available which add mouse gesture functionality. Opera: This may be the hidden gem of the browser world. It's highly web standards compliant, quite fast, and comes with a lot of the features people add to Firefox built in. Mouse gestures, bookmark synchronization, RSS feed previews, and speed dial are all standard. It even allows for custom theming to change the appearance to suite you. It is supported on Windows, Mac, Linux, Solaris, and FreeBSD operating systems. Flock: Like social media like Flickr, MySpace, and Twitter? Flock has the benefits of the base installation of Firefox, with all the social media functions you'll need. It's based on their Firefox browser, but with social media in mind. Set it up and it will keep you connected to all of your social sites.  It has themes and add-ons available, but comes standard with a blog editor, photo upload functionality, feed reader, media bar and more. It currently doesn't support mouse gestures, even with an add-on, but it's a relatively new browser and I expect that to come allow later. Chrome: Produced by Google, Chrome is one of the fastest browsers you could choose. Along with good web standards compliance, that makes it a nice choice for the everyday Internet user. While it might not have the add-on base that Firefox does, it has everything the average user needs in a nice presentation. While it doesn't have theme capability, it actually doesn't really need it. Made in a very minimalist style, very little of the browsers is actually visible. What you see is the web page you want. Personally, I really like the ability to turn a tab into a solo page by just dragging it off the page. A very clever option. Currently only available on the Windows OS. Safari: Originally for the Mac, Safari is now available for Windows as well. With the good standards compliance in both versions, this browser advertises itself as the "fastest browser on any platform". While you could argue that other browsers have now surpassed it, you can't argue that it is very fast. While it doesn't come with much in the way of appearance customization, its clean appearance goes along way toward making up for that. While it isn't my favorite choice, it surpasses IE on just about every way measurable. That's not the whole list. There are other choices available. Take a look and I'm sure you'll find a browser with the features you want. Whether it's minimalist styling, hundreds or thousands of add-ons and themes, extremely fast loading, or all of the social media functionality you could want, there is a browser out there that has it. Give them a try, you'll find the one you that's right. Maybe you'll find more than one.

IE PNG Fix - TwinHelix

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires only one line in your CSS file, and no changes to your website HTML. <img alt="" /> tags and background images are both supported.

A beautiful addition to any site you want IE6 compliant. I'm fond of PNG files with transparency myself, this makes viewing a site using PNG transparency possible for IE6. Update: I installed it on this site, and it's working. IE6 doesn't display my scrollwork quite right, but the transparency is working. SInce I didn't install the version that allows for a repeat, it just isn't repeating the images on the left side or top scrolls. On my personal site, I can live with that.

Unlike many others, our recommended method of implementing skip links ensures that all keyboard users ’see’ the skip link, as it appears visually on screen when a user tabs to it, and is of course read out by screen readers. The problem is this — although they find it, many web users simply do not understand what a skip link does, let alone how to use one.

I've used skip links on all my sites for quite some time, but a while back I made a change. The change was in using longer link text. Taking a page from Accessibility Field Notes, I realized that there is really no down-side to longer link text. Rather than the simple "skip" or "skip-link", I now favor "Skip to Main Content - press enter to activate". If you're not using the skip links, the length of the text doesn't matter, you don't see it. If you are using it, it helps, or you don't read it anyway. Win-win. What are skip links? Skip links are links, often hidden, that allow the viewer of a website to skip blocks of content. Why? It's an accessibility feature. Viewers using screen-readers, increased font sizes, no CSS, or a variety of other methods can have difficulty navigating web pages because of the complexity of modern web sites. Websites viewed using accessibility features are often made linear. So if a viewer wants to read the content of your page, they have to read everything that comes first, first. Thinks that's not much? Try reading your site.

1. Start with the header,
2. Then read the sidebar all the way to the bottom.
3. Now, if you're lucky, you found the content you were looking for.

What if it's the wrong page? What if the story it has a second page?

1. Start with the header,
2. Then read the sidebar all the way to the bottom.
3. Now, if you're lucky, you found the content you were looking for.

Third page? You see where this is going? Skip links let you "skip" over blocks of content like the sidebar. They eliminate the need to view irelevent and/or repetitive content you aren't interested in. Go to the page you want, and "skip" to the content you want. A simple solution to an annoying problem.

Test-Driven CSS (sorta) at zahnster

When starting this task, I knew that we'd have to come up with an at-a-glance method for our developers to take the newly re-factored CSS and run with it.

This is an idea that I use. I have a file I call the style guide for each of my sites. It contains every CSS style I have coded of the site. The page tends to be long. Variations on ordered lists and unordered lists, definition lists, headers, paragraphs, buttons, and blockquotes. The ideas is twofold. One is to make sure that everything is working and not conflicting in some unexpected way. The other is to leave myself, or any designer who picks up the project, a way to see what currently exists and how to use it. It's not the perfect solution to CSS bloat, but it really helps limit it. If you know what's already in the CSS, you're much less likely to reinvent it when need to add something.