What is user experience?

Graphic of a male sitting behind a computer screen with the words web design on the wall behind him.Technology has advanced to a point where almost anyone can set up a website – no coding experience needed!  It’s easy to get carried away with glitz, glamour, flashing signs and a swinging carousel of images. This is where user experience, or UX, comes into play. And let’s not forget web accessibility. Many of us have something to do with a website. So whether we contribute to one, manage one, or are commissioning one, there are some basics to know.

First some statistics. Seventeen per cent of users will not return after just one bad experience. Forty-eight per cent of users are annoyed by sites that aren’t mobile friendly. 

The DreamHost blog has two articles, one explaining how UX works, and the other is about web accessibility. It’s a pity they weren’t joined up into one article. Accessibility is not an optional add-on. It should be considered from the outset of the initial design and be a continuous process for ongoing content. 

While the UX article focuses on “target audience” and forgets this audience might need accessibility features, it has some useful advice. No need to get too bogged down with detail here. It covers navigation, content, animation, and responsiveness.

The article, 10 ways to make your website accessible is a good start for anyone new to the concept. It covers many of the basics such as colour choice, adding descriptions to images, and text size. Avoid tables for presenting data because screen readers can’t read them unless they are coded correctly. An accessible site expands the potential audience and helps with search engine rankings.

See also Web accessibility techniques: A guide and the section on ICT guidelines on this website for more information. 

Editor’s note: We do our best with accessibility and rely on in-built coding with the free software we use to keep the site running. We receive no funding to run this service. However, we welcome feedback if you find specific difficulties with this website. 

Colour contrast checkers for web

The colours of the rainbow arranged as a wheelAlmost anyone can create a website or add content these days. It doesn’t have to be an IT specialist. One the most basic accessibility features is colour contrast. No matter what level of vision we have, we all need contrast. But how much contrast is enough? And what about colour combinations?

Vision Australia has a colour contrast analyser and instructions on how to use it. The analyser is a tool for checking foreground and background combinations. It also has a function to simulate certain vision conditions such as colour blindness. There is more information on their webpage. The contrast information is also useful for printed material.

For the more tech people, the Axess Lab website has links to seven free tools that help you measure color contrasts that meet the contrast requirements in the Web Content Accessibility Guidelines (WCAG). With almost everything in life being linked to the internet, it is important to make sure sites are fully accessible. Colour contrast is important for many with low vision, but accessibility does not have to equal boring. By going to the website you can see more on each of these seven free tools: 

Editor’s note: I recently saw a page with two sentences in large font, all upper case, in light green against a white background. Note that upper case is also difficult to read – it doesn’t make the information any clearer to the reader. Light green isn’t great either.

Don’t click here for web links

A graphic with six black hands with forefinger pointed each on a circular button.Writing “click here” to link to a web page or electronic document is intuitive for the writer. But not to all readers. This is particularly the case for people who use screen readers. Writing “click here” or “download here” requires the reader to make sense of the words before and after to get the context. This is workable when you can visually read the page. However, a screen reader is a machine and can’t do this for the user.

It’s hard for a user navigating the page audibly if the link text isn’t clear. They can’t be sure where the link will take them. When a link has a focus the link text is announced by the screen reader. If it isn’t created clearly it can be difficult to understand. Link text is clear when it makes sense on its own away from other text

Once you know how a screen reader works, it makes more sense. It makes even more sense when you hear a screen reader working. Online newspapers, such as The Conversation, are good at using clear link text.

CanAXESS blog has a seven minute video explaining why “click here” isn’t helpful and gives examples of how to avoid it.  The key information is in the first five minutes and the last two relate to the WCAG guidelines which don’t cover this very well.

 

AI, the web and picture descriptions

A laptop computer on a desk showing several pictures.
Picture descriptions are important

People who rely on screen readers or Braille displays like to use the internet in the same way as others. When it comes to images, this depends on remembering to use the alt-text feature to describe uploaded images. While many big websites do include alt-text, smaller ones often don’t – and there are a lot of bloggers. And social media is the biggest culprit. Don’t rely on AI to fix your picture descriptions.

The applications designed to describe images don’t do it accurately. The Chrome accessibility team at Google are working on this. The aim is to use machine learning to more accurately describe the millions of images that are yet to be described. The FastCo website has more information.

Applying alt-text to all your images means that screen readers don’t get the image filename or upload coding instead of something sensible. The added advantage is that when the image fails to load on, say, a phone, a sensible text appears instead of the image. Axess Lab has lots more information in a very readable format. Their website is a good example of how to write and design your posts for maximum readership.