As Developers, have we forgotten our past?

We have reached a plateau in development where everybody is trying to push themselves to their limits in what can be done with web technology. Quite often forgetting the troubles of developers in the past struggling to get simple browser standards.

Accessibility of websites seems to be disappearing from a lot of modern developers repertoire. We often forget with the glitz and glamour of node.js applications and our HTML5 attributes that people out there still have to use screen readers or have limited visibility, the list goes on for why accessibility is a must for all developers.

Another note I would like to make is that as developers we can use all the technology available to make really amazing visual website and applications. However, many developers often overlook the very basics of functionality and usability of a product. Without this, no matter how good it looks, it's effectively useless for a user.

Here are a collection of often overlooked practices that developers are being forgotten by developers:

Labels for forms

The popularity of using the HTML5 attribute placeholder has increased dramatically in the past year. The major problem is that developers have been using it for the wrong purpose. They are using it for the purpose a label was created, whereas the placeholder attribute is intended to give the user a small hint about what they should type into the input field.

i.e. An email input should have placeholder text like "user@yourname.com". Not have placeholder text simply saying "email".

This is the job of a label in both usability and in accessibility terms. Using a label will make users with screen readers to correctly identify what the following input needs from them. The common excuse for people using placeholder attribute in this was is that they don't want separate labels from input fields. There are many ways around the display of this using CSS3. See this codepen.

Alt attributes on images

This is a no brainer to most but is so often missed by developers when creating their app or website. Also, the content of the alt attribute is often something that is highly overlooked in our responsibility as a developer. An alt tag by its definition is

“The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).” W3C

This means that we should not just put a simple one word description saying image, etc. It should be something that describes the image, i.e. Woman eating apple. Not quite sure where that example came from, not the most popular image I have seen on websites, but you get the idea.

Another valuable reason to use alt tags on images is for SEO, not only do google penalise sites for not having alt tags, but you can get promoted for good use of alt tags that are relevant to the image and the content you are trying to promote to the user of your website.

Further Reading:

Comments