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?
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.
CSS generated content and screen readers
CSS generated content is announced in some - but not all - screen readers, so use with care.
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.
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.
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.
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.
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.