Most recent post

Hiding visible content from screen readers with aria-hidden

Sometimes you need to hide parts of a web page, either permanently or temporarily. A common use case is content that becomes visible only after the user has interacted with a control on the page, for instance by clicking a button that reveals more content or activating a tab in a tab system.

Hiding content from all users, including screen reader users, is easy – just use display:none. Add visibility:hidden if you want to be extra sure that it is hidden, since Screen readers sometimes ignore display:none. However in some cases you want to hide something from sighted users without hiding it from screen reader users. In those cases you can use the off-screen and clip techniques. But what if you want screen readers to ignore content that is visible?

Posted on May 31, 2012 in Accessibility

Slightly older posts

Safer event handling with jQuery namespaced events

By namespacing events in your jQuery functions, you reduce the risk of interfering with other scripts when adding or removing handlers.

Posted on May 24, 2012 in JavaScript

CSS generated content and screen readers

CSS generated content is announced in some - but not all - screen readers, so use with care.

Posted on May 18, 2012 in Accessibility, CSS

iOS orientation change and automatic text resizing

There is a clever script that fixes the iOS orientation change zoom bug. Here is a reminder about a couple of issues you may run into when using it.

Posted on May 9, 2012 in CSS, JavaScript, iOS

Make sure your HTML5 document outline is backwards compatible

When using the HTML5 sectioning elements, make sure the document outline created by the headings is backwards compatible.

Posted on May 2, 2012 in Accessibility, HTML 5

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

As text columns become narrower, the risk of long words overflowing increases. Luckily you can use the hyphens and word-wrap CSS properties to prevent it.

Posted on April 23, 2012 in CSS

End tags, semi-colons and maintainable code

Relying on browsers to magically insert missing code, like optional HTML tags or semi-colons and curly braces in JavaScript, is not developer-friendly.

Posted on April 17, 2012 in Coding, HTML 5, JavaScript

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

The placeholder attribute is meant to give the user a nonessential hint before filling in a form field, not replace the label element.

Posted on April 9, 2012 in Accessibility, HTML 5, Quick Tips, Usability

More posts are in the archive