Internet Explorer and the CSS Box Model

One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating.

Johansson, Roger. 456 Berea Street (2006). Articles>Web Design>CSS>Web Browsers

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.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>Forms

Specify a Maximum Width for Em-Based Layouts

One technique that can easily make reading a site a lot more uncomfortable is using an elastic, or em-based, layout such as the one I use here (and talk about a bit more in detail in Fixed or fluid width? Elastic!) without specifying a maximum width in another unit.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Usability>CSS

Looking for Open Source CMS and Portal Software Options

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.

Johansson, Roger. 456 Berea Street (2008). Articles>Content Management>Software>Open Source

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.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>Standards

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.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility

Accessibility is Part of Your Job

Accessibility is one of the fundamentals of the Web, so how people who claim to be passionate about the Web and say that they deliver high quality can choose to ignore it is beyond me.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Standards

Choosing a JavaScript Framework

once you’ve decided that using a JavaScript framework is appropriate for the task you’re faced with, it can be hard to choose the one that is right for you. And to make things worse, what is right for you may not be right for your co-workers.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Information Design>JavaScript

Choose an Accessible Image Replacement Method

The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS

The Rules of Unobtrusive JavaScript

One of the most important things to keep in mind when writing JavaScript for the Web is to make it unobtrusive, since You cannot rely on JavaScript being available.Sadly, there are many developers who do not seem to spend any energy at all on considering how to do that. Instead they choose to blindly forge ahead and assume that everybody who comes visiting will have full support for JavaScript and use a mouse.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>JavaScript

Manual for Apple VoiceOver in Mac OS X 10.5 Leopard

Apple’s screen reader, VoiceOver, comes bundled with Mac OS X (yes, it’s free) and has received a number of updates in Mac OS X 10.5 Leopard. The updates include a new voice, Braille support, and improved navigation and searching.

Johansson, Roger. 456 Berea Street (2007). Articles>Usability>Accessibility>Macintosh

Does Advanced Search Sound Too Advanced?

Should advanced search be called something else to sound more friendly and inviting, and would it make more people to use it when they need to?

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Search>User Centered Design

Use the Label Element to Make Your HTML Forms Accessible

There are plenty of articles and tutorials that describe how to create accessible HTML forms out there. Despite that it is common to come across forms that do not use a single label element and forms that use label elements but do so incorrectly.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms

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.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>Personalization

Screen Readers Sometimes Ignore display:none

Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>CSS

The W3C Process May Be Slow, But Browser Vendors are Slower

Don’t blame the W3C for being slow when the real problem is browser vendors not implementing existing specifications fully and properly.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Standards>Web Browsers

POSH: Plain Old Semantic HTML

POSH, in case you haven’t heard of it already, is short for “Plain Old Semantic HTML”, and is obviously much quicker and easier to say than “valid, semantic, accessible, well-structured HTML”. Unfortunately POSH - semantic markup - is also something most people building websites or creating content for the Web have yet to discover.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Standards>HTML

Autopopulating Text Input Fields with JavaScript

Few people will argue against the need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label.This approach works reasonably well, but it burdens the user with having to clear the input before entering their own text, which can lead to frustration and mistakes. An approach that avoids that is using JavaScript to clear the input when it receives focus. Since that won’t work when JavaScript support is missing, JavaScript should be used to insert the placeholder text as well.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms

Helping Your Client Maintain Markup Quality

One thing that is particularly frustrating with caring about Web standards and accessibility is what often happens after your work is done and a site is handed over to the client.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Consulting>Standards

The Resurrection of Downloadable Web Fonts

Despite it being in the CSS 2 specification from 1998, downloadable fonts specified with the @font-face at-rule never caught on. The main reason was that Microsoft and Netscape chose to support different font formats, neither of which was in wide use. However, that may be about to change. As reported in Downloadable Fonts, recent nightly builds of Apple WebKit (not the normal nightly build but a feature branch) support @font-face rules with TrueType fonts. The browser will download the font file you specify and use the typeface it contains just like any other.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Typography

The Dilemma of Comments

Abuse has made me seriously consider – several times – disabling comments. I’m ambivalent about it. On the one hand it would make writing and publishing much easier. Write something, proofread it, publish.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Community Building>Interaction Design

How to Create an Unobtrusive Print this Page Link With JavaScript

When a client requests that I duplicate functionality that should be (and is) handled by web browsers, I always try to avoid doing it by explaining why I believe it is better to leave such functionality to the browser. Most of the time I succed, but occasionally I don’t.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>JavaScript

Can the alt Attribute Be Omitted Without Hurting Accessibility?

In the current editor’s draft of the HTML 5 specification, the alt attribute for images is no longer required. I am not convinced that this is a good idea.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>HTML5

Are We Designers or Developers?

On the about page of this site I used to call myself a “developer/designer/occasional writer”. It’s a bit confusing, and I still find it hard to know what to answer when someone asks me what I do for a living. Am I a Web designer? A Web developer? A Web programmer? All of them? Neither? It really is a difficult question to give a simple answer to.

Johansson, Roger. 456 Berea Street (2007). Careers>Web Design>Programming>Writing

Accessible Expanding and Collapsing Menu

A website’s navigation should, in my opinion, be visible and straightforward, not hidden away like this or in flyout/dropdown menus. But...

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>DHTML