Messages from Web design category

Find and highlight HTML elements with FireFinder for FireBug

A Firefox extension (for Firebug) that I
Publication date: 2009-06-01 more

Cufón and screen readers

Cufón has been talked about a lot recently, and it looks like a potential alternative to static images or sIFR in situations when you absolutely must use a typeface that is not
Publication date: 2009-05-28 more

W3C online course: An Introduction to W3C's Mobile Web Best Practices

If you
Publication date: 2009-05-26 more

Building accessible forms with WCAG 2.0

Recently I
Publication date: 2009-05-22 more

The mysterious sideways jump, a.k.a. scrollbar present or not present

Just in the last couple of weeks, several clients have asked why their sites appear to jump a few pixels sideways when they navigate from one page to another. The sideways jump appears on sites with horizontally centered layouts and is caused by the browser displaying a vertical scrollbar or not, depending on the height of the page. If you move from a short page that doesn
Publication date: 2009-05-20 more

Washington DC Interactive Agency Deploys New ARA, INC Website

Washington DC
Publication date: 2009-05-19 more

Line wrapping text in legend elements

In some cases you should Use the fieldset and legend elements to group HTML form controls. One problem that may lead to though is when the legend text is too long to fit the width of its containing fieldset element. It could be because the legend text is simply too long, because a long text is needed, or because the fieldset is in a narrow column. The end result is the same
Publication date: 2009-05-19 more

Do not remove the outline from links and form controls

An addition to my post Don
Publication date: 2009-05-15 more

CSS background images cannot and should not have alternate text

I sometimes see people asking how they can provide alternate text for CSS background images. The answer is that you can
Publication date: 2009-05-07 more

Hiding with CSS: Problems and solutions

Many CSS and JavaScript tutorials suggest using display:none to hide elements. It may be temporarily, for example when using JavaScript to hide or show parts of a page depending on the user's actions, or permanently, for example in image replacement techniques, skip links, or structural headings. In most cases, using display:none to hide an element is a bad choice that reduces accessibility. I thought this was a well-known fact, but apparently there are many who are not aware of it being a problem. For that reason, here is a quick explanation of the problem and a suggestion for an alternative technique (that I also thought was well-known). display:none really means do not display or speak What many do not seem to realise is that display:none really means "Pretend that this element doesn't exist. Do not display it, print it, or speak its contents." Perhaps the most obvious example of how that can cause problems is when a person using a screen reader visits a site that uses display:none to hide something from sighted users. Since most screen readers ignore anything hidden with display:none, using display:none to hide things like skip links, text, navigational links, or structural headings is a terrible idea. An alternative technique that is much less likely to cause problems is the "off-left" technique (described in ScreenreaderVisibility at the css-discuss Wiki), which involves absolutely positioning the hidden element outside the viewport. Here's the CSS I normally use for that: .structural { position:absolute; left:-9999px; } The visual effect will be the same as using display:none, but now screen readers will be able to speak the contents of the hidden elements. Hiding with CSS, showing with JavaScript Another case where you need to think carefully before using CSS to hide something is when you intend to display it when the user performs a certain action, for example dynamic menus or help text in forms. If you are using JavaScript to show something, you should also use JavaScript to hide it. Otherwise, people with CSS enabled and JavaScript disabled will never be able to see the hidden content. The solution is simple. Instead of using an id or a class name that is in the markup to apply the hiding CSS, use JavaScript to add a class name to the elements you want to hide. Then create a CSS rule that hides any elements with that class name. If CSS and JavaScript are both available, your script works as expected. If CSS in on but not JavaScript, well, the script obviously won't work, but at least the content will be available to everybody.Posted in Accessibility, CSS, JavaScript.
Publication date: 2009-05-04 more

Use the fieldset and legend elements to group HTML form controls

The fieldset and legend elements, which should always be used together, allow you to create and name groups of related input fields in HTML forms. By doing this you help users understand how the input fields are related. How the grouping is conveyed to the user depends mainly on whether the user is sighted or not. Most graphical web browsers draw a border around fieldset elements and render the legend element on top of the border, while screen readers may speak the legend text at the start of each fieldset or before each form control within a fieldset. Since some screen readers will announce the legend text before each form control, it is important to keep the legend text concise and consider how the legend and label texts will work when put together. Here is a simple example of a fieldset element used to group related radio buttons: <fieldset> <legend>Favourite colour</legend> <input type="radio" name="fav-col" id="fav-col-1" value="red"> <label for="fav-col-1">Red</label> <input type="radio" name="fav-col" id="fav-col-2" value="green"> <label for="fav-col-2">Green</label> <input type="radio" name="fav-col" id="fav-col-3" value="blue"> <label for="fav-col-3">Blue</label> </fieldset> In summary: Do not use the fieldset and legend elements if all you want to do is create a graphical border around some content on a page. Only use them within forms, only to group logically related form controls, always use both elements together, and keep legend texts short. Further reading: Fieldsets, Legends and Screen Readers Too much accessibility - FIELDSET LEGENDS WCAG 2.0, H71: Providing a description for groups of form controls using fieldset and legend elements This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.Posted in (X)HTML, Accessibility, Quick Tips.
Publication date: 2009-04-30 more

DC Based Digital Agency Deploys New Office Paper Systems Website

Washington DC
Publication date: 2009-04-30 more

Using an XML declaration triggers Quirks mode in IE 6

If you use an XHTML doctype in your documents, do not include an XML declaration unless you want Internet Explorer 6 to use its Quirks mode. An XHTML 1.0 Strict doctype with an XML declaration looks like this: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE 7 and later are not affected and will use Standards mode. Neither are other browsers (except for old versions of Opera). The most obvious effect of IE 6 using Quirks mode is probably that it will use a broken CSS box model. More info on that can be found in Internet Explorer and the CSS box model. The XML declaration is optional if you use UTF-8 or UTF-16, so my recommendation is to simply remove it and use the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.Posted in (X)HTML, CSS, Quick Tips.
Publication date: 2009-04-28 more

Let your links look like links

One of the strongest conventions on the Web is that links should be underlined and that underlined text is linked. I don
Publication date: 2009-04-22 more

Professional front-end engineering explained

It can often be hard to explain what it is you do as a front-end web developer, interface developer, or whatever you like calling yourself if you work with the code that gets delivered to web browsers. Sadly it can also be hard for others to understand and respect how difficult this job can be, and how important it is to the health of the web and the success of any web site. Fortunately Chris Heilmann recently posted a link to a video where Nate Koechley at Yahoo! does a great job of explaining all this. The talk is titled Professional Frontend Engineering, and you can choose to watch it online, download it in m4v-format, or
Publication date: 2009-04-22 more

Do not create empty links

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-16 more

Making accessibility more real

To some web professionals, accessiility means nothing because they aren
Publication date: 2009-04-15 more

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-09 more

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-06 more

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-03 more

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-02 more

NVDA

Testing your work with a screen reader, especially if you
Publication date: 2009-03-26 more

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-25 more

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-18 more

The evolution and future of HTML

I don
Publication date: 2009-03-17 more

Use the p element to create paragraphs

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-16 more

FileVault can cause default applications to reset in Mac OS X 10.5

For quite some time I
Publication date: 2009-03-12 more

Screen reader testing

Though as a sighted user I find it very difficult to fully grasp what it
Publication date: 2009-03-10 more

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-10 more

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-05 more

Janmedia Teams Up with Fairfax Partnership for Youth

Washington DC
Publication date: 2009-03-04 more

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-03 more

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-25 more

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-24 more

Washington DC Agency Collaborates with Washington Gas Light Company

Washington DC
Publication date: 2009-02-20 more

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-18 more

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-17 more

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-12 more

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-10 more

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-10 more

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-06 more

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-04 more

DC Based Digital Agency Deploys New Center for Security Policy Website

Washington DC
Publication date: 2009-02-03 more

Creating valid names with the id attribute

When using the id attribute to create a
Publication date: 2009-02-03 more

Janmedia has an Optimistic Outlook on 2009

Washington DC
Publication date: 2009-02-01 more

State of the Web 2008 findings

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-30 more

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-28 more

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-28 more

Christmas break

When I started blogging again in September after my three-month parental leave I wasn
Publication date: 2009-01-28 more

Back, now with comments partially open

As always, time seems to accelerate when I
Publication date: 2009-01-28 more

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-28 more

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-28 more

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-28 more

JavaScript Tools bundle for Textmate

In my post about TextMate productivity tips I didn
Publication date: 2009-01-28 more

Specify each HTML document

Always specify which natural language (spoken, written or signed human language) is used for a document
Publication date: 2009-01-28 more

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-28 more

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-27 more

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-28 more

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-26 more

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-26 more

Dissecting the Web with Opera

The people at Opera have created a tool called MAMA. MAMA is short for
Publication date: 2008-11-25 more

Happy Turkey Day!

Janmedia would like to wish everyone a Happy Thanksgiving!
Publication date: 2008-11-25 more

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-19 more

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-19 more

Dyslexia and accessibility

One large group of people with special needs that is often overlooked
Publication date: 2008-11-18 more

Remember to specify a background colour

Jeffrey Zeldman recently posted Is your (website
Publication date: 2008-11-14 more

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-12 more

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-12 more

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-12 more

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-11 more

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-07 more

Extract: Know Your Site

In this extract from his forthcoming book, the Website Owner
Publication date: 2008-11-06 more

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-05 more

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-04 more

Validate an entire site with the Free Site Validator

Validating the markup of a single page is quick and easy
Publication date: 2008-10-31 more

How (a couple of) screen readers handle JavaScript events

Screen readers don
Publication date: 2008-10-30 more

Interview: Aarron Walter

This week, Digital Web
Publication date: 2008-10-29 more

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-28 more

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-23 more

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-22 more

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-21 more

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-18 more

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-17 more

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-15 more

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-08 more

< 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-08 more

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-08 more

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-01 more

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-01 more

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-24 more

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-17 more

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-17 more

Cooking With Stock

Unless you
Publication date: 2008-09-10 more

Signs of life

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-05 more

Web Design by Designers

You
Publication date: 2008-08-27 more

Getting The Most Out Of Your Library

Whether you
Publication date: 2008-08-13 more

Review: Web Form Design by Luke Wroblewski

2008 has been a quiet year for good web design and development books. The standout thus far is Luke Wroblewski
Publication date: 2008-08-06 more

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-06 more

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-30 more

Photoshop vs Fireworks

Web designers use Photoshop, right? Always have, always will. At least that
Publication date: 2008-07-23 more

Washington DC Digital Agency Janmedia Releases New e-edition for The Washington Times

Washington DC
Publication date: 2008-07-16 more

Janmedia Interactive, Inc Collaborates with Office Paper Systems

Washington DC
Publication date: 2008-07-16 more

Leading Washington DC Digital Agency Flying High with Aviation Adventures

Washington DC
Publication date: 2008-07-16 more

Smart CSS Ain

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-16 more

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-02 more

Integrating Social Media into a Web Content Strategy

You might know your Facebook from your Odeo, but most companies couldn
Publication date: 2008-06-25 more

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-19 more

Review: Building Findable Websites

All the HTML, CSS, and JavaScript tricks in the world won
Publication date: 2008-06-13 more

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-13 more

Review: ScreenFlow

The Web is a
Publication date: 2008-06-05 more

Free Your Embedded Data With SearchMonkey

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-05 more

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-22 more

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-21 more

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-14 more

Leading Washington DC Area Digital Agency Teams Up with Carbonfund.org

Washington DC
Publication date: 2008-05-09 more

Improve Your Page Performance With Lazy Loading

Today
Publication date: 2008-05-07 more

User Interface Implementations of Faceted Browsing

Faceted browsing is a powerful navigation tool for content dense sites
Publication date: 2008-05-01 more

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-29 more

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-26 more

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-23 more