456 Berea Street
You can’t reliably detect screen readers
When I hold workshops on accessibility I am often asked how to detect screen readers. The answer is that you can’t, at least not in a reliable way.
The main reason is that screen readers run alongside (or on top of, if you prefer) regular web browsers and do not have a user agent string of their own that you can sniff.
Posted in Accessibility, Quick Tips.
Remember non-vendor-prefixed CSS 3 properties (and put them last)
Everybody wants to use CSS 3 now that even Internet Explorer will support parts of it once IE 9 is out. But since parts of CSS 3 are still subject to change, most browsers use a vendor prefix for many CSS 3 properties to signal that their implemenation is “experimental” and may change in a later version of the browser.
This means that for a property like border-radius to work cross-browser you need to specify it several times with different vendor prefixes, like this:
- .box {
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- border-radius:10px;
- }
What characters are allowed unencoded in query strings?
A couple of months ago I advised people to Be careful with non-ascii characters in URLs. We’ve been discussing that at work lately, more specifically whether characters like ":" and "/" are allowed unencoded in query strings or not.
I may well have made mistakes trying to understand the specification, so any help clarifying any errors in the following would be appreciated.
The summary of my previous post is this:
In essence this means that the only characters you can reliably use for the actual name parts of a URL are a-z, A-Z, 0-9, -, ., _, and ~. Any other characters need to be Percent encoded.
But what about those query strings? After studying RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax I’ve come to the following conclusions.
Posted in Web Standards.
Minimise file size with the YUI Compressor TextMate Bundle
It’s quite obvious that the smaller the files that make up your website are, the less time your visitors will wait for them to download. One way of reducing file sizes is minimising JavaScript and CSS files by removing comments and whitespace, among other things.
To do that, you can either let the server do it for you or minimise the files yourself before uploading them to the server. Letting the server do it automatically is probably the most convenient way since you don't have to remember to do it. But it isn't practical or possible for everyone to use something like minify, so sometimes you'll need to do it manually.
That may sound like more trouble than it's worth. Luckily for us TextMate users there's a handy YUI Compressor TextMate bundle that makes it almost as transparent as the server-side solution.
Posted in CSS, Coding, JavaScript.
CSS3 is not HTML5
There’s been some talk here and there about whether or not it matters that many people tend to mean a lot more stuff than what is actually HTML5 when they say “HTML5”.
Despite being kind of nitpicky about terminology, I can buy bundling stuff like Geolocation, Web Storage, Web Workers, and Microdata with the actual HTML5 specification and calling it all “HTML5”.
But also bundling CSS3 (and even some parts of CSS 2.1) with HTML5? Nope. As Jeremy Keith puts it in Clarification:
Don’t get me wrong: I honestly don’t care that much about whether something like geolocation is technically part of HTML5 or not: that’s a fairly trifling matter. But CSS3? C’mon! In what universe is it in any way acceptable that a web developer wanting to learn about web fonts begins by Googling for HTML5?
No longdesc attribute in HTML5
According to an HTML Working Group Decision, the longdesc attribute will not be included in the HTML5 specification. Not everybody is happy with that decision, so whether longdesc is still out when HTML5 is finished remains to be seen.
In case you aren’t familiar with the longdesc attribute, here is how it is described in the HTML 4.01 specification:
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.
This provides a way of describing images to non-sighted users in detail, with more text than what is suitable for the alt attribute (which is really more of a text alternative to an image than a description of it). The longdesc attribute explicitly associates this description with the image.
Posted in Accessibility, HTML 5.
Please don't resize my browser window
As I mentioned recently in Frustrated by the Web, I’ve been running into various usability issues on the Web recently. Well, I guess I do that all the time, but this time I took notice of them while trying be a “normal” user.
But I digress. What I actually was going to say was that I really, really dislike visiting websites that resize my entire browser window. You know, the typical “all-Flash-site behaviour”.
Posted in Browsers, Usability.
Frustrated by the Web
So I’ve been on vacation for several weeks, trying to keep my mind off things like web development, HTML, accessibility and all that. All in all I think I’ve done pretty well.
However.
Completely staying off the Web for seven weeks is not very practical these days. It makes it so much easier than before to find information related to pretty much everything. Be it making vacation plans, deciding which new game to buy, finding angling tips, or selling the stuff you find lying in the attic, I don’t know how we managed to get by without the Web.
Posted in Usability.
Vacation
Yep, it’s that time of year again. Summer here in Sweden is very short. Too short. Some of you might not even think it’s worth calling “summer”. Anyway, to enjoy as much of it as possible I’m taking a break from working and blogging for a few weeks.
Back in August.
Posted in Life.
Be careful with non-ascii characters in URLs
One thing that is rather common, especially on websites whose content is not in English, is URLs that contain unencoded characters such as space, å, ä, or ö. While this works most of the time it can cause problems.
Looking at RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax, characters that are allowed to be used unencoded in URLs are either reserved or unreserved. The unreserved characters are a-z, A-Z, 0-9, -, ., _, and ~. The reserved characters are used as delimiters and are :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and =.
In essence this means that the only characters you can reliably use for the actual name parts of a URL are a-z, A-Z, 0-9, -, ., _, and ~. Any other characters need to be Percent encoded.
Posted in Browsers, Quick Tips, Usability, Web Standards.
New windows with JavaScript and the target attribute
I’ve written a few articles about techniques that use JavaScript to open new browser windows, the most recent one being Opening new windows with JavaScript, version 1.2. A very quick summary of my reason for using JavaScript is that it enables me to use strict HTML 4.01 and XHTML doctypes, which do not allow the target attribute.
By using JavaScript to open new windows I can still use validation as a quality assurance tool when working with HTML 4.01 or XHTML 1.0 without having to manually filter out the errors caused by target attributes or downgrading to a Transitional doctype. (I’m aware that the target attribute is allowed in HTML5, so eventually this will all be completely unnecessary.)
Let it be known that I am by no means a proponent of opening new windows, quite the contrary. As a user I find new windows a nuisance, and since there are several well-known accessibility and usability problems related to opening new windows I always recommend leaving end users in control.
Posted in Accessibility, JavaScript, Usability.
Validating HTML5 in the browser
I like to be alerted of any validation errors that sneak into my markup as soon as possible. That's why I find the HTML Validator Extension for Firefox very hard to live (well, work) without.
Unfortunately, it does not support HTML5. I've been looking hard for an alternative that does and has the same features as the HTML Validator Extension, i.e. runs locally in the browser without sending anything to a remote server and validates every page you load automatically.
No luck.
Posted in Browsers, HTML 5, Web Standards.
Accessibility does not prevent you from using JavaScript or Flash
A common misconception is that in order to make a website accessible you have to abstain from using JavaScript or Flash. Almost every time I hold a workshop on Web standards and accessibility there is at least one participant who believes that accessibility limits what they can do on the Web by telling them to stay away from anything that isn't pure HTML.
Posted in Accessibility, JavaScript.
If you use the accesskey attribute, specify unique values
The HTML accesskey attribute can be used to assign a keyboard shortcut to a link or form control. The intention is to let keyboard users quickly navigate to different parts of a web page or trigger links to other pages.
Whether or not the accesskey attribute should be used at all is a debate that has been going on for years. I’m not going to go there in this article (see Providing Keyboard Shortcuts Using accesskey for a good explanation), but will instead focus on something you need to be aware of if you do use accesskey – values must be unique.
Posted in (X)HTML, Accessibility, Browsers.
Void (empty) elements and self-closing start tags in HTML
The syntax for void elements and self-closing tags is something most web authors get right. However, there are two types of mistakes that I see every now and then: using end tags on void elements and using self-closing start tags on elements that can have content.
Posted in (X)HTML, HTML 5, Quick Tips.