Warning: simplexml_load_file(http://www.alliphones.com/rss.xml) [function.simplexml-load-file]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
in /var/www/clients/client2/web42/web/inc/rss2base.php on line 20
Warning: simplexml_load_file() [function.simplexml-load-file]: I/O warning : failed to load external entity "http://www.alliphones.com/rss.xml" in /var/www/clients/client2/web42/web/inc/rss2base.php on line 20 Interactive World News » Web design
Whenever you put a link on a web page, make sure that it has text content. This may seem incredibly obvious, but it is actually not all that uncommon to find links that do not contain any text at all.
These links usually come in one of the following shapes:
<a href="http://example.com/" accesskey="0"></a>
<a href="http://example.com/"><img src="image.gif" alt=""></a>
In the first case, the link is invisible to everybody, but can be triggered through a keyboard shortcut if you happen to know it and it doesn Publication date: 2009-04-16more
Making accessibility more real
To some web professionals, accessiility means nothing because they aren Publication date: 2009-04-15more
Accessibility is more than
When those of us who care about accessibility try to make the web sites or web applications we build accessible, we sometimes forget to think beyond making them possible to access.
Of course making sure that people with disabilities can Publication date: 2009-04-09more
W3C web site redesign in beta
A couple of weeks ago on March 20, the W3C launched a beta of a new design for the W3C site. Actually it Publication date: 2009-04-06more
MySQL and Perl trouble when moving from a PowerPC to an Intel Mac
The Migration Assistant utility in Mac OS X can be a huge time saver when you buy a new Mac and want to move all your stuff from the old machine to the new one.
However, there are a few things to watch out for. One issue I ran into when using Migration Assistant to move from a PowerPC-based Mac to an Intel-based one is that it will copy MySQL and Perl. In my case that meant mysql-standard-4.1.21-apple-darwin8.6.0-powerpc and Perl 5.8.6.
Depending on how you use MySQL and Perl this may or may not be a problem. I Publication date: 2009-04-03more
Janmedia to build Strayer University's 2009 Virtual Commencement Site
Washington DC - March 19th, 2009 DC based Digital Agency Janmedia and Strayer University have teamed up to build Strayer's 2009 Virtual Commencement website. The new application will provide an interactive venue for Strayer's graduates to participate in a commencement ceremony recognizing individual achievement. Publication date: 2009-04-02more
NVDA
Testing your work with a screen reader, especially if you Publication date: 2009-03-26more
WCAG 2.0 Checklist by WebAIM
The more I read up on WCAG 2.0, the more I think it is a huge improvement over WCAG 1.0. The main problem is its size, which makes it hard to get an overview of and likely is a barrier to entry for many.
I posted links to a few places to start reading up on WCAG 2.0 in Going from WCAG 1.0 to WCAG 2.0, and those are well worth reading. But an even more compact summary of the guidelines in WCAG 2.0 is WebAIM Publication date: 2009-03-25more
Pointing a Subversion working copy to a moved repository
When I recently bought a new Mac I ran into a problem with Subversion, which I use for version control. I use local repositories, and after moving to the new Mac they ended up in a new location in the file system.
This made my SVN client (Cornerstone) lose track of the repositories, and the checked out working copies still pointed to their respective repository Publication date: 2009-03-18more
When creating paragraphs of text in HTML, some WYSIWYG editors and people use double br (line break) elements to separate the paragraphs visually:
This text is the first paragraph.
<br>
<br>
This text is the second paragraph.
While this method often provides the desired visual result there is a better way Publication date: 2009-03-16more
FileVault can cause default applications to reset in Mac OS X 10.5
For quite some time I Publication date: 2009-03-12more
Screen reader testing
Though as a sighted user I find it very difficult to fully grasp what it Publication date: 2009-03-10more
European Accessibility Forum Frankfurt
An interesting conference that is coming up soon is the European Accessibility Forum Frankfurt that will take place in Frankfurt, Germany on 27 March 2009.
There are many well-known accessibility names among the speakers who will discuss the following topics:
Accessible Web Applications
Mobile Access Publication date: 2009-03-10more
Safari 4 public beta with WAI-ARIA support. Or not?
As most people reading this will already know, Apple announced a public beta of Safari 4 last week. There are many new features in this version of the browser, but the one I am most interested in trying out is the addition of support for WAI-ARIA (Accessible Rich Internet Applications).
However, I can Publication date: 2009-03-05more
Janmedia Teams Up with Fairfax Partnership for Youth
Check your design with text size increased to 200 percent
A basic accessibility guideline is that users should be able to increase text size when viewing your site without content disappearing or otherwise becoming unreadable. That Publication date: 2009-03-03more
WAI-ARIA 1.0 Last Call Working Draft
Today the W3C announced that WAI-ARIA has reached Last Call Working Draft, and invites comments on the WAI-ARIA specification as well as the related WAI-ARIA User Agent Implementation Guide and WAI-ARIA Best Practices documents.
Anyone who takes an interest in Web accessibility (which you all should) should make themselves familiar with WAI-ARIA. Now is a good time to study the documents and send any comments you might have to public-pfwg-comments@w3.org by March 24, 2009.
If you don't know where to start, Henny Swan has posted a few questions that the W3C is looking for answers to in WAI-ARIA, last call for comments and what you think counts.Posted in Accessibility, Web Standards.
Publication date: 2009-02-25more
IE 8 still does not resize text sized in pixels
As most accessibility and usability aware web professionals know, Internet Explorer does not by default allow the user to increase the size of text whose size has been specified in CSS pixels.
Some believe that is in fact the correct behaviour, while others (me included) think IE should do what all other browsers do Publication date: 2009-02-24more
Washington DC Agency Collaborates with Washington Gas Light Company
WCAG 2.0 recommends using luminosity contrast ratio to check colour contrast
A little over three years ago I posted Luminosity contrast ratio, in which I mentioned that WCAG 2.0 recommends a different algorithm for calculating colour contrast than the one suggested by WCAG 1.0.
Since WCAG 2.0 is now a W3C Recommendation I think it Publication date: 2009-02-18more
The alt attribute is for images only
The alt attribute is used to provide alternate text for HTML elements that use images. The alternate text is used when an image cannot be seen (because the user can Publication date: 2009-02-17more
No more pixel perfectionism in IE 6
The other day Robert Nyman asked web developers to Stop Developing For Internet Explorer 6. I fully agree with what he Publication date: 2009-02-12more
Results from the WebAIM screen reader survey
A few weeks ago I mentioned a screen reader user survey that was being conducted by WebAIM. The survey is now closed and a first look at the results is presented in Survey of Preferences of Screen Readers Users.
Most of the results are more or less in line with what I would have expected. The result that surprised me the most is that the majority (74.6 %) of the respondents upgrade their screen readers to the newest version within a year after it has been released.
It surprised me because it is often said that screen reader users are very slow to upgrade, but apparently most of those who participated in the survey upgrade quite quickly. Obviously this could be because the participants are self-selected and don Publication date: 2009-02-10more
WAI-ARIA support in IE8 RC no longer non-standard
One of the good things about Internet Explorer 8, apart from its improved support for CSS 2.1, is the addition of support for WAI-ARIA. If you Publication date: 2009-02-10more
Use CSS Diagnostics with Stylish to find bad HTML
A while ago I mentioned Obtrusive JavaScript Checker and Inline Code Finder as useful quality assurance tools that will help you find potentially obtrusive JavaScript and CSS.
A similar approach to checking HTML quality is using CSS to highlight invalid or deprecated code, which I talked about in Helping your client maintain markup quality.
In that post I mentioned Marco Battilana Publication date: 2009-02-06more
Validating WAI-ARIA in HTML and XHTML
WAI-ARIA has great potential to help developers make the Web more accessible to people with disabilities, especially those who are vision impaired or cannot use a mouse.
There is currently a problem with adding WAI-ARIA attributes to your HTML or XHTML markup though: the attributes are not defined in the DTDs for HTML or XHTML and will cause validation errors.
Since WAI-ARIA improves accessibility I could actually live with having some validation errors in my HTML. However, having to manually filter out certain errors to catch the real errors really reduces the value of validation as a quality assurance tool.
Like Steve Faulkner says in How Can I Validate (X)HTML + ARIA?, what I want validation to do is check that:
any WAI-ARIA attributes and attribute values I use are valid
the rest of my markup is valid HTML or XHTML
Custom DTDs to the rescue?
Steve has had some success while experimenting with custom DTDs that contain all WAI-ARIA attributes and their allowed values. The main drawback is that you need to manually validate each page. It Publication date: 2009-02-04more
DC Based Digital Agency Deploys New Center for Security Policy Website
In the beginning of January the report from the State of the Web Survey 2008 was published. The survey is not strictly scientific since those who participated are people who happen to monitor the sites that linked to the survey, which was open during the first three weeks of December.
Regardless of their validity, statistics can be entertaining. Here are some highlights from the report:
The number of Mac and Windows users are almost equal Publication date: 2009-01-30more
Reveal new window links and links to non-HTML files with a user stylesheet
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 Publication date: 2009-01-28more
Find inline CSS and JavaScript with Inline Code Finder
A few weeks ago I posted
Find nasty JavaScript with the Obtrusive JavaScript Checker, talking about Robert Nyman Publication date: 2009-01-28more
Christmas break
When I started blogging again in September after my three-month parental leave I wasn Publication date: 2009-01-28more
Back, now with comments partially open
As always, time seems to accelerate when I Publication date: 2009-01-28more
Sign the petition to save the Swedish National Guidelines for Public Sector Websites
As I mentioned in Swedish National Guidelines for Public Sector Websites in danger?, the Swedish Administrative Development Agency (Verva) was closed down on 31 December 2008.
As far as I know there is still no information available on which government agency, if any, will be responsible for maintaining and keeping these guidelines up to date in the future. It would be very sad if this means the end of the official version (there is an unofficial version available at eutveckling.se) of these guidelines that help improve the accessibility and usability of Swedish public sector websites.
To show the powers that be that many people who work with public sector websites in Sweden consider these guidelines useful and important, Jens Wedin has created a petition to save the guidelines: 24-timmarswebbens framtid.
If you design, develop, maintain, or commission Swedish public sector websites and think the guidelines are important, please sign the petition and spread the word.Posted in Accessibility, Usability, Web Standards.
Publication date: 2009-01-28more
Take part in WebAIM
Most designers and developers who care about accessibility are not regular users of screen reader software. Yes, screen reader users only make up one group of people with disabilities. However they are one of the trickiest groups to cater for, especially when you use JavaScript and Ajax.
There are many recommendations about what to do and what not to do when you develop a website in order for it to be usable by people who rely on screen readers. But do those recommendations really help screen reader users?
To hopefully find an answer to that question, WebAIM is conducting a survey for screen reader users. The intention is to find out more about how screen reader users use the Web and what their preferences are.
If you use screen readers, either full-time or for testing only, please consider spending some time reading the Screen Reader Survey blog post and taking the Survey of Preferences of Screen Reader Users.
If enough people who use screen readers participate in this survey, the results should provide us with valuable information to base our decisions on when developing accessible websites.Posted in Accessibility.
Publication date: 2009-01-28more
Reformat and repartition hard drives before using them with Time Machine
A month or so ago I bought an external hard drive to use as a backup disk with Apple Publication date: 2009-01-28more
JavaScript Tools bundle for Textmate
In my post about TextMate productivity tips I didn Publication date: 2009-01-28more
Specify each HTML document
Always specify which natural language (spoken, written or signed human language) is used for a document Publication date: 2009-01-28more
Headings, heading hierarchy, and document outlines
Recently my coworkers and I have been discussing HTML headings and heading hierarchy. This may not sound like something you need to spend a lot of time discussing, but there are some situations when it seems very difficult to find a solution without compromises.
The importance of headings
First a little detour about the function and importance of headings in HTML. If you already know why headings are important, feel free to skip to the next section.
HTML headings, created with the h1-h6 elements, are very useful and should be used for anything that visually looks or acts like a heading. This is partly because it is the semantically right choice, partly because it may help your search engine rankings. But the most important reason is that using real headings improves accessibility.
Screen reader users, for instance, can use keyboard shortcuts to skip from heading to heading in a document. To see this in action, check out Importance of HTML Headings for Accessibility, a video showing how a screen reader user navigates a document by skipping from one heading to another. Likewise, some browsers allow keyboard-only users to use shortcuts to skip from heading to heading, speeding up navigation through a document.
So there are several reasons to use headings, and to use them properly.
Requirements for a good document structure
The outcome of the discussions we Publication date: 2009-01-28more
Time To Change
It's the end of the year; a time for nostalgia and looking back on the past year. Nick Finck, Digital Web Magazine's founder and publisher, recalls where we've been, what we've achieved, and discusses the potential for dramatic change in where we are going as a publication. This is your chance to influence the future structure and focus of Digital Web. Publication date: 2009-01-27more
Make HTML messages readable in Apple Mail
Long time readers may have noticed that I dislike receiving email in HTML format. It Publication date: 2008-11-28more
Is The Web Really Helping Us Find New Music?
With exactly one month to go until Christmas, Digital Web Magazine is changing pace for our last article of 2008. Tempers have flared in recent weeks over our coverage of idiosyncratic CSS techniques, so we thought we Publication date: 2008-11-26more
TextMate productivity tips
If you saw my post about the DOMAssistant bundle for TextMate, you will already know that my favourite coding tool at the moment is TextMate. If you missed that post, well, now you know.
For anyone who is new to TextMate or considering trying it out, I thought I Publication date: 2008-11-26more
Dissecting the Web with Opera
The people at Opera have created a tool called MAMA. MAMA is short for Publication date: 2008-11-25more
Happy Turkey Day!
Janmedia would like to wish everyone a Happy Thanksgiving! Publication date: 2008-11-25more
The order of link pseudo-classes matters
Common knowledge to most who have been working with CSS for a few years, but perhaps not something that relative newcomers have come across yet: the order in which you define the different link states affects the end result.
I prefer the following order: :link, :visited, :hover, :focus, :active.
Eric Meyer explains why the order matters and why he also prefers defining the states in this order in Link Specificity, Ordering the Link States, and Who Ordered the Link States?.Posted in CSS.
Publication date: 2008-11-19more
RESTful CSS
With every web developer or agency worth their salt releasing a web application these days, it was inevitable that attention would eventually turn to how best to manage CSS within a modern MVC framework. Steve Heffernan pairs stylesheets with REST principles to present a new approach to CSS architecture. Publication date: 2008-11-19more
Dyslexia and accessibility
One large group of people with special needs that is often overlooked Publication date: 2008-11-18more
Remember to specify a background colour
Jeffrey Zeldman recently posted Is your (website Publication date: 2008-11-14more
Review: Website Optimization
Is your website firing on all cylinders? We take a look at a book that has a little something for everyone, from marketers to developers, to help you polish your pages. Andrew Stevens returns to Digital Web to review Website Optimization. Publication date: 2008-11-12more
Are Accessibility Statements Useful?
Leona Tomlinson is back for a second article, detailing where accessibility statements fit into Web sites today. Publication date: 2008-11-12more
Writing good alt text
I do quite a bit of quality assurance work, specifically looking at the accessibility and web standards use of websites. In many cases I make remarks about the use of alternative text for images and other graphic elements.
It is, not surprisingly, common for alternative text to be completely absent, but it is probably even more common to see inappropriate use of the alt attribute. In most cases this is caused by well-meaning people using the alt attribute to describe the image itself instead of the function it has or the content it presents.
Two rules of thumb I use when writing alt text for images are these:
If you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. If not, it should probably have an empty alt attribute.
Does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? If not, change the alternative text so it does make sense and does not provide redundant information.
These are just rules of thumb and there are exceptions, but as a general rule I have found that they work well.
In practice this means that images should often have empty alt text, alt="". Be aware though that if the image is within a link that does not also contain descriptive text, the image needs an alt text that describes the link.
Much more detailed instructions for writing alt text are available in an article at WebAIM called Appropriate Use of Alternative Text.Posted in (X)HTML, Accessibility.
Publication date: 2008-11-12more
Find nasty JavaScript with the Obtrusive JavaScript Checker
When reviewing websites to find areas that may be improved, one of the things I look for is whether any JavaScript has been implemented in an unobtrusive way or not.
I normally do that by turning JavaScript on and off, and viewing the source code. It can be a bit tedious. But now there is a quicker way to find obtrusive JavaScript: Robert Nyman Publication date: 2008-11-11more
Going from WCAG 1.0 to WCAG 2.0
The Web Content Accessibility Guidelines (WCAG) 2.0 is currently in W3C Proposed Recommendation status and may be advanced to W3C Recommendation status before the end of this year. To prepare for this it Publication date: 2008-11-07more
Extract: Know Your Site
In this extract from his forthcoming book, the Website Owner Publication date: 2008-11-06more
Character encoding
Character encoding can be wickedly difficult to get right, especially when you want to start using UTF-8. It seems there is always at least one part of the chain from your brain to the end user Publication date: 2008-11-05more
Reading up on WAI-ARIA
One of the more problematic areas of web accessibility is how to handle the custom widgets and dynamic changes to content used in most web applications and on many content-based websites.
Using JavaScript to add custom behaviour and update content can cause problems for people who rely on assistive technology (AT) such as screen readers. The problems often consist of the AT not being aware that content on the page has changed, the user not noticing that something has changed, or the user being aware that something changed but not what.
These problems can be tricky to solve, but there is hope in the form of Accessible Rich Internet Applications (WAI-ARIA). From the WAI-ARIA Overview:
WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
I have only just started reading up on WAI-ARIA, but it looks very promising. It is also time to start using it to improve the accessibility of web applications that make heavy use of JavaScript.
Since I Publication date: 2008-11-04more
Validate an entire site with the Free Site Validator
Validating the markup of a single page is quick and easy Publication date: 2008-10-31more
How (a couple of) screen readers handle JavaScript events
Screen readers don Publication date: 2008-10-30more
Interview: Aarron Walter
This week, Digital Web Publication date: 2008-10-29more
Scroll Magazine puts web stuff on paper
As you might guess from the number of book reviews I have posted here, I like reading things printed on paper. Yeah I know, that Publication date: 2008-10-28more
The WebKit/Safari Web Inspector is getting even better
A few weeks ago the WebKit team posted an update about the Web Inspector Redesign. I Publication date: 2008-10-23more
Everything You Know About CSS Is Wrong
Digital Web running a provocative article on CSS techniques? Shurely shome mishtake! In this extract from the forthcoming Sitepoint book of the same name, Rachel Andrew explains how you can use tables for layout in modern web design with a clean conscience. Publication date: 2008-10-22more
Upgraded to Movable Type 4.21
It's been almost five years since Movable Type 2.65 was released . Currently the latest version of Movable Type is 4.21. Yet version 2.65 is what I've been using to run this site up until a week or so ago.
I delayed upgrading partly because I did not feel like dealing with the unavoidable upgrade breakage, partly because MT 2.65 actually has been working pretty well for me - it does the job it's supposed to do.
Nevertheless I did not want to feel like an IE 6 holdout anymore. It was time to clean up the cruft that's been building up in my Movable Type installation over the years, take the plunge, and upgrade to Movable Type 4.21. And Publication date: 2008-10-21more
NoScript for Firefox
The other day I mentioned a few Firefox add-ons that I have recently discovered. One add-on that I forgot to mention is NoScript, which I have been using for a few months now.
As the name indicates, NoScript blocks the execution of JavaScript in Firefox. But it isn't the same as simply turning off JavaScript support. NoScript gives you control over which sites are allowed to run scripts, Flash and other active content, and has tons of settings that will let you configure it to your liking.
NoScript is very popular - at the time of this writing it has been downloaded over 29 million times, so surfing the web with it installed (and thus JavaScript at least semi-disabled) is hardly a fringe case. Many people download and use NoScript primarily for security reasons, but my main reason for using it is that it makes many sites that normally are a pain to visit (mostly newspaper websites) much more responsive, quicker loading, and less intrusive.
Surfing the web with NoScript installed also makes it quite obvious which sites have not been built with progressive enhancement and unobtrusive JavaScript in mind. I don't know about other NoScript users, but I tend to leave sites that don't work pretty quickly unless they offer something I really need.Posted in Browsers, JavaScript.
Publication date: 2008-10-18more
Authentic Jobs October 2008 promo: 30% off
Looking to hire some web talent? Need a designer or a developer who keeps track of what's going on in the web world? In case you haven't already, give Authentic Jobs a try.
Right now there is a promotion that lasts until October 31 (this year ;-)) and will give you 30% off on both full-time and freelance listings if you use the promotion code BEREA31 when you create your job listing.
Should you not find the talent you are looking for there is a money-back guarantee that applies even if you use the promo code. In other words you have nothing to lose.
Not hiring but looking for a job? Check out the listings or subscribe to an Authentic Jobs listing feed to make sure you don't miss any of the opportunities that are posted.Posted in Job openings.
Publication date: 2008-10-17more
Recently discovered web developer-related Firefox add-ons
I have recently discovered a few Firefox extensions that can be quite useful when building websites. They are likely old news to many, but I figure there are at least a few others who have not come across them.
ColorZilla is a handy extension that makes it easy to grab colours from the web page that is currently open in the browser. It sure beats having to open a screen shot in Photoshop just to find a colour code for something. ColorZilla does some other useful things as well, so it is not just a colour picker.
Firefox Accessibility Extension adds features that are useful to people with disabilities and helps developers evaluate accessibility.
Screengrab! among other things lets you take screen shots of what is inside the browser viewport, without the browser chrome. I could have used this recently when I was taking a whole bunch of screen shots of various websites for an upcoming course on web development. Unfortunately I didn't know about it then so I used the built in screen shot functionality in Mac OS X and cropped the images to get only the browser viewport. Oh well.
WAVE Toolbar lets you run the WAVE web accessibility evaluation tool inside Firefox, without sending any information to the WAVE server. Perfect if you're like me and spend a lot of time working on password-protected sites.
Posted in Accessibility, Browsers.
Publication date: 2008-10-15more
head Conference Q&A with Aral Balkan
Aral Balkan talks to Digital Web about the conference: an experiment in online communities. Bringing a collection of varied and insightful speakers from around the globe to thousands of attendees without even stepping outside. Publication date: 2008-10-08more
< head > Conference Q&A with Aral Balkan
Aral Balkan talks to Digital Web about the <head> conference: an experiment in online communities. Bringing a collection of varied and insightful speakers from around the globe to thousands of attendees without even stepping outside. Publication date: 2008-10-08more
Google to webmasters: Write clean HTML and consider accessibility
I suspect that the recent release of Google Chrome, based on Webkit, has at least something to do with the Google Webmaster Central Blog post Workin' it on all browsers. In the post webmasters are encouraged to make sure their sites work regardless of what browser their visitors use, and Google is likely interested in websites working properly in their own browser.
The blog post points to an article in the Webmaster Help Center called Making sure your site appears properly in different browsers. That article contains four main tips:
Test your site in as many browsers as possible
Write good, clean HTML
Specify your character encoding
Consider accessibility
All good advice of course, though obviously there is a lot more to be said about good HTML and accessibility than what is brought up in the article. Nevertheless it's good to see this kind of information on Google where it may reach people who would not otherwise bother writing proper HTML and CSS or consider accessibility at all.Posted in Accessibility, Web Standards.
Publication date: 2008-10-08more
Concept Design Tools
Does your creative process start with the same sketch of a web page every time? Or even the same Photoshop template? You could be missing out on the most innovative solutions by not putting enough thought into the concept, says Victor Lombardi. Here he outlines three methods for pulling apart a brief to tackle the underlying concept design. Publication date: 2008-10-01more
Multiple form labels and screen readers
Just about every website needs some forms. Sometimes there are many of them, sometimes just a single contact form. Regardless of their number, they need to be usable and accessible, which can sometimes be a little more work than it would be if theory and practice aligned a little better.
Say you have a simple form with an input field whose value needs to be validated, either by a JavaScript running in the browser or by a script on the server (preferably both). When the data entered by the user does not match what is expected, you need to notify the user somehow.
For sighted users this is generally not a problem. If you output some text stating what the problem is and highlight it visually, most people will notice it. For screen reader users it's a little more tricky though.
To make sure that the screen reader associates the message with the correct input field, the text should be in a label element that is explicitly connected to the field. No problem so far actually, but then the designer tells you that it has to look differently. The validation message should be below the input field instead of next to the label text. Or it should be next to the input field, or some other location not directly adjacent to the label text.
You start fiddling with extra markup, absolute positioning, negative margins, and end up with something that seems to work reasonably well. Until you resize the text, at which point things get misaligned.
You may be able to find a half-good solution that works within certain constraints, but if you've been down this road you probably get the point. Positioning error messages this way is fragile. It would be so much easier if you could just put the error message in a second label element associated with the input field.
Well, it turns out you can do that. From The LABEL element in the HTML 4.01 specification:
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
Sounds great, doesn't it? A quick check in graphical web browsers shows that they associate multiple labels with the input field (as evidenced by the input field gaining focus when either label is clicked). But what about screen readers? It would be so useful if this would work...
Unfortunately, and perhaps unsurprisingly, it looks like it doesn't quite work as well as you'd hope. I mentioned this briefly in Use the label element to make your HTML forms accessible, but I think it's worth bringing up again since full support for multiple labels would help us make forms more accessible to screen reader users while keeping visual designers happy.
I am far from an expert user when it comes to screen readers, but I've done some limited testing with mostly disappointing results.
Apple VoiceOver does not recognise more than one label element associated with a form control and reads only the label that comes first in the document's source order.
JAWS and Window-Eyes both do the opposite and read only the last label when an input field gains focus.
The only screen reader of those that I tested that does handle multiple labels is Fire Vox.
The exact results may obviously depend on user configuration and reading modes, and there may be other screen readers that get it right, but these results indicate that screen reader behaviour is too inconsistent for multiple labels to be a reliable technique.
A couple of years ago, Bob Easton set up a multiple label test case that reveals similar results, discussed in Speaking form labels - Summary.
Sorry to write at such length about something that appears to have no practical use. I just wanted to highlight a case where I think screen readers following the HTML specification more closely would help web developers to increase the accessibility of HTML forms they don't have full visual control of.Posted in (X)HTML, Accessibility.
Publication date: 2008-10-01more
Turn Firefox into a screen reader with Fire Vox
I've sen Fire Vox mentioned plenty of times but have never had any luck getting it to work on my Mac. Until now, that is. Not sure what I've been doing wrong the other times I have tried it, but the other day I gave it another shot and it worked without any problems.
For anyone who hasn't heard of Fire Vox, it is a free, open source screen reader extension for Firefox that works on Windows, Mac OS X, and Linux. Among other things it has support for WAI-ARIA and the CSS3 Speech Module, and is a good alternative to VoiceOver if you're on a Mac and need a screen reader for web browsing (or testing).
One thing that had me a little bit confused at first is that, at least as far as I can tell, you need to tab into a freshly loaded page before the "Auto Read" option (Ctrl + Shift + a) will work. Read Next (Ctrl + Shift + f) and Read Previous (Ctrl + Shift + d) work even if the focus is still in the location bar. Not sure if that is intentional or not, but if you load up a site and nothing happens when you press Ctrl + Shift + a to have Fire Vox read the entire page, try using tab or (Ctrl + Shift + f) to move keyboard focus to the loaded page first.
For developers Fire Vox makes it easy to check how their sites work in a screen reader. Sure, it's just one of several available screen readers, but this one is free and cross-platform. In other words there is no reason for you not to have it installed, so grab a copy right now.Posted in Accessibility, Browsers.
Publication date: 2008-09-24more
Understanding Disabilities when Designing a Website
It is easy to make accessibility a checklist item for your Web site launch, but Leona Tomlinson provides some insight into how users with different disabilities access websites and how simple changes can make a huge difference to their browsing experience. Publication date: 2008-09-17more
Opera Web Standards Curriculum: A "do things the right way" learning resource
In July the Opera Web Standards Curriculum (WSC) was launched. It is a great initiative that aims to provide a free course for anyone who needs a thorough introduction to the web and how to create standards-based and accessible websites.
The WSC consists of a large number of articles covering topics, including the history of the web, graphic design for the web, HTML, CSS, and accessibility. At the time of this writing 23 articles have been published, with many more to come.
The editor, Chris Mills, asked me if I would be interested in writing a few articles. I said yes, but unfortunately I soon realised that I did not have enough spare time to write as many WSC articles as I would have liked to. My single contribution to the WSC is Choosing the right doctype for your HTML documents. Considering the quality of the articles written by the other authors I think my lack of time may have been for the best.
For a long time I've missed having something like the WSC to refer people to when they ask me where to start learning about modern web design and development, so it's great to finally have a place to send them to.
Even better, the entire course is Creative Commons licensed to allow universities, companies, and other organisations to use it freely.
Know someone who needs to catch up with Web Standards? Help make the web a better place by referring them to the Opera Web Standards Curriculum (WSC).Posted in Web Standards.
Publication date: 2008-09-17more
As you may have noticed it's been over three months since I last posted anything here. Just in case you missed it, the reason is that I have been on parental leave. Well, as of this week I am now back at work, and hope to start posting reasonably regularly here again within the next few weeks.
There will be a few changes compared to how things have worked here in the past. Time is becoming more and more precious for me, especially with a one-year-old to take care of, and I need to find ways to remove as many time eaters as possible. One of those time eaters is - unfortunately - comments.
Yeah, I know. I have said in the past that comments are very important here and on other blogs, and I still think they are. But managing comments, whether they are positive or not, takes a lot of time and effort for me, so I am going to disable comments for the time being.
Others have argued for not allowing comments on blogs, and Jeremy Keith sums it up pretty well in Commentary. I used to partly disagree with what Jeremy and the others he is quoting are saying, but I have changed my position on this. Thank you to all readers who have taken the time to post constructive, thoughtful and encouraging comments through the years. I really appreciate it, but from now on there will be no comment form at the end of each post here.
Another thing I want to do is simplify. The design, the code, the publishing system, my writing process, everything that has to do with writing and posting content here. I really want to have a stable setup that lets me focus on writing instead of worrying about pixels or scripts or databases. I am also going to (try to) stop worrying about things being broken in inferior browsers. I get quite enough of solving IE CSS bugs at work, so I am going to minimise the time I waste on it here.
These simplifications will be a work in progress, so if you see anything that is broken or experience any other kind of hiccups around here, it's most likely caused by me changing things and will (hopefully) be temporary.
Or not.
Add 456 Berea Street to your Technorati favorites.Posted in Life.
Publication date: 2008-09-05more
2008 has been a quiet year for good web design and development books. The standout thus far is Luke Wroblewski Publication date: 2008-08-06more
How Environments, Real And Virtual, Influence Us
What sort of state is your desk in right now? Clutter on your website, just as in your environment, can have a negative effect on your visitors Publication date: 2008-08-06more
eCRM: A Virtual Reality Check For Your Business
This week we take a step back from the web development rock-face to look at a more business-oriented topic. User-centered design is all very well, but how do you join the dots when it comes to managing your customer relationships long term? Entrepreneur Tej Kohli discusses the benefits to your business of investing in some Customer Relationship Mojo. Publication date: 2008-07-30more
Photoshop vs Fireworks
Web designers use Photoshop, right? Always have, always will. At least that Publication date: 2008-07-23more
Washington DC Digital Agency Janmedia Releases New e-edition for The Washington Times
The web industry has never been short of zealots. Since the age of the spacer-gif, there have always been designers ready to fight for their preferred technique Publication date: 2008-07-16more
Portable Social Networks, The Building Blocks Of A Social Web
Are you a member of all the latest and greatest social networking sites? Tired of re-entering your personal details? Need to keep your information up-to-date across a myriad of accounts, and enable your user base to do the same? You need the foundations of the social web, brought to you by Ben Ward. Publication date: 2008-07-02more
Integrating Social Media into a Web Content Strategy
You might know your Facebook from your Odeo, but most companies couldn Publication date: 2008-06-25more
The Education of Geeks and Freaks
Between choosing the most semantic markup, wrangling IE6 CSS bugs, and arguing which JavaScript library would win in a fight, it is easy to forget that the future of web design rests in the hands of a small group of people Publication date: 2008-06-19more
Review: Building Findable Websites
All the HTML, CSS, and JavaScript tricks in the world won Publication date: 2008-06-13more
Why Do Web Startups Die? Lack of Alphalpha
Every week heralds the announcement of yet another handful of web startups, filling a new niche or competing with established services Publication date: 2008-06-13more
The web is evolving ever faster, and it feels like almost every day there is a new tool to explore and learn. But which ones will be worth your time and effort? Well, how about the ones that stand to improve your company's bottom line? Yahoo!'s Christian Heilmann walks us through the creation of their new search modification tool, SearchMonkey. Publication date: 2008-06-05more
Temporary absence
For the next few months I will be on a combination of parental leave and vacation. Well, that isn't completely true since I still have one week of work to get through, but when June comes around it's time to switch off and unplug my computer.
That isn't entirely true either. I won't actually be unplugging my computer all the time, but I will not be checking my email regularly (i.e. don't expect a response if you send me email) and I will try hard to avoid reading any blogs or keeping up with what's new in the world of web design and development.
The current plan is to return some time in September, but don't take that as a promise. Neither do I promise not to break the silence if something that calls for a quick post shows up ;-).
See you later, hope you stay subscribed, and thanks for reading.Add 456 Berea Street to your Technorati favorites.Posted in Life.
Publication date: 2008-05-22more
Design Decisions vs. Audience Considerations
This week, we take a look at how to handle the conflict between what your users want, and what you want them to want. Robin Ragle-Davis considers how upfront audience profiling can reap customer relationship benefits down the line. Publication date: 2008-05-21more
Efficient Video Delivery Over The Internet
While the days of low-quality stop animation may be a thing of the past, there is no denying that high quality video streaming is alive and well on the web today. Major media outlets stream significant amounts of their programming, amateurs are in on the game, and many users will simply expect video from certain content providers. This week, Lei Zhu brings us up to speed on the different methods that can be employed to get Flash video on to a site. Publication date: 2008-05-14more
Leading Washington DC Area Digital Agency Teams Up with Carbonfund.org
User Interface Implementations of Faceted Browsing
Faceted browsing is a powerful navigation tool for content dense sites Publication date: 2008-05-01more
Validation statistics from Nikita the Spider
About a year and a half ago I mentioned Nikita the Spider: a bulk validation and link checking tool as a useful quality assurance tool. Well, Nikita the Spider has received a lot of fixes since then and has recently been taken out of beta. It is no longer completely free, but the first 125 pages it crawls will cost you nothing.
But what may be more interesting is what Nikita finds when it crawls a site. Philip Semanchuk, Nikita's author, has analysed the statistics Nikita collected during March 2008 and walks you through the results in By The Numbers – March 2008. A few highlights:
The most common validation error is neglecting to specify an alt attribute for img elements
The second most common error is failing to escape ampersands
XHTML doctypes are much more common than HTML doctypes
Over sixty percent of the crawled pages use a transitional doctype
Of course these statistics are only representative of a very small sample of the pages that exist on the web. In addition to that, those pages live on sites that somebody has actually asked Nikita to crawl, so it is likely that they are more aware of web standards than the average website owner/author/developer.
It's still interesting reading though.Add 456 Berea Street to your Technorati favorites.Posted in (X)HTML, Web Standards.
Publication date: 2008-04-29more
Authentic Jobs API and Affiliates program
If you've been looking for a new job or looking to hire a skilled web professional you may have come across Authentic Jobs. You may also have noticed that there have been Authentic Jobs listings on this site for some time.
The news is that now anyone can display job listings on their site. You can also make some money when someone you refer posts a listing on Authentic Jobs.
To display job listings you will need to apply for an Authentic Jobs API key, and once you have that you can start doing all sorts of with the job listing data. Find more details on that in The Authentic Jobs API Documentation.
Even if you don't want to display job listings you can become an affiliate by applying for The Authentic Jobs Affiliate Program. Once you're approved you will get a personal code that you can use when referring people to Authentic Jobs. For each new full-time listing posted as a result of your referral you will get USD 75, and for each freelance listing your award will be USD 25.
If you're completely new to Authentic Jobs, it is "a targeted destination for standards-aware designers and developers and the companies seeking to hire them." In other words, it is a place where companies looking for modern web professionals can find talent.Add 456 Berea Street to your Technorati favorites.Posted in Job openings.
Publication date: 2008-04-26more
Introduction to Django: Helping Perfectionists With Deadlines
It seems like only yesterday that Rails was being trumpeted as the Next Big Thing Publication date: 2008-04-23more
Web Design 101: Photoshop
While it may be second nature to some, there is no denying that Photoshop has a fierce learning curve. If you Publication date: 2008-04-16more
Presenting: Preparation, Process, and Pizzazz
It might seem like a good idea when you Publication date: 2008-04-09more
The Web Beyond the Desktop
When you think of the people who use your website, where do they use it? At work or a home office? What about a mobile phone? What about even more diverse devices like Amazon's Kindle or the Nintendo Wii? Dave Shea asks us to reconsider how and where people use our websites, and how best to tackle the demands of building sites for a wide array of devices. Publication date: 2008-04-02more
What does Acid3 mean to you and me?
So, last week two browser vendors proudly announced that their rendering engines now achieve a 100/100 score on the Acid3 Browser Test: Opera (Opera and the Acid3 Test) and Apple (WebKit achieves Acid3 100/100 in public build).
Getting a 100/100 score does not mean that the browser has completely passed the Acid3 test, since there are other criteria as well - the animation has to be smooth and the final page has to be a pixel perfect match of the reference rendering. Despite that, it's great news to see browser vendors in a battle to implement standards first. Too bad the biggest two in terms of market share - Firefox and Internet Explorer - didn't take part in the Acid3 race.
What I'm wondering is if, how, and when, this will help Web designers and developers like you and me. How long will it take for the other vendors to catch up enough that the standards that are tested by Acid3 can be used reliably? And what parts of the Acid3 test checks stuff that we really can't wait to use?
What's your thinking on this?Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Browsers, Web Standards.
Publication date: 2008-04-02more
10 Tips For Your First Email Campaign
While it may seem like the natural partner to web development, the art of email marketing comes with a whole new set of important steps to take if you want that newsletter to pay dividends. Ben Chestnut lays down ten top tips for anyone wondering how best to approach that tricky first campaign. Publication date: 2008-03-27more
Washington DC based digital and web agency Janmedia is Hiring!
Washington, DC, March 31, 2008 Publication date: 2008-03-26more
South By South West Sketchnotes
Had enough of the South By South West coverage yet? Yes? Tough luck Publication date: 2008-03-21more
Designing Web Navigation (Book review)
What? An entire book just about designing navigation on the Web? Yes, that's right. And if you think about it for a while you'll probably realise that there is a need for a book on that subject. Heck, considering the number of sites out there that are incredibly hard to navigate, there is room for plenty of books that explain how to create Web navigation that works.
And you're very likely to have run into problems more than once when trying to figure out how to make a website or Web application easy and intuitive not only for yourself, but for your own or your client's end users, to find their way around. Designing Web Navigation by James Kalbach aims to help you master the fundamentals of navigation design. While there is no guarantee that you will master the subject, reading this book will definitely give you a lot of insight into the problems that you encounter in navigation design as well as possible solutions to those problems.
The way Designing Web Navigation is structured makes it usable not only as a book you read from cover to cover, but also as a reference to keep handy for the next time a tricky navigation problem shows up. It can also give you arguments to use in discussions with clients or other team members when there is something that doesn't feel quite right about the solution somebody is suggesting but you can't put it into words. In fact, it may also make you look at the problem from a different angle and realise that maybe your solution isn't the best one.
The author starts the first part of the book by explaining the foundations of Web navigation. Those foundations include why we even need navigation in the first place, how we use Web browsers to interact with websites, the most common types of navigation on the Web, and how we can label navigation to make it easy to understand.
The second part of the book is called "A Framework for Navigation Design", and is focused on providing you with a systematic approach to designing Web navigation. It does that by describing a number of phases that you will often move through while turning a concept into a working navigation system.
In the third and final part, James Kalbach takes a closer look at navigation in special contexts, such as before and after searching, in social tagging systems, and how Web applications can be navigated.
Throughout the book there are many references to accessibility and internationalisation issues that can be caused by some types of navigation. It's great to see that those two very important aspects of Web navigation aren't overlooked here as they are in many other places.
Overall this is a great book that I enjoyed reading. The examples and references are current and credible. One area that has room for improvement is the layout and typography, which I think could be more usable. Line-length is a bit too long for the book to be a really comfortable read, and page numbers are smaller than the text on websites designed by ad agency art directors.
But don't let that discourage you from picking up a copy of this book. My impression is that there is a lot of research behind this book, and I think all web designers and front-end developers can learn something from it.
Designing Web Navigation
Author: James Kalbach
ISBN-10: 0596528108
ISBN-13: 978-0596528102
Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Reviews, Usability.
Publication date: 2008-03-20more
Review: Pro JavaScript Design Patterns
In their new book, Ross Harmes and Dustin Diaz share their expertise in object-oriented JavaScript programming, and take us to new heights by demonstrating how to build design pattern conventions, all based on JavaScript Publication date: 2008-03-14more
Excerpt: Pro JavaScript Design Patterns
JavaScript libraries were the hot topic last year, and have made it easy for us to build ever more powerful applications Publication date: 2008-03-14more
How To Build A Facebook Application
Wherever you turn these days, you can Publication date: 2008-03-14more
Does your business take responsibility for its impact on the environment or the local community? And does it do enough for your employees? John Reeve, co-founder of Santa Barbara design and development shop Pelago, shares the tips and advice that can help make your business whiter than white when it comes to being green. Publication date: 2008-03-14more
Your Social Graph: Exploring the Google API
We know social is good, but how do we tap into that goodness? There are many benefits to harnessing user information and sharing it across sites - relationships are the key, and Brian Suda explains which doors the new Google API can help us to open. Publication date: 2008-03-14more
Extending The JavaScript Date Object with User Defined Methods
Once you get into the nitty-gritty of building a web app, sooner or later you Publication date: 2008-03-14more
Overdoing accessibility
Sometimes when people first learn about Web accessibility they look for quick ways of improving the sites they build. This often leads to misuse or overuse of certain HTML features that are meant to aid accessibility, but when used wrongly have no effect and can actually have the opposite effect by making the page less accessible and less usable.
Many of the commonly misused accessibility features are HTML attributes. It is my feeling that they get misused either by developers who mean well but don't quite understand how the attributes help end users, or by developers who add them simply to be able to tick "accessibility" off their to-do list and shut up their manager, client or whoever is pestering them about making the site more accessible.
Here are a few examples of HTML attributes that are often misused or overused:
The accesskey attribute. A potentially useful attribute, the accesskey attribute creates a keyboard shortcut for a link or form control. However, it is so badly implemented in most browsers that it's safest to avoid using it. Very few users are aware of it, and with current implementations it can conflict with shortcut keys used for other functions in the browser.
That said, accesskey can be useful to some people if many sites use the same shortcut keys. Many public sector sites use the same shortcut keys since they follow a guideline which states which keys to use for what. It doesn't solve the user agent problem, but at least it makes the use of accesskey consistent.
It is quite common to see accesskey use go completely overboard though, with just about every link and form control having an accesskey attribute, especially in the administrative interfaces of CMSs and other tools that claim to be accessible.
The tabindex attribute. Changing the order in which elements receive keyboard focus from the order they appear in the markup can perhaps be useful in some hypothetical cases. I can't really think of any such cases, but that is not how the tabindex attribute is normally used. Instead it is often used to define the tabbing order of elements that are already in a logical order in the markup. This wouldn't really be noticed or cause any problems if it weren't for the fact that elements with a tabindex attribute take precedence over all other elements when using the keyboard to navigate.
A good example is the comment form in a default WordPress installation. The form controls (input fields and submit button) all have tabindex attributes despite already being in a logical order in the source. The effect is that keyboard users will skip straight to the comment form when they start tabbing through the page. Very annoying and completely useless, though probably well-meaning.
The title attribute. The developers of several CMSs that are popular in my part of the world have apparently learned about the title attribute and that it can be used to clarify the target of a link. So they want to use it for all links that their CMS creates, mindlessly repeating exactly what is already in the actual link text, sometimes with "Link to: " prepended. That is completely useless and does nothing to improve accessibility. All it does is increase document size.
The alt attribute. Overly explicit and verbose alt text is a nuisance. One of my favourite examples used to be csn.se, the website for the Swedish National Board of Student Aid. Until a few weeks ago, the site consisted of old-school nested tables and spacer GIFs.
Somebody, probably a well-meaning person, added alt text to the many spacer GIFs and other presentational img elements that were used on the site. So far so good. But unfortunately the alt text should have been empty to indicate that the images were purely decorative. Instead, the text "Typografisk luft" ("Typographical space") was used for spacer images and "Webbplatsens hörn" ("The website's corner") for images whose only purpose is to create rounded corners.
There wasn't just one or two of them either. On the English About CSN page I could count to no less than 185 spacer GIFs with alt="Typografisk luft". Take that, screenreader users! It makes for a superb example when demonstrating what not to do, so in a way it is unfortunate that they have now updated the site to get rid of the spacer GIFs. They do misuse the title attribute though.
In early August this year, Patrick H. Lauke held an excellent presentation where he brings up many of these overused accessibility features. The presentation slides can be downloaded in several formats from Too much accessibility. There is also an audio recording of the presentation, which is really great since you can listen to Patrick talk while going through the slides.
Patrick also brings up several other features that can improve accessibility if used correctly, so I highly recommend that you take the time to go through the entire presentation. You will come away with a much better understanding of why the HTML attributes I mention here can be problematic when used wrong, and how to use them well.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Accessibility.
Publication date: 2008-03-14more
DOM Assistant updated to 2.5, adds CSS selector support
Last week I posted a brief article about what you might want to think about when Choosing a JavaScript framework, and mentioned Robert Nyman's DOM Assistant as one of the JavaScript libraries that I have used in production.
It's been just three months since Robert released version 2.0 of his library, but since then he has been working hard on improving DOM Assistant even more. And that hard work has led to this week's announcement: DOMAssistant 2.5 Released - CSS Selector Support, New AJAX Methods And More Goodies Added!.
If you read Robert's post you will notice that there are plenty of new features and performance tweaks, but the most useful addition to me is definitely support for CSS selectors. As anyone who has used a library/framework that has support for CSS selectors will testify, it is often a lot quicker to write a CSS selector that matches the elements you want to work with than doing it "by hand". So thanks for adding that feature, Robert. I'm sure I will be using it a lot.
For a few months I've been using DOM Assistant 2.0 almost daily, and I have been happy with what it does. Unfortunately I have only had limited time to beta test version 2.5, but I'm looking forward to putting it to the test once I manage to find some time.
Anyway, if you're interested in a comparatively lightweight JavaScript library that focuses more on helping you out with the tedious parts of scripting than adding cool effects and UI widgets, give DOM Assistant a try.
And please, no "my library is better than yours" trolling. There are many libraries to choose from, and to each his own. No need for a war.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in JavaScript.
Publication date: 2008-03-14more
Internet Explorer 8 announced, passes the Acid2 test
A couple of weeks ago, after a long time of silence on what will come after Internet Explorer 7, it was revealed on the IEBlog that the next version of Microsoft's web browser will be Internet Explorer 8. The name isn't too much of a surprise I'd say, but it's good to find out that the IE team still exists and are still working on IE.
But a couple of days ago much more significant news came from the same source: internal builds of IE 8 now pass the Acid2 test. The significance of the Acid2 test may not be obvious to everyone, but in practice this means that IE 8 will support display:table and generated content, among other things.
I know that I sometimes complain about IE. I also think I have the right to do so, since over the years I have spent countless hours working around bugs in IE. But I think this is great news. Fantastic. Beyond what I had hoped. Thanks for continuing to work on improving standards support in IE. I hope you can deliver something that is at least as good as the competition with IE 8.
Now where's the Mac version?
IE is the only major browser that is only available on a single platform. If Apple, Mozilla, and Opera can all make their web browsers available on multiple platforms, why can't (or won't) Microsoft?
Or should we be happy that it is only available for Windows? Perhaps if IE was available for multiple platforms we would be seeing more sites that tell us that we have to install IE before they will let us in? I know a lot of developers who are locked into using only Microsoft technology would love that.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Browsers, Web Standards.
Publication date: 2008-03-14more
456 Berea Street highlights of 2007
Time for the annual look back at what I've written here during the year that is almost at an end. I've been doing this recap since 2004, and it's always interesting to browse through my archives looking for articles that received many comments, were linked to a lot, or caused a bit of discussion. I always run into one or two that I had almost forgotten about.
This year I haven't posted quite as many articles as the previous couple of years. I simply haven't had the time to write. It is partly due to the size of my family being increased in June – having a baby to take care of consumes a lot of time and energy, though it's also a lot of fun. I have also been very busy building websites at my dayjob. So busy that when I get home I don't feel particularly excited about spending another couple of hours in front of the computer.
Anyway, I have managed to write a few articles that I think are worth reminding regular readers about and pointing new readers to. Not as many as some years, but enough to keep you occupied for a little while if you read them all, including the comments.
Thanks for reading, everybody! Here's the list:
Learn JavaScript before tasting the library kool-aid: Learn how to code JavaScript instead of how to use library/framework X to create cool animations and other visual effects. Then evaluate whether you should use a library.
Styling form controls with CSS, revisited: Screenshots from 8 browsers on 4 operating systems showing the effects of CSS applied to form controls.
Poll: Do you maximise your browser window?: Looking for answers to three questions: 1. Do you maximise your browser window? 2. What is the resolution of your screen? 3. Which OS do you use?
Lame excuses for not being a Web professional: Excuses that may be valid in some circumstances are too often used to cover up somebody’s lack of knowledge about modern Web design or development.
Creating bulletproof graphic link buttons with CSS: How to use CSS and two images to create flexible, shrinkwrapping, image based link buttons.
Are we designers or developers?: If you do not do graphic design, but work with HTML, CSS, JavaScript, and accessibility, are you a designer or a developer?
JavaScript interaction must be input device independent: Make your JavaScript device-independent and accessible to all by assigning user interaction event handlers such as onclick to links instead of non-keyboard focusable elements.
10 colour contrast checking tools to improve the accessibility of your design: A list of tools that help make your design readable to all users by checking if text has sufficient contrast against its background.
How to create an unobtrusive print this page link with JavaScript: How to create an unobtrusive print this page link that does not confuse users whose browsers do not support JavaScript.
Scrap text resize widgets and teach people how to resize text: Instead of wasting time and resources on building JavaScript widgets that resize the text on your site, teach people how to resize text in their browser.
Autopopulating text input fields with JavaScript: When you cannot display a label for a text input field, use placeholder text in an unobtrusive way. This article explains how.
Mac OS X Web browser rundown 2007: A rundown of the Mac OS X Web browsers that occupy space on my hard drive in late 2007.
Keep browser lock-out a thing of the past: Browser sniffing and deliberately preventing people using a so-called unsupported browser from entering a site is a thing from the past that we do not need these days.
Use the label element to make your HTML forms accessible: By using the label element to associate form controls with their label text, you improve the accessibility of HTML forms and make styling and scripting them easier.
Choose an accessible image replacement method: When you have to use image replacement for text, choose a method that causes as few problems as possible for as few people as possible.
Choosing a JavaScript framework: There is a large number of JavaScript libraries or frameworks available. But how do you choose which one to use?
And while you read those articles I'll be taking a couple of weeks off from working, blogging, and responding to email. Instead I will be spending some time with my family and my game consoles.
See you next year!Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Web General.
Publication date: 2008-03-14more
Authentic Jobs New Year Promo: 50% off
Most readers who, like myself, have been in the position of trying to find skilled people to hire during last year will probably agree that talent is hard to hire in the web industry right now. Most of the people you would want to hire seem to have good jobs that they're happy with already.
Well, it doesn't hurt to extend your reach if you're hiring, so why not start 2008 by giving Authentic Jobs a try if you haven't already done so in your hunt for talent. You'll reach the best of the best when it comes to modern, standards-aware web design and development.
Use the promo code BEREA08 and you will get a 50% discount if you place your job listing no later than January 15. The discount applies to both full-time and freelance listings, and you still have the money-back guarantee.Add 456 Berea Street to your Technorati favorites.Posted in Job openings.
Publication date: 2008-03-14more
Simply JavaScript (Book review)
A book that is sub-titled "Everything you need to learn JavaScript from scratch" is obviously not aimed at experienced JavaScript developers. However I don't think Simply JavaScript is suitable for absolute beginners either, since it contains programming examples that aren't all that easy for someone without at least some programming or scripting experience to wrap their head around.
The authors, Kevin Yank and Cameron Adams, get off to a great start by explaining the three layers the Web is built on (presentation, content, and behaviour) and how CSS, HTML, and JavaScript should be used for each separate layer. When a JavaScript book starts by talking about unobtrusive scripting and even mentions that perhaps JavaScript isn't always the best way of solving a problem, you can be reasonably sure that it's been written by someone who knows about modern Web development.
Since this book is not aimed at JavaScript experts, there is a whole chapter devoted to explaining the basics of programming with JavaScript. Variables, statements, conditions and loops, functions, and objects are all talked about in an easy-to-understand way, accompanied by plenty of code examples and illustrative figures.
After the first two introductory chapters, the authors dive into some actual programming for the next several chapters. The DOM, events, animation, form scripting, finding and debugging errors, and Ajax are all discussed in one chapter each. The final chapter takes a look ahead at the future of JavaScript.
Throughout the book, the Core JavaScript library is used to make some common DOM scripting tasks easier. I hadn't heard of Core before, but it seems to do the job and is very lightweight. It's so small that the entire source is included in the book.
Overall I think the authors do a great job of explaining JavaScript. The examples and code are easy to follow and explained well, and the book is written in a friendly and inviting tone. I picked up a few tips and tricks from reading this book, which for me makes it worth the time it took to read it.
Revisiting the sub-title of this book, I think the audience that will get the most out of it falls somewhere in between the novice and expert levels. To me it seems best suited for designers or developers with a decent knowledge of HTML and CSS and some familiarity with JavaScript. If that describes you, I can recommend Simply JavaScript.
As with all SitePoint books, there are sample chapters you can download to find out if the book is right for you.
Simply JavaScript
Authors: Kevin Yank, Cameron Adams
ISBN-10: 0980285801
ISBN-13: 978-0980285802
Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in JavaScript, Reviews.
Publication date: 2008-03-14more
Standards mode is the new quirks mode
Just in case you haven't already read the companion articles Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 and From Switches to Targets: A Standardista's Journey at A List Apart, I suggest you do so now.
Back? Good. If you didn't read the articles, here is an executive summary: Because of their immense fear of making broken websites that should be fixed look broken in Internet Explorer, Microsoft are going to make developers add a particular meta element to any page that IE 8 should use its "really, really standards mode, and we really mean it this time" to render.
Now, this is one of those subjects that if you have an opinion on it, it doesn't matter what that opinion is. It will be the wrong opinion to a lot of people anyway, and people will become rude and call you names. Come to think of it, most web related subjects seem to be of that kind these days.
When I first read the articles I just mentioned I shrugged, finished my breakfast, and drove to work. Yawn. Big deal. But after several people have asked me what I think about it, I re-read the articles and the comments posted on them as well as a lot of other people's opinions. And now I have an opinion which will be the wrong opinion to many people. What else is new...
I'm not convinced enough that I can say my opinion will never change, but for the most part I think introducing this switch is a bad idea. If other browser vendors than Microsoft also introduce it I think it's a really bad idea. As do others – read The Internet Explorer lock-in and <META HTTP-EQUIV="X-BALL-CHAIN"> for starters.
So, please tell me why those of us who think this is not a good idea are wrong.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Browsers, Web Standards.
Publication date: 2008-03-14more
The Art and Science of CSS (Book review)
The Art & Science of CSS is not a very thick book, and it doesn't have to be since it is not a reference book on CSS. It is a rather quick read, but it contains useful and practical tips on how to create certain design elements with CSS. These are tips that you can adapt and use in your own projects.
Five authors have contributed to this book: Cameron Adams, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. Bolton, Johnson, and Snook have written one chapter each, while Steve Smith and Cameron Adams have both written two chapters. It's an author line-up that raises expectations.
There's not a lot to say about the general structure of the book. There is no introduction to CSS or HTML in here. Instead you jump right in and get working on the examples. During the course of the seven chapters you will find new or different ways of styling, creating, or manipulating headings, images, backgrounds, navigation, forms, rounded corners, and tables. Those are the main topics of each chapter, but in each chapter you will pick up other tips as well.
So, what do I think of this book after reading it? Well, it's not bad. Plenty of good tips and useful techniques are described in it. It's not perfect either. I guess it's partly down to personal preference, but I am not too fond of books that have multiple authors unless there is one main editor that makes sure all chapters are at least reasonably similar in style. I can't quite put it into words, but to some extent the different styles distract me from the actual content.
Apart from the difference in writing style between the authors, there is also the difference in coding practices for both CSS and HTML. It's ok for someone who is experienced and can see that the differences are often just personal preferences, but this book is meant for people who aren't CSS or HTML experts. I can easily imagine how confusing it is to see different approaches to font sizing in different chapters of the same book, with no explanation of why. I think consistency would have been good here.
With that in mind, reading The Art & Science of CSS will teach you how to use CSS to accomplish a number of useful design tasks, so I think it's worth its price unless you already know most of what there is to know about CSS.
As with all SitePoint books, there are sample chapters you can download to find out if the book is right for you.
The Art & Science of CSS
Authors: Cameron Adams, Jina Bolton, David Johnson, Steve Smith, Jonathan Snook
ISBN-10: 0975841971
ISBN-13: 978-0975841976
Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in CSS, Reviews.
Publication date: 2008-03-14more
Helping others understand web accessibility
When I hold workshops for people who want to learn more about web standards and accessibility, I often notice that the attendants really have tried to improve their accessibility knowledge. But they get overwhelmed when they go to the official documentation from the W3C and try to understand it.
Mike Cherim brings this up in Making Web Accessibility Accessible, an article that is over a year old but still just as relevant. He notes that accessibility is harder to get into than it should be for several reasons, one of which being that the documentation (WCAG 1.0) is hard to understand. And it doesn't look like things will get much easier when WCAG 2.0 is released and becomes the norm.
In addition to the documentation problem, Mike also mentions the unhelpful attitude held by some people who seem like they don't want to help the less experienced, the misguided or the misinformed, and instead choose to criticise them. I see it too sometimes, and I have probably been guilty of doing that myself. But I really try to help where I can by sharing what I've learned about web accessibility so far. And I'm still learning, so I really appreciate when other people share their knowledge.
Over the years I've spent countless hours writing articles, responding to email and comments, and participating on discussion forums. No matter how much I would like to, there is no time for me to do more unless I quit my dayjob. And since my dayjob is how I pay the mortgage, well, that's not very likely. Writing articles takes lots of time, for me anyway.
Going back to Mike's article, he suggests a few things to think about when you talk about accessibility with other people who work in the fields of web design and development:
Be a translator: Learn the specs and translate them into English.
Be willing to give back: If somebody asks for your help, try to find time to respond.
Accessibility is happy: Give accessibility a smiling face.
Encourage don't admonish: When somebody makes progress, acknowledge that instead of criticising what they do wrong.
Good suggestions, Mike. I will try to get better at each of them. For instance, I guess I could be a little less grumpy sometimes when I come across bad examples or implementations. But not always... ;-).Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Accessibility.
Publication date: 2008-03-14more
Looking for open source CMS and portal software options
Over the past year or so we've seen a definite increase in the number of questions we get about open source content management and portal software at NetRelations. I'm not quite sure of the reason for this trend, but nevertheless it's refreshing to see people beginning to "think different" in the otherwise very Microsoft-dominated country that Sweden is.
It may be a welcome change, but I find choosing a CMS incredibly difficult, and evaluating them is very time consuming and often frustrating. There are hundreds of options, one worse than the other. To date I have never come across a CMS that doesn't have serious flaws. Even if a CMS looks good at a glance, once you start digging deeper you will always encounter problems with usability, accessibility, and front-end code.
Content Management Systems
A couple of times in the past I have asked my readers for CMS suggestions, but it's been a while now. Last time we ended up using Plone, which was a real pain to work with. I don't know if the situation has improved by now (it's been three years), but just thinking about working with it gives me a stomach ache. So we want to look at other options, and I'd like to ask what you all think.
We've been looking around for a while and two of the very few systems that look like they could be worth spending more time with are ModX and Drupal. Their approaches to content handling are quite different, so they would most likely suit different kinds of clients.
The first thing I would like to get some input on is how good ModX and Drupal really are. I'm thinking both for developers who will need to customise the CMS to fit the clients' needs and for the end users who will work with the admin interfaces to create content and structure sites. I'm looking for answers to the following questions:
How easy (or hard) are ModX and Drupal to develop for?
How easy (or hard) is using them to create content and administer websites?
Are there any problems creating fully standards compliant and accessible websites with either system? Do they allow full (and I really mean full) control of HTML, CSS, and JavaScript or do they contain uncustomisable black boxes?
Are their admin interfaces reasonably accessible? If not, can they be made accessible?
That's one bunch of questions. Next, the vague topic of "portals".
Portal Software
Some large organisations are asking about open source portal software to use instead of commercial solutions like IBM WebSphere (WPS) or Microsoft Sharepoint (MOSS). I have some experience with both WPS and MOSS, and while making a public-facing website based on either system standards compliant and accessible is achievable with a bit of work, fixing the interface presented to a logged-in user seems more or less impossible. In other words, to be better than either of those two in the web standards, accessibility and usability departments should be really easy.
It seems that most open source portal platforms are Java based. Liferay, JBoss Portal, and Apache Jetspeed are some. They all seem like incredibly complicated pieces of software that are beyond my capability to understand. That has got me thinking... would it be possible to use Plone or Drupal as a portal? Yes, I know I complained about Plone being hard to develop for earlier, but compared to others it is pretty good at web standards and accessibility.
Does anyone reading this have experience from open source portal software? The questions I'm looking for answers to are the same as for the content management systems.
Their standards aren't our standards
As a sidenote it's pretty fascinating to note that when CMS and portal software vendors boast about "Standards compliance", "Open standards", and "Interoperability" they do not mean what you might think they mean.
To them, those terms have little to do with the front-end, so having a "Standards compliant, interoperable" portal solution does not mean that it outputs valid HTML and CSS and will work in any browser. Instead, it means it will run on any server that means the requirements. Huge difference.
To summarise this little call for input: any suggestions, hints, and recommendations on open source content management and portal software are welcome.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Content Management.
Publication date: 2008-03-14more
Make sure your website works with or without www
Being a little lazy at times, I tend to skip typing "www." before the domain name when I enter a URL in my web browser. No, it doesn't save me a whole lot of typing, but bear with me here. Most of the time it works fine and I end up on the site I expect.
But it really surprises me how often typing in a domain name without "www." in front results in one of the following:
My browser displays an error message such as "Safari can't open the page "http://example.com/" because it can't find the server "example.com"."
My browser finds a server but nothing happens because there is no website configured.
I am redirected to a parked domain.
I get a "Directory listing denied" message.
This happens with all sorts of organisations, from the tiniest single-page websites to huge online presences of multi-national corporations.
You can add "www." in front of the domain name and all is fine. But should you really have to do that? What I think should happen is that the web server either responds on the address I entered or redirects me to the www host. Unlike the no-www and yes-www folks I'm "www-agnostic" in that I don't really care if the preferred host is the bare domain name or "www." + domain name. Just make both work and redirect all traffic to one of them, I don't care which. I do however think that it makes a really bad impression when any of the above happens when you try to access an organisation's website without typing "www.".
I'm no DNS or web hosting expert, so there may well be technical reasons that I am unaware of that make it hard or impossible to configure all web servers to work with or without the "www.". But when this sort of thing has happened to clients, it usually turns out that whoever is hosting the site has simply forgotten about it.
Considering how many use their bare domain name in advertising, and looking at colleagues and relatives, I know I'm far from the only one who skips "www." when manually typing in a URL. And do you really want to risk your clients losing visitors due to a misconfigured web server? I thought not, so remember to check this with the persons or companies responsible for the servers your clients' sites are hosted on.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Usability.
Publication date: 2008-03-14more
Beware of id and name attribute mixups when using getElementById in Internet Explorer
It is probably old news to the JavaScript experts among you, but since I recently ran into this problem myself and pulled my hair in frustration before a coworker hinted at the solution I think it's worth mentioning:
When using getElementById to get a reference to an element via the id attribute, Internet Explorer for Windows (and some versions of Opera) will also match an element whose name attribute contains the same value.
This doesn't always cause any noticeable problems since in most cases you're not all that likely to have identical name and id values for different elements, but when it does happen it can lead to errors that are very hard to debug.
Here is a simple example HTML document that is susceptible to this problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="description" content="A brief description of the content on this page.">
<title>The name and id attributes in IE</title>
</head>
<body>
<div id="description">
<p>A description of something.</p>
</div>
</body>
</html>
Now imagine that you want to use JavaScript to do something to div#description. For simplicity's sake, let's say you write the following script that hides the div element by setting its display CSS property to none when the page is loaded:
function hideIt() {
var obj = document.getElementById('description');
obj.style.display = 'none';
}
window.onload = hideIt;
That works as expected everywhere except in Internet Explorer, where nothing happens. The reason for that is that in IE, getElementById finds and returns the meta element whose name attribute has the value description before it gets to the div element.
You can avoid this either by making sure that there are no name and id conflicts in your document or by using a script that fixes the problem by overriding IE's native getElementById method.
If you were aware of this already, good for you. If not, I hope I saved you some frustration.Visit site to read or post comments…Add 456 Berea Street to your Technorati favorites.Posted in Browsers, JavaScript.
Publication date: 2008-03-14more