A couple of weeks ago when I posted Mac OS X 10.5 Leopard improves accessibility I mentioned that I hadn't yet been able to get hold of a copy of Leopard to try the new features out for myself.Well, later that week I decided to give it a try, so I went out and bought myself a copy along with a new hard drive so I could clone my current disk before installing Leopard. And that proved to be a very good thing.Relying on my previous experiences of upgrading to a new major release of Mac OS X I decided to play it safe and use the Archive and Install option. I wanted a "clean" OS without having to create a new user and reinstall everything.Archive and Install has worked fine for me before, but ...

When Microsoft released IE8, they added a way of ensuring which rendering mode the browser uses. You do it by setting a non-standard header, either with a meta element in your HTML or by configuring your web server to send the header as part of the HTTP response. A lot more details can be found in Defining Document Compatibility (that URL looks far from stable, so don't be surprised if it doesn't work).Always making sure to use a doctype that triggers full standards mode I've never encountered a need to use this myself, but I encountered it recently on a couple of sites. What I noticed was that using the following meta element to set the compatibility header will cause a validation error ...

The other day I came a cross a website with text too small for me to read it comfortably. I hit Command-Plus a couple of times to make Safari bump up the text size a bit... and nothing happened. What?After some investigation of the CSS used on the site the culprit turned out to be the following CSS (don't use):body { -webkit-text-size-adjust:none;}What that does is prevent WebKit-based browsers from resizing text. Not even full page zoom resizes the text. Now, how can preventing your users from resizing text be a good idea?Read full postPosted in Accessibility, Browsers, CSS.

A month or so ago I bought an external hard drive to use as a backup disk with Apple's Time Machine. Previously I used DVD-R:s for backing up my personal data, but I wanted an automated backup system in place. Since Mac OS X comes with Time Machine built in, I decided to give it a try.Getting started was easy. I bought an external USB drive, hooked it up, reformatted it as Mac OS Extended (Journaled) instead of the Windows file system the drive shipped with, and started Time Machine.Everything worked fine for a couple of weeks, but then some strange things started happening. Time Machine reported failed backup attempts and sometimes seemed to have problems even finding the backup disk. Th...

I like using the keyboard to navigate websites. It is often more efficient and comfortable than having to reach for the mouse and position the cursor just right. Another reason I have for using the keyboard is that it lets me check that aspect of accessibility on the sites we build at work.One problem is that, for some strange reason, Mac OS X web browsers do not have full keyboard navigation enabled by default. They do support keyboard navigation, but you need to enable it. In some cases it's very easy, in others it requires a bit more work.Since I am asked about this every now and then I have written this summary of how to enable full keyboard navigation in some web browsers for Mac OS ...

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 - most browsers do not line wrap legend text but keep it all on one line.Recently I had a reason to try to find a workaround, and I managed to come up with something that seems to work in most browsers. Not all of them, and not in all versions, but it does work for the majority of users.Opera and Safari (not sure from w...

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

One of the good things about IE 8 is that - in standards mode - it no longer displays alt text in a tooltip. Previous versions of Internet Explorer do that when you hover the mouse cursor over an image, and this has led to many people misunderstanding the alt attribute and writing bad alt texts.It's good that this has finally been fixed and that IE 8 now behaves like other browsers. The downside of it is that you may need to explain to clients why their tooltips are gone. Take the chance to tell them about Writing good alt text and that they should use the title attribute if they want something to appear as a tooltip. However, also make sure you Don't use the title attribute for essential...

For both accessibility and usability reasons, all input fields and other form controls except buttons should have an associated label that clearly states what the purpose of the control is, or what kind of input the user is expected to fill it with.Sometimes the visual design places restrictions on those labels, in some cases to the extent that there is no room for a label. Perhaps one of the more common examples of that is for site-wide search forms, where the graphic designer often will not accept a visible label. It's not an ideal situation, but it does happen, so we need to make the best of it. And since I've had to do this in a recent project I thought I'd describe the technique I en...

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, yo...

In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module - flexbox - to center an element horizontally and vertically.I'll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of - rather big - caveats, to make you aware of them upfront: Flexbox is currently only supported natively by Gecko (Firefox) and WebKit (Safari, Chrome) browsers. For Opera and IE you can try Flexie, a JavaScript workaround. I've only had a quick look at it and can't say how well it works. The flexible box layout specification will change to use other property names among ot...

It is a rare day at work when I don't do anything related to forms. Be it creating forms from scratch, modifying existing forms, handling user interaction with them, whatever. I work with forms a lot. So that's why one of the things in HTML5 I'm looking forward to the most is the overhaul of the elements and attributes used to create forms.Among other form-related things, HTML5 adds a whole bunch of new values for the input element's type attribute: search tel url email datetime date month week time datetime-local number range colorRead full postPosted in HTML 5.

There are occasions when you want to fine-tune where, when, and how WordPress outputs search forms. For example you will likely want to change the default HTML used for the form, and you may want to display more than one search form on some pages.In this post I'll show several ways of customising the HTML of search forms, how to conditionally display a search form, and how to display more than one search form on the same page without breaking validation.Read full postPosted in WordPress.

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 - give the end user complete control over text size without having to change obscure browser settings.Almost two years ago I posted IE 7 does not resize text sized in pixels. I was hoping that IE 8 would change that, but apparently not - not even in "super standards mode".Yes, there is full page zoom (which works much better in IE 8 than in IE 7), but the controls for resizing ...

If you find yourself having to bump up text size a notch or two on some specific sites that you visit regularly, you will probably find the Firefox extension NoSquint very useful.NoSquint remembers your text zoom level per site, so you will only need to adjust text size once for each site that uses text that is too small for your eyes. It also lets you set the default zoom level and adjust by how much text size is increased each time you hit Ctrl/Cmd - +. Too bad it doesn't help with Flash sites...In the comments on my post Scrap text resize widgets and teach people how to resize text some people argue that text resizing widgets are useful because people do not know how to resize text in ...