When I used to think of accessibility, I would only think of screen readers and making sites accessible to those who can’t see them. But since then, I’ve learned a lot about the different ways people can have trouble accessing a site. Besides blindness, some difficulties include other vision problems, like color blindness or limited sight. They may also include other factors such as auditory or physical difficulties like deafness or inability to use a mouse to navigate.
Accessibility doesn’t only benefit those with disabilities, but benefits all. Keyboard accessibility, link context, and labels and instructions are all examples of some important accessibility features that we use without realizing it.
Keyboard AccessibilityFor someone that cannot use a mouse to navigate, using a keyboard to get through the site is a must. This includes tabbing and the arrow keys. Well-written HTML is a great way to make sure that there is a logical focus order through the site. If the HTML is structured well, this guideline may fulfill itself.
The BBC homepage is a great example of flow and focus order when tabbing through the site. It is logical, starting in the top left, and moving down the page. It stays within sections at a time so the user can follow along. They also have prompts to help the user skip sections.
Left: The Accessibility Help dialog appears after you tab off the BBC logo. Right: The blue focus outline shows the user where they are on the page while tabbing. On the next tab, it will highlight the category “football”.
Understandably, the average user probably won’t tab around a site like this if they don’t need to, but there is one area where I think a lot of people find it very convenient to do so: forms. When filling out a form, say for creating an account or filling out shipping information, the user is already using the keyboard to type. It becomes very natural for the user to tab from field to field. Another example is using a search engine and navigating the autocomplete suggestions with the arrow keys.
Using the Up and Down arrow keys to move through the list, and Enter to make a search.
Links without context I’m sure is something everyone has seen. Words like “click here” give no context as to what the link will lead to. Users want to know where a link will take them. It’s especially problematic for screen readers because they read out a list of links to help the user scan the page. Without link context, the user will have to listen to the whole page to figure out what the link might be pointing to.
An example of good link context is Wikipedia. There is no question about what you will find when you click one of the links.
Wikipedia also includes alt text for the links to help ensure the context is understood.
In this recent article from WIRED, the link contexts are much less clear. Of the five links within the article, only two point to sources and one is given poor context with the word “here”. The other links, while they do have context, are a bit ambiguous to all users as to where they will be headed. In this case, they point to related WIRED articles that give the user more information on the topic while promoting their own work.
Left: The link’s context is given in the sentence preceding the link text. Right: The link has ambiguous context. It seems like it would link to the Paperhouses project site but instead links to a WIRED article about the project.
Labels and Instructions
As people get used to patterns found online, there tends to be more experimentation with the design. An example of this is missing labels by form inputs. become a trend to use only placeholders to label inputs but this causes some accessibility issues. When you start typing in a field, the placeholder disappears and now the context of that field is lost. Screen readers also specifically need those labels to inform the user what the field is for. Without the label, that user is lost.
Float labels have emerged as a way to fix this issue. There are many examples on Codepen of different designs and animations. The issue still remains that screen readers need the semantically linked label and input combination, but these designs offer ways to save space on a page and make the interaction interesting for different users.
Instructions are helpful as well, one example being date format. Dates can be written many ways, so it’s very helpful to tell the user what the site expects. Southwest Airlines has very clear inputs right on the homepage for the user to quickly find flights. The date fields instruct the user on what is expected by pre-populating the fields and making it easy to enter information correctly by including a datepicker. The departure and arrival inputs, however, have no instructions. They instead invite the user to start typing and after a few letters it suggests airports based on what was typed.
While accessibility guidelines are aimed at those that need them, they definitely do not exclude any users. Everyone benefits from semantically correct HTML and good design.
Questions? Comments? Get in touch or tweet us your thoughts at @saggezza_inc.