Correct use of tabindex

Definition of tabindex from w3.org:

This attribute specifies the position of the current element in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.

In general you shouldn’t need to explicitly set the tabindex of an element on a page, however there are a few exceptions to this Continue reading

Accessible HTML video as a background

Today I got a comment on Autoplay is bad for all users which asked:

So why does this high-traffic site designed by a former top-Google UX designer use it?

The comment has linked to a page which has video as a background element playing underneath the introduction text and call to action button, the images are moving but there is no sound on page load. At times this apparently important information is completely invisible.

Using video as a background is on the increase so it’s important to know how to make it accessible for everyone. Continue reading

The placeholder attribute

Translations: French

For years designers have overlaid labels onto input fields in order to save screen real-estate. As front-end developers we implement this using absolute positioning and event handlers to move the label offscreen once the user has focused into the field. User focuses; label disappears.

The placeholder attribute was introduced in HTML5 and has since been misused in order to replicate the functionality described above. Let me set this out very clearly before we move on, the placeholder attribute IS NOT a replacement for a label. Continue reading

Autoplay is still bad for all users

Just over three years ago I wrote an article called Autoplay is bad for all users. It was written a few months after WCAG 2 became a formal recommendation but before HTML5, particular the video element, had really gone into mass production.

Much, if not all, of that article still holds true today but there are a couple of points to add to it. Continue reading

Assistive technology

If you develop accessible websites it’s worth knowing how people will physically interact with them. Most of the software, peripherals and hardware described below are to assist people with visual and motor impairments. Continue reading

Web standards content is platform agnostic

A while ago I wrote ‘It’s not HTML5! But that’s ok’ and then I finished a web standards version of The Guardian’s interactive in order to prove they do not require Flash. So when I saw I had been mentioned on The Guardian website’s technology section I was excited! Continue reading

Why we should support users with no JavaScript

Why should we want to support users that, for whatever reason, have Javascript disabled? I had found it difficult to answer this question in a constructive way, whilst also being backed up by research. This post aims to give you some reasons why we should still be supporting users without Javascript. Continue reading

WAI-ARIA to enhance form validation

As a follow on from WAI-ARIA states and properties: Practical examples, I wanted to write up a bit more of what I’ve been adding to my current project. These examples all fall under how to cope with form validation and giving assistive-technology AT a view of what is going on. Continue reading

WAI-ARIA states and properties: Practical examples

I’ve been trying to include some WAI-ARIA into the project I’m currently working on. Luckily for me I’m using jQuery’s UI dialog and autocomplete plugins and they come with ARIA states and properties straight out of the box! Adding ARIA to my own UI widgets led me to conclude that it’s quite tricky to get right. Continue reading

Why does a blind user need to know about different areas on a page?

Today, the web accessibility community have been getting frustrated with a comment Ian Hickson wrote in reply to a bug report ‘No alternative text description for video key frame’ in HTML5. Continue reading

The accesskey attribute – do we still need it?

The accesskey attribute has been part of the HTML specification for over ten years and its purpose is to give keyboard users a shortcut to access a specific area of the page or to jump to a different page. In HTML5 the accesskey may be used on any element, but do web developers still need to use it? Continue reading

Front-end developer essentials – Accessibility & web standards

This is the second in a series that should form the building blocks to being a good all-round front-end developer. Previously I explained the basic ideas behind user interface design and here I’ll discuss why accessibility and web standards are important. Continue reading