The good, the bad and the ugly: evaluating website interfaces with your class (Part 2)

In part 1 of this blog post series, we looked at some activities to get your students critically evaluating the usability of websites on the internet. Usability problems are very real to all internet users because everyone has experienced the frustration of using a poorly designed website. In this post, we’re going to look at how website interface design can have a strong effect on specific groups of people.

Accessibility refers to how people with specific requirements interact with an interface. For example, they might have a disability, or be accessing the site through assistive technology. The question you should be asking is: are some groups of people going to find this website especially hard to access and use?

Not everyone on the internet is the same, not everyone has fine mouse-movement control, not everyone has 20/20 vision, and not everyone can hear audio instructions. A website with poor usability might cause frustration or make it slow to use. A website with poor accessibility can make it impossible to access for some users, completely excluding them from that information or experience.

Users with screen-readers

To get an idea of what the internet is like to use for some vision-impaired people, have your class try out some screen-reader software. Both Mac and Windows computers have a screen reader system built-in which you can set up and use for free. There’s nothing like hands-on experience for finding out how difficult it is to navigate around a site with a lot of links when you have to step through them one by one and hear what they all are. If the content or buttons are just pictures or icons with no words to describe them, then it’s impossible for a screen-reader user to know what it is. If spending a whole lesson on this is too much, check out this short video to get an idea of how they work.

One of the challenges of using a screen-reader is that it takes a long time to scan through a web page when reading out every single word in order from start to finish. Screen-readers have keyboard shortcuts to jump quickly between sections, headings, and links, so it’s important for a website to have a logical structure with clear headings. Well-labelled links which make sense even without reading the words around them make this process much faster. A sentence like “Click here to find out more about our product!” is not very useful since reading just the link text “Click here” does not tell you where the link goes. Imagine trying to find a specific link on a web page, but you have to listen through a list of 30 links and 10 of them just say “Click here”!

“Click here” links are frustrating for everyone, not just screen-reader users

When an image is included in a web page, it can optionally have ‘alternative text’ or ‘alt-text’ added to it. This is the text that a screen-reader will read, and also what will be shown if the image is missing. This alt-text should act as replacement information for the image, depending on what the purpose of the image is in the website. This could be describing the contents of the image or labelling the image as purely decorative with no informational purpose. A particularly bad accessibility problem is when text is displayed in image form with no alt-text version of the same information. This information is not accessible at all to the screen-reader.

While they are not reliably used across the internet yet, a standard is in development for adding additional labels to elements of a website to indicate their purpose to screen-readers or other accessibility software. This standard is called ARIA (Accessible Rich Internet Applications), and you can read more about it in the ARIA in HTML draft recommendations.

Visually accessible web design

Accessibility is also important to consider for users with low-vision, partial vision or colour blindness. Many users with low or partial vision require large high-contrast text to be able to read it. A website should be able to be zoomed-in to show the text larger on the screen but in many cases this breaks the layout of the website. In cases some, content may become hidden or buttons may be impossible to click. This is poor accessibility.

It’s strange that we often use red and green to indicate success or failure, and wins or losses, when a massive 6% of men (and 0.36% of women!) have difficulty distinguishing reds and greens, and that’s just the most common form of colour blindness. The website wearecolorblind.com has some great examples of sites that are hard to read for a person who is colourblind and a handy simulator to give you a sense of what it’s like if you are not colourblind. To avoid this problem in your own websites, use lighter or darker shades to make the colours more different from each other, but as a general rule always include other information such as words or shapes as well as the colour.

Generally speaking, making your website high-contrast with clear text and clear information makes it a better experience for all users.

Mouse, keyboard and touch interaction

Most computer interaction happens through a person’s hands by using a keyboard, mouse or touch screen and this is what websites are generally designed for. This can cause problems for anyone who has difficulty using their hands, even temporarily, due to a disability or injury.

Many conditions such as cerebral palsy, arthritis and Parkinson’s disease, mean that although they have use of their arms and hands, the user may not be able to control the movements very accurately. Moving a mouse or using a touch screen to click a tiny button or link can become a difficult and time-consuming task. The wrong buttons can easily be clicked or touched by accident, and a website which involves many clicks to accomplish a task can become unreasonably tiring.

Users who are unable to move their arms can use a mouth stick or head wand to press keys on a keyboard or use a touch screen. More modern technology enables eye-tracking or head-tracking to be used for mouse input. There are a range of other assistive devices which usually take the role of either a keyboard or a mouse. Just like with users who have difficulty finely controlling a mouse, larger clickable areas make a website easier to use. And, similarly to screen-readers, websites which can be navigated using only the keyboard improve the accessibility for users for whom keyboard-like input is easier.

Eye-tracking acts as a mouse input, and enables on-screen keyboard input.

Accessible audio and video content

Since most websites don’t rely on audio content for communicating important information, the web is generally accessible for people with a hearing impairment. Increasingly, however, text content is being replaced with video and multimedia content, which is not necessarily accessible to users who are hearing-impaired.

Including a sign-language interpreter in the video is the best way to communicate the same level of feeling and expression as a person speaking. Unfortunately, not all hearing-impaired people can understand sign language, hiring a sign-interpreter is costly, and even countries with the same spoken language have different sign-languages. Adding text captions to videos is by far the most popular option for making spoken video content accessible. Alternatively, for both audio and video content, providing a complete transcript of the spoken text is simple to do and makes content accessible where it would otherwise not be.

Providing text captions and transcripts for audio and video content is a great example of how improving accessibility makes the experience better for all users. Text captions and transcriptions make that content searchable, easier to find a specific section or quote, and more convenient for all users to access.

Class activity

It’s an eye-opening experience to have your class to put themselves in the shoes of different internet users. Try watching a video without sound and guessing what is being said or what is happening in the video. To simulate vision impairments try the NoCoffee Chrome extension and the Colourblinding Chrome extension.

And, of course, here’s a list for another website scavenger hunt! Either as a classroom activity or for homework, have the students find examples of each on this list of accessibility problems:

  1. An image with words in it (so a screen reader can’t see them)
  2. A link that says “click here” or something similar such that a screen-reader user can’t easily tell what the link is for.
  3. Small text, or text with low contrast to the background (often text over images is harder to read)
  4. A website using red and green to indicate information such as success or failure with no other way to see which is which
  5. A website which doesn’t work well when you try to zoom-in or zoom-out and some content becomes hidden
  6. Links which are small boxes or words where you have to use very small mouse-movements to click them.
  7. A website with video content which has no subtitles or transcript available.
  8. A form to fill out where there’s a strict time limit. A user who is slower at typing or mouse-input might find it impossible to complete the form in time.

Building accessible websites means having a deeper understanding of the structure behind the website, the HTML and CSS, which controls the keyboard navigation, and what a screen-reader sees. If you’re interested, try out Grok Learning’s Introduction to HTML and CSS course, which covers accessibility strategies as your students learn to build websites.

In this post we’ve done our best to cover a range of different strategies for evaluating and improving web accessibility. If there’s something that we’ve missed or you know of better strategies for making the web a more accessible place, then we would love to hear about it! Please let us know in the comments or contact us at info@groklearning.com.