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.

A friend recently asked me about the accessibility of a new US government website he'd seen. He knew I'd been following the various discussions about federal government accessibility. Like others I've looked at, IT Dashboard doesn't do very well.

At first glance, you might think it was going to be accessible. Nice clean layout in a modern style... it should be accessible too, right? You might think that, but you'd be disappointed. Let's take it from the top.

• First thing I noticed while testing is that it seems to be forcing compatibility mode in Internet Explorer 8 (IE8) As of this posting it's not yet on the IE8 Compatibility View Blacklist
• Skip links: present, but invisible and don't work for me in Internet Explorer 8. (compatibility mode?)
• Text resizing: Nice clean text resizing links at the top of the page, but they don't seem to work in Internet Explorer or Firefox. I can see a refreshing of the screen, but I can't see any text changing.
• Page headings: Should have at least one H1 heading. It has none. The home page has one H2 heading.
• Default language: not defined
• Alternative text: Purely decorative images are given alt text, they should be put in the CSS.
• OnClick handler does not have focus-able element
• Color contrast: with a 4.5:1 ratio being a minimum value for AA rating this site has links with a 2.35:1 ratio. Unacceptable.
• Screen refreshing: There is no means that I can see to stop the screen from refreshing whenever the home page graphs reload. While this isn't particularly noticeable in normal browser viewing, my testing software resets about every thirty seconds. I have to think that accessibility software and add-ons would do the same.

While this is by no means a complete evaluation, it does show an alarming number of problems, some of them quite serious. My final problem with this site is the accessibility page. In my opinion this is the place where you explain how to use the accessibility features of a website. This is not the place to make political statements. This site's page begins with:

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

It's only in the eighth paragraph that actual web accessibility features are mentioned. These three sentences are two little, and they are seven paragraphs too late. This is as good a summation of my opinion of the site as I could write.

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.

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.

I was putting together a list of resources that I regularly use for someone, and I thought it might be helpful for someone else.

Firefox Resources

• Web Developer -  all purpose testing. Extremely helpful when checking CSS, but also good with images, forms, and other HTML elements.
• Firefox Accessibility Extension - evaluate accessibility on web sites and other HTML documents
• WAVE Toolbar - another good accessibility testing tool
• IE Tab - open IE within a Firefox tab
• LinkChecker - the name says it all
• MeasureIt - find dimensions of online content or space
• ColorZilla - find the exact color you're seeing in the browser.
• HTML Validator - a great validation tool for testing web pages.
• Fangs Screen Reader Emulator - emulates a screen reader for testing accessibility and other usability factors.
• Split Browser - open two pages in the same window.
• Live HTTP Headers - know what your page is loading, and from where
• FireShot - superb screenshot tool.
• Firebug
• Colour Contrast Analyser
• Other helpful, extensions
  • All-in-One Gestures - makes browsing easier.
  • Profile Manager and Synchronizer - open multiple Firefox profiles at the same time.
  • Sage RSS Reader - a very nice RSS reader
  • Scribefire - designed as a blogging tool, it's also helpful for just collecting links and content in clean HTML.
  • IE View - switch from Firefox to IE in a click. No need to find the page again in IE, just open your current Firefox page in IE.
  • FoxView -open your current IE page in Firefox
  • OperaView - open your current Firefox page in Opera
  • Chrome View - open your current Firefox page in Chrome
  • Safari View - open your current Firefox page in Safari

Resources for Internet Explorer

• Internet Explorer Developer Toolbar - Not as well organized as Firefox's, but good
• Web Accessibility Toolbar for IE

Resources for Opera

• Opera Browser - A resource all by itself. If you're not familiar with it, it's another high quality browser that's useful to test pages in.
• Web Accessibility Toolbar for Opera

I'm still using the CSS Menu Writer that I got to evaluate. I have to say it's very slick. I'm working on a WordPress site that I hope to reveal soon, and it came in very handy. I've worked on tabbed navigation with CSS before, but this was relatively painless. A few quick menu adjustments and it gave me a set of beautiful tabbed menus. Of course it's never quite that easy. I had to track down a bit of a z-index glitch in IE6 and 7, but that was hardly the fault of the people at WebAssist.  The menus performed perfectly in my base page in all browsers. It was only when I introduced some additional CSS of my own that I had an issue. Why can't Microsoft come up with a browser that works as well as the new Chrome by Google seems to? If you're looking for a Dreamweaver plugin that takes some of the work out of clean CSS menus, I'd suggest giving CSS Menu Writer a look. Even if you use it like I did, to quickly build a base menu that I further customized, it is an incredible time saver.

The nice people at WebAssist.com are letting me try out their new CSS Menu Writer extension for Dreamweaver. I got a demonstration of it yesterday, and I've been putting it though it's paces this morning. It is exactly what the title would suggest, a CSS menu writer. Working through four tabbed menus, you can easily create fairly complex, and valid CSS menus. I'm very impressed with it so far. The extension works well, and is quite intuitive. The two most significant aspects I see, are that it uses no proprietary coding as far as I can see, and that I can create my own preset templates. This means that any menu I create using this should be editable by anyone with a knowledge of CSS, and that I can adapt the software to my own design style. This has the potential to be a very significant time saver for me. I'll go into greater detail when I've had a few days to try it out.

IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. - CSS-Tricks

Chris Coyier at CSS Tricks has written a very nice piece on IE6 CSS bugs. Anyone who's dealt with these will appreciate this list. Anyone who's fought with them and didn't know what they were will appreciate them more.

A List Apart has a great article on How to Size Text in CSS

.

In this article, we will reconcile the designer's requirement for accuracy with the user's need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.

How can you ask for anything more than that?

Someone has posted an image of what HTML code should look like. Well done. h/t Photoshop, Illustrator, and Web Design Resources.