Accessibility

Last week I was fortunate enough to be invited to do a Mobile Accessibility full day workshop in Austin Texas. AccessU, run by Knowbility, is one of the best conferences I’ve had the pleasure at being at in a long time. Focused on learning classes are very hands on and practical with a range of…Continue Reading AccessU – Mobile Accessibility Workshop

Last week I was fortunate enough to be invited to do a Mobile Accessibility full day workshop in Austin Texas. AccessU, run by Knowbility, is one of the best conferences I’ve had the pleasure at being at in a long time. Focused on learning classes are very hands on and practical with a range of…Continue Reading Mobile Accessibility workshop, AccessU 2013

It isn’t all that uncommon that, after you’ve polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn’t look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn’t printed. Applying a background colour to the logo image or its containing element in the print CSS isn’t going to help either since most browsers by default do not print backgrounds at all. If you can’t change the image used for screen so that it will look good in print as well, you need to somehow make browsers use a different image when printing. One way of doing that is by using CSS generated content.Read full postPosted in CSS.Copyright © Roger Johansson

When you build an iOS app it’s easy to make it VoiceOver accessible. Native UI controls have accessibility built-in as standard, and custom controls can be accessibility-enabled without difficulty. When it comes to testing, there is no substitute for using your app on an iOS device with VoiceOver turned on. When your app (or prototype) is in a fit state to be deployed on a device, testing it with VoiceOver, or better still asking VoiceOver users to test it, will give you realistic feedback. Accessibility Inspector (available in the iOS Simulator) can then be used to debug any problems you discover. Accessibility Inspector lets you simulate VoiceOver interactions, and examine the accessibility information that’s available for the controls in your app. Accessibility Inspector doesn’t have speech output, so it’s a debugging tool rather than a testing tool. Testing with VoiceOver and debugging with the Accessibility Inspector is a good approach though. Testing with VoiceOver You can turn VoiceOver on/off at any

Sometimes designs contain button styling that is difficult to create with CSS alone. The “official” way of dealing with this is to either use an image button () or put the image in a button element (). However if the graphic you want to show instead o

One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the

A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason. I first noticed it in narrow mobile viewports when t

Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing. An obvious example is whether or not a vertical scrollbar, should one exist, is

I was working on making an existing client site responsive recently and encountered a CSS problem I am unable to find a good cross-browser solution to. The problem involves CSS background images and seemed simple at first, but it turned out otherwise.

When you want to make an element on a web page clickable in order to trigger a JavaScript function, the best option is to use an element that has native support for keyboard interaction. In most cases a button (either or ) is the most appropriate element