Accessibility

The Web should be made accessible to as many people as possible, regardless of any disabilities they might have.

Using a transparent image as an icon fallback

When you use an icon or other graphic instead of text for buttons, make sure there is real text for users who cannot see the image.

Posted on April 30, 2013

Making elements keyboard focusable and clickable

Either use natively keyboard accessible elements to trigger JavaScript interactions or make what you use instead mimic the appropriate native element as closely as possible.

Posted on February 12, 2013

Accessible custom checkboxes and radio buttons

How to use CSS only to customise radio buttons and checkboxes.

Posted on November 16, 2012

Using JavaScript to check if images are enabled

It can be useful to know if images are enabled in the browser, so that you can adjust your CSS and JS to make sure that the page is still usable even if images aren’t loaded.

Posted on November 1, 2012

An alternative to select elements as navigation in narrow viewports

Using a select element for navigation in narrow viewports is not an ideal solution. Here is an alternative technique that uses real links and is fully stylable.

Posted on June 8, 2012

Hiding visible content from screen readers with aria-hidden

If you want to hide visible content only from screen readers in order to give users a better experience, aria-hidden may be an option.

Posted on May 31, 2012

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

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

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

Skip links and other in page links in WebKit browsers

In page links do not work as expected (or as in other browsers) when activated by keyboard in WebKit browsers like Safari and Chrome.

Posted on March 9, 2012

Screen readers and CSS

Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.

Posted on November 17, 2011

JavaScript-created markup also needs to be semantic and accessible

Browsers, assistive technology and end users have to deal with non-semantic markup even if it is inserted by JavaScript functions.

Posted on November 10, 2011

An accessible, keyboard friendly custom select menu

A way of styling the closed state of select elements without sacrificing accessibility.

Posted on November 3, 2011

Please provide a usable fallback for Flash content

The number of people browsing the web without Flash Player installed is non-negligible, so if you use Flash it is worth your time to give them a better impression.

Posted on October 20, 2011

Using display:table has semantic effects in some screen readers

When you use the table-related display properties of CSS to get the display properties of a table, some screen readers will treat the non-table markup as a real table.

Posted on October 11, 2011

Screen readers, list items and list-style:none

Many developers expect screen readers to ignore visual styling of semantic HTML elements. They mostly do, but with list items their behaviour is hit-or-miss.

Posted on September 14, 2011

Block level links and accessibility

HTML5 allows links to contain block level elements instead of just inline elements. This can be useful but there are currently potential usability issues with screen readers.

Posted on September 6, 2011

Do not use display:none to visually hide content intended for screen readers

Hiding content with display:none hides it from all users, including those who use screen readers. Be aware of this when deciding how to hide content visually.

Posted on August 16, 2011

Accessibility in Mac OS X 10.7 Lion

A quick walkthrough of the accessibility improvements in Mac OS X 10.7 Lion that stood out most to me.

Posted on July 30, 2011

Adaptive Web Design (Book review)

In this brief and easy-to-read book, Aaron Gustafson does an excellent job of explaining what progressive enhancement is and how to apply it in your daily work.

Posted on June 17, 2011

Page navigation

Archive contents