User Experience and Accessibility

Reading Time: 2 minutes

As developers, part of our responsibility is figuring out how to take designs and ideas and translate them into fully functional websites or applications. But what many don’t understand is that being a developer is so much more than keeping up with the latest, coolest technology and trying to find a way to shove it into your current project. We need to keep user experience and accessibility in mind as well and find the correct balance.

As an example, let’s take the simple HTML5 placeholder attribute for text inputs. There are many cases where it’s been used to replace a text label on forms with the goal of presenting a normal boring form in a “clean” way. No. Don’t ever do this. If you don’t know what I’m referring to, here’s what it looks like:

The placeholder attribute is for providing the user an example of a valid value. Not field labels.


Presentation and user-experience goes hand-in-hand frequently, but not every time. The issue with the example above is that as soon as the user types a value in, the label that should be providing useful instruction has now disappeared and the textfield is completely out of context. Not so bad? Think again. You’ve now made it so much harder for users with short-term memory disorders to complete your form. Now imagine you had a form with 10 fields, and your form has indicated to the user that there’s an issue with the value in field “X”. It’s like asking someone to find a specific red car in a parking lot full of red cars.

Now let’s take a look at custom inputs. By default, form inputs like checkboxes, dropdowns, radio buttons are accessible in your browser. Screen readers and other assistive devices recognize these and are able communicate to the user what they do and how they should interact with them. If you’re thinking about replacing these inputs with divs and javascript purely for presentationNO. Don’t ever do that. You’re most likely not an expert on assistive devices and software. There are ways of “dressing up” existing form inputs to customize the way they look, it really depends on how much time you’re able to devote on doing so.

The focus on user-experience is becoming increasingly popular, and many are forgetting that coding for accessibility is still an important part of the job. Here in Ontario, laws have recently come into effect requiring that certain websites and web content adhere to WCAG 2.0 standards, you may also have similar laws where you are. So if you weren’t convinced before, I’m hoping that the new laws are at least making you look into it.

Helpful stuff: