456 Berea Street

CSS generated content and screen readers

Roger Johansson — 2012-05-18T10:25:27+01:00

As all widely used web browsers (unless you still consider IE7 as being widely used) now support the :before and :after pseudo-elements along with the content property, using those pseduo-elements has become more and more common.

There are many clever CSS tricks they can be used for, like implementing a particular design without having to insert extra markup into your HTML. There is one catch though, and many developers seem unaware of this: several screen readers will speak content that is created this way. VoiceOver does (in both OS X and iOS). NVDA does when used with Firefox, though not with IE. I made a CSS generated content demo page so you can try it yourself.

Read full post

Posted in Accessibility, CSS.

iOS orientation change and automatic text resizing

Roger Johansson — 2012-05-09T19:49:24+01:00

Most web developers who have viewed their work in an iOS device know that Safari for iOS likes to zoom in on the page and do weird things to font size when you change the device’s orientation from portrait to landscape. A too common way to prevent that is to completely disable the user’s ability to zoom, which you really do not want to do.

Luckily there is A Fix for the iOS Orientationchange Zoom Bug, a very clever one too. I’ve been using this in a few projects and have found it to work well. I have however run into a couple of issues (that in hindsight are pretty obvious) that I want to note here as a reminder to my future self.

Read full post

Posted in CSS, JavaScript, iOS.

Make sure your HTML5 document outline is backwards compatible

Roger Johansson — 2012-05-02T19:43:46+01:00

This is just a short reminder of something I wrote about in On using h1 for all heading levels in HTML5: make sure your HTML5 document outline is backwards compatible.

The reason is simple. Browsers and assistive technology haven’t implemented the HTML5 outline algorithm yet (the only exception I’m aware of is JAWS, which gets it wrong, as Jason Kiss explains in JAWS, IE and Headings in HTML5).

Read full post

Posted in Accessibility, HTML 5.

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap

Roger Johansson — 2012-04-23T20:54:57+01:00

A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

As columns of text become narrower, the risk of a single word being longer than the column width increases. When that happens, the text normally extends outside the column (unless the column element’s overflow property has been given a different value than the default visible). The effect can be anything from just a slight visual glitch to unreadable text. Either way it’s something you don’t want to happen.

Read full post

Posted in CSS.

End tags, semi-colons and maintainable code

Roger Johansson — 2012-04-17T19:34:31+01:00

In Of parser-fetishists and semi-colons, Chris Heilmann brings up the importance of code maintainability, something that I feel is overlooked a bit too often.

The main issue Chris talks about is omitting semi-colons at the end of JavaScript statements, the subject of a current JavaScript drama. Doing so is valid syntax in many cases, and browsers parse and execute the code fine. However, it does not improve code readability for humans, who are often as important to target as the browsers that run the code.

Read full post

Posted in Coding, HTML 5, JavaScript.

The HTML5 placeholder attribute is not a substitute for the label element

Roger Johansson — 2012-04-09T07:15:04+01:00

One of the useful things in HTML5 is the placeholder attribute that lets you specify a short hint for text input fields (textarea elements and the text states of the input element). In browsers that implement placeholder according to the specification, the hint text is displayed only when the field is empty and unfocused.

This is good since it gives you an opportunity to provide the user with hints regarding what they are expected to enter in the field. What is not good is that the placeholder attribute is often used as a substitute for the label element. I’ve seen this in various demos of the placeholder attribute as well as in demos for scripts that emulate the placeholder attribute in browsers that don’t natively support it. So some developers appear to misunderstand what the placeholder attribute is meant for and how it works.

Read full post

Posted in Accessibility, HTML 5, Quick Tips, Usability.

Use only what you need

Roger Johansson — 2012-03-23T07:33:56+01:00

The other day Rachel Andrew posted Stop solving problems you don’t yet have, where she brings up an increasingly common problem with front-end development – unnecessary bloat.

I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.

Read full post

Posted in CSS, Coding, JavaScript.

Skip links and other in page links in WebKit browsers

Roger Johansson — 2012-03-09T12:42:23+01:00

Recently a coworker pointed me to an article explaining Why your ‘Skip to Content’ link might not work in WebKit-based browsers like Safari and Chrome. Read the article for details or read my post from September 2005 about Keyboard navigation problems in IE and Safari for a briefer explanation.

In summary: following an in page link (a link that targets an element on the same page, like <a href="#main">Skip to main content</a>) does not properly move keyboard focus in WebKit browsers. This means that when you press tab after activating an in page link, focus is moved to the first focusable element after the link rather than the first focusable element after the target.

Read full post

Posted in Accessibility, Browsers.

Using max-width on images can make them disappear in IE8

Roger Johansson — 2012-02-02T20:16:54+01:00

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

How to adjust an iframe element’s height to fit its content

Roger Johansson — 2011-12-16T09:06:31+01:00

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Read full post

Posted in JavaScript, Usability.