When I started blogging again in September after my three-month parental leave I wasn’t sure how often I’d find time to write a post. Looking back at the past few months I see that I have posted more frequently and more regularly than I had expected to. So just in case anyone has gotten used to me posting something two or three times a week, I thought I’d let you know that with Christmas coming up I will be taking the opportunity to stay away from work and blogging for the next three weeks. Merry Christmas and Happy New Year to those who celebrate them. I’ll be back in January 2009.Posted in Life.

A few weeks ago I posted Find nasty JavaScript with the Obtrusive JavaScript Checker, talking about Robert Nyman’s useful quality assurance tool. Well, Robert didn’t stop at finding inline events and JavaScript, so now he has extended the Obtrusive JavaScript Checker and created Inline Code Finder. Instead of just looking at JavaScript-related things, Inline Code Finder will find and highlight any elements that have inline events, inline styles, or javascript: links. Inline Code Finder is available as a standalone add-on for Firefox and as a Firebug plugin. Good stuff! For more details or to provide feedback, go to Robert’s post Inline Code Finder Firefox Extension - Find Inline JavaScript Events, Inline Styling And Javascript:links.Posted in (X)HTML, CSS, Coding, JavaScript.

As I stated in Make Safari open targeted links in new tabs instead of new windows I find links that open in new windows highly annoying. One reason that new windows can be so intrusive is that most browsers don’t make it obvious to the user that clicking a link is going to open a new window (or a new tab, depending on browser configuration). If it was really obvious before you click a link that it will open in a new window, at least you’d be prepared for it. Well, there is a rather simple way of achieving this by adding a few CSS rules to a user stylesheet. For some reason this never occurred to me until Jim Wilkinson mentioned it to me in an email response to the article about Safari that I just mentioned. Thanks Jim! Highlight links that open in a new window Based on Jim’s tip, here’s the CSS I use to highlight links that open in a new window: a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C"; } This will insert a box with a “heavy round-tipped rightwards arrow” before any links that have a target attribute with a value of _blank or new. 279C is the hexadecimal code for that character, taken from the Dingbats (PDF file) Unicode code chart. I specify the “Zapf Dingbats” font to make sure that the character is available. You may want to choose a different character and a different font, depending on what is available on your computer. Just change the content and font properties to whatever you prefer. Likewise if you think the style of the box is too intrusive, just change the colours to something you like. Highlight links to PDF and Word files Another common kind of obtrusive links open PDF or Word files without informing the user. To highlight such links I use the following: a[href$="pdf"]:after, a[href$="doc"]:after { margin:0 0 0 5px; font:bold 12px "Lucida Grande"; content: " (PDF)"; } a[href$=".doc"]:after {content: " (DOC)";} This will insert either (PDF) or (DOC) after links with an href attribute value that ends in pdf or doc. I insert this information after the link instead of before it since it’s fairly common for links to PDF and Word files to also open in a new window, and I want to be aware of both. Tell your browser to apply the stylesheet How you apply these rules to all sites you visit depends on which browser you use. Here’s how to do it in Safari: Create a file with the CSS rules you want to apply Open Safari’s preferences window from the “Safari” menu and activate the “Advanced” panel Choose “Other…” from the “Style sheet” menu Locate and choose the file you created in step 1 Close the preferences dialog If you don’t use Safari, consult your browser’s documentation or do a Google search for “user stylesheet x”, where “x” is the name of your browser. You may also find About.com’s User Style Sheets instructions useful. No more surprises when clicking links Applying these rules will of course affect the way many websites look, and may occasionally cause minor layout problems. Links that already alert the user that they will open in a new window or point to a non-HTML document will also be affected, so the information will be repeated. However, that is a small price that I am willing to pay to reveal obtrusive links before I click them.Posted in Accessibility, CSS, Usability.

Just over two years ago Verva (Swedish Administrative Development Agency) published the current version of the Swedish National Guidelines for Public Sector Websites. As I mentioned in Guidelines for Swedish public sector websites updated, I took part in creating those guidelines. Because of that I may be a bit biased, but I think they are still quite relevant. Nothing is perfect, of course – the guidelines are more than two years old so there are certainly areas that could be improved and updated. Having this set of guidelines to refer people to has definitely helped make plenty of Swedish public sector websites more accessible than they would have been if the guidelines had not existed. But now the future of these guidelines is uncertain. It was made public earlier this year that Verva will be closed down by the end of 2008, and that other government agencies would take over parts of Verva’s activities. Unfortunately there is still no information available on what will happen to the Swedish National Guidelines for Public Sector Websites. According to a newsletter (in Swedish) that was published on 8 December, Verva's website, including the guidelines, will be taken offline on 31 December. I think it is very unfortunate that there is no clear information available on what will happen to the guidelines after that. Without a national agency behind the guidelines there is a substantial risk that they will be regarded as less relevant and ignored to an even greater extent. That, in turn, is likely to make the accessibility and usability of Swedish public sector websites suffer. If you happen to have any insight into or influence on this matter, please urge whoever is in charge to appoint an authority that will host and continue to develop the Swedish National Guidelines for Public Sector Websites after 31 December 2008. Until that happens – if it does – the content of the guidelines are available on eutveckling.se. The site is a personal initiative by Peter Krantz, author of the Fangs Firefox extension and one of the guideline authors, who also intends to keep the guidelines up-to-date and encourages reader participation. Excellent initiative, Peter!Posted in Accessibility, Usability, Web Standards.

Today the W3C announced that Web Content Accessibility Guidelines 2.0 (WCAG) is now a W3C Recommendation. The announcement is available in W3C Web Standard Defines Accessibility for Next Generation Web. It has taken a long, long time for WCAG 2.0 to reach this stage, but now the wait is over. If you’re still procrastinating like I was, stop it and start reading up on Going from WCAG 1.0 to WCAG 2.0. Lately I’ve been diving into WCAG 2.0 to learn what’s new and different from WCAG 1.0. I like that there are many examples of how to meet the guidelines as well as how not to meet them. It’s good that the purpose of each guideline is explained and that there are examples of how not meeting a particular guideline can cause problems for people with disabilities. WCAG 2.0 can still be improved, but I think it is a major step forward from WCAG 1.0.Posted in Accessibility, Web Standards.

We all know that we should back up our important data frequently. Many of us do. But backups don’t give you the fine-grained control of changes to source code that a version control system does. For a long time (too long) I didn’t use version control at all. Well, unless you count manually duplicating files, which is far from a good solution. But I always felt that I really, really should be using version control. The problem was that I never got around to setting anything up since I thought I had to use a Subversion server, and my attempts at getting one up and running were unsuccessful. It turns out that getting started with version control is much easier than I thought, at least as long as you don't need to be able to access your repositories remotely. Accessing repositories through your local file system eliminates the requirement for a separate version control server and lowers the barrier significantly. Too bad I didn’t know about this option earlier. There are several version control systems available, but the one I use is the open source Subversion. Working remotely To enable everybody on your team to use the same repositories, which is kind of the point if you’re using version control in a team, you need to set up a server. You will probably also want to configure it to let people access it through the svn or http protocols. How to set up a Subversion server and configure it properly is beyond the scope of this post (and beyond my knowledge), so please read Chapter 6. Server Configuration of the Subversion Book for details on that if you are interested. Working locally Sometimes you don’t need to be able to access your repositories remotely. Maybe you’re the only person working on a project or everybody on your team can access the repository server via file://. If that's the case you can use file system repositories instead, which is easier for those of us who aren’t skilled server admins. At my dayjob we have a Subversion server that allows us to connect remotely, but when I work on my personal projects, like this site, I use local repositories. Creating a local repository is very simple if you use a client that does it for you, such as Cornerstone and Versions. Choosing a Subversion client If you’re comfortable using command line tools you can either build Subversion yourself from the source code or download a binary package. There are various options available on the Getting Subversion page on the Subversion site. Another option is to download one of Martin Ott’s Subversion packages. Some people prefer working in a Terminal window, but I personally like using something that has a GUI, at least for version control. I feel that it gives me a much better overview. The number of graphical Subversion clients to choose from used to be quite limited for us Mac OS X users, but over the last year or two a number of new options have been made available. These days there are many ways of communicating with a Subversion repository without using the command line. Here are the standalone Subversion clients that I have tested: Cornerstone svnX Versions ZigVersion There are several code editors that have integrated Subversion support. Some of them are: TextMate Coda BBEdit Some of these applications use the command line Subversion client that is installed on your Mac, while others bundle Subversion so you never have to think about it. I’m not going to review each application here. They all have their pros and cons, but my current favourite is Cornerstone. Try them out yourself and use what works best for you. There are trial versions of all these applications (except for svnX which is free) so you can try before you buy. If you don’t have the budget for a Subversion client right now, svnX does the job. Or you could use the integrated support in your code editor if you use TextMate, BBEdit, or Coda. Get started now In the end it is much more important that you do use some kind of version control than which client you use. In case you’re still feeling that all this version control stuff sounds difficult, perhaps reading A Visual Guide to Version Control will make things clearer. And finally, remember that even though using version control will help you recover from mistakes you make, you do need to remember to make backups of your Subversion repository.Posted in Coding, Productivity.

The id attribute is used to give an HTML element a unique name. That name has several uses: In ID selectors in CSS Referencing the element with JavaScript through the getElementById DOM method Making the element an anchor which can be linked to with a fragment identifier Associating a label element with a form control via the for attribute Specifying which header cell(s) that provide header information for a data cell via the headers attribute The value of each id attribute must be unique in a document. An easy way to check that your HTML document does not contain multiple occurrences of the same id value is to run it through W3C’s HTML Validator. This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.Posted in (X)HTML, Quick Tips.

One of the things I find most annoying when browsing the web is when a link opens a new window. It completely disrupts my workflow when a new window pops up, especially when it does so without warning. If you’re using Firefox this isn’t such a big problem anymore since it will open targeted links in a new tab instead, which is much more manageable and less intrusive. For Safari, however, there is no such setting to be found when you look through its preferences window. But the setting does exist (at least in the Mac OS X version), though you have to use Terminal.app to enable it: Quit Safari Open Terminal.app Enter defaults write com.apple.Safari TargetedClicksCreateTabs -bool true and press enter Open Safari Notice that links that used to open in a new window will now open in a new tab Much better.Posted in Apple, Browsers, Usability.

I spend a fair amount of time doing quality assurance of websites. This includes reviewing code (HTML, CSS, JavaScript), reporting accessibility and usability issues, giving tips and advice, and so on. In these reviews there are some things that keep coming up. A lot of them are pretty simple and basic things if you ask me. However, there are many people who make the same mistakes, so maybe those things aren’t that simple after all. Or maybe the problem is that they aren’t widely known. In the hope that it will help some people out I am going to start a new category of posts here called “Quick Tips”. Each Quick Tip will focus on one of the issues that I come across while doing QA work, and will probably be anything from a sentence to a few paragraphs in length. This is not meant to ridicule the mistakes or the people who make them. My sincere intention is to help people avoid making these mistakes in the first place by attempting to spread the knowledge.Posted in Accessibility, Quick Tips, Usability, Web Standards.

It has become very popular to use the Google Maps API to add maps to websites. While the maps work fine for most users, unfortunately Google Maps does not by default work without JavaScript – when there is no JavaScript support, you don’t get a map. Fortunately it is quite easy (but not very common) to provide a fallback for users who do not have JavaScript enabled in their browser by using the Google Static Maps API. The Google Static Maps API lets you embed a map as a plain image in various formats. The developers guide explains the many options you have when it comes to configuring the static maps. So next time you use the Google Maps API to put a map on a website, take a couple of minutes to add a static fallback for users without JavaScript. While we’re on the topic of making Google Maps work for more people, I recommend reading Patrick H. Lauke’s article on creating Keyboard-accessible Google Maps. Making Google Maps usable without a mouse requires a bit of hacking, but the end result is well worth it.Posted in Accessibility, JavaScript.