456 Berea Street
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.
Internet Explorer market share now below 60 percent
It’s been a while since I talked about the market share of various browsers here. It seemed more important around six or seven years ago before Internet Explorer’s market share started to decrease from levels above 95%.
Back in those days, sites that were built exclusively for Internet Explorer and actively blocked visitors with newer browsers like Mozilla or Safari were pretty common. Nowadays they are rare, at least in my experience. I can’t remember the last time I visited a site that told me to go away because I wasn’t using IE.
Posted in Browsers.
The Web is a web of content, not an application framework
I’ve never been a big fan of Web “applications”. For most tasks that warrant the use of some sort of application I much prefer having a stable desktop application that adheres to the user interface conventions of the platform I’m using, and that I can use without having to be connected to the Internet.
When I use the Web, it’s first and foremost because I want to find or share information – what many call “content”. And that’s something the Web excels at. Yes, Web applications are popular. Especially among developers. But being a platform for creating and delivering applications is not what the Web does best.
Posted in Accessibility, Browsers, Web Standards.
Authentic Jobs 50% promo this week
Right now is a great time to post a job listing on Authentic Jobs. From today until this coming Friday (May 7), you get a 50% discount by entering the promo code 50RJ when you order.
The offer is valid for all job listing types (full-time, freelance, or contract), and of course the 100% money-back guarantee still applies.
Posted in Job openings.
Why iPhones, iPods and iPads are Flash-free
Apple does not allow Flash on their iPhones, iPods and iPads. Some complain about this, others think it’s good, and most people probably don’t know or don’t care.
Many have speculated as to why Apple has made this decision. There hasn’t been any official word on this (as far as I know, at least), but in Thoughts on Flash Steve Jobs explains why.
Posted in Apple, Mobile Web, Web Standards.
Built-in or bolt-on accessibility in HTML5? How about a bit of both?
While following the development of HTML5 I’ve seen a fair bit of talk about “built-in” vs. “bolt-on” accessibility. Perhaps I’m missing something vital, but I don’t really see what the problem is or why it has to be one or the other.
Built-in accessibility by means of semantic elements and controls that browsers can do something meaningful with and expose to assistive technology is great. As long as web developers use the elements of HTML as they are intended, they get plenty of accessibility more or less for free.
On the other hand, we can’t have HTML elements and attributes that cover every imaginable use case. It also isn’t always possible, for various reasons, to change existing, non-semantic and inaccessible markup. That’s where “bolt-on” features like WAI-ARIA are also necessary – to make it possible to make UI elements created with non-ideal markup, CSS and scripting accessible.
Posted in Accessibility, HTML 5.
W3C Mobile Web Best Practices course, May-July 2010
Looking to learn more about developing for the Mobile Web? How about giving W3C’s online course Introduction to W3C's Mobile Web Best Practices a shot?
This course is an updated version of a course that’s been run several times over the past years – three times last year actually. Read more about why you should attend the course and browse the details of the course on W3C’s site.
Posted in Mobile Web.
Web Inspector adds Timeline and Audits panels
The latest set of improved and new features to the WebKit Web Inspector are really great. I mean really great as in “I’m not so sure how much I’ll be using Firebug anymore.”
Designing with Progressive Enhancement (Book review)
Whenever I hold workshops or lectures on web development, I talk a lot about Progressive enhancement. To me it is the obvious and only sensible way of building websites and web applications.
With that said, you can bet I was very pleased to learn that Designing with Progressive Enhancement was being worked on. A whole book covering the subject was very promising, and the previews and code examples on the Designing with Progressive Enhancement book site raised my expectations.
Posted in Accessibility, Reviews, Web Standards.
HTML5 input types
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
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
Posted in HTML 5.
The modern workplace is optimised for interruptions
I recently came across an interview with Jason Fried, co-founder of 37signals, where he among other things talks about why you can’t really get a lot of work done at work:
The modern workplace is structured completely wrong. It’s really optimised for interruptions. And interruptions are the enemy of work, they are the enemy of productivity, they are the enemy of creativity, they are the enemy of everything. But that’s what the modern workplace is all about - it’s interruptions.
He’s very right, unfortunately. Noise and interruptions are what most offices are filled with these days. We’re all (well, most of us) part of it, but I’m not sure what to do about it.
Posted in Productivity.
Using the lang attribute makes a difference
About a year ago I posted a Quick Tip titled Specify each HTML document’s main natural language. The reason is that software like screen readers can use this info to adjust the way they speak text.
But do they really do that? Well, it depends. You need to use a screen reader that supports language switching and can speak the natural languages of the document you’re viewing. One example of when it works as expected is VoiceOver for the iPhone and for the iPod touch.
Posted in (X)HTML, Accessibility.
Whenever you use :hover, also use :focus
Probably one of the most common accessibility oversights is neglecting to apply CSS to the :focus state of links whenever you style the :hover state. How much of a problem this oversight leads to for non-mouse users depends on what CSS is applied to the :hover state.
Posted in Accessibility, CSS, Quick Tips.
A selection of VoiceOver keyboard commands
One of the many great things about using a Mac as your development machine is VoiceOver, the screen reader that ships with every copy of Mac OS X. Testing your work in a screen reader is only a small part of building accessible websites, but it helps you understand the need for many accessibility guidelines.
To test your sites in VoiceOver you obviously need to know how to use it to navigate the Web. There are many, many keyboard shortcuts that can be used to control VoiceOver – way too many for me to learn them all by heart. So I’ve looked through Apple’s VoiceOver Getting Started guide and VoiceOver key-command chart (PDF file) and picked the commands I find most useful.
Posted in Accessibility, Apple, Mac.
