Category Archives: Visually Impaired

Usability Issues of Adding Video to a Website

Posted on by
2

Using video in a website is a whole issue, there are several usability problems we have to take care of at the moment of designing a website. I would like to tell you about a website I launched recently: it’s the Biccu Table website, dedicated to the presentation of a table design.

The Biccu Table website needed to be very graphical inorder to easily explain how the concept works and what is the table for (it’s a table for children). So we went for a video, making it the center of the website. Of course this brought some problems to the design…

 

The Biccu Table Website Screenshot

 

Technical Issues

We got a few messages from users (actually 2) saying that they were not able to see the video. One thought that an Apple computer was needed and the other one said that the computer crashed several times during playing time. In our case this was a minimum amount of complaints in comparison to the big amount of positive feedback. But this is a warning, if you are targeting poorly technically-skilled users, keep in mind that playing video represent a challenge for some of them.

 

The Text

Every video, specially the ones with sound, should have an explanatory text giving information to the people that are not able to see the video (for example, visually impaired ones or for technical reasons). In our case, we noticed that the people were concentrated on the video only. Was that the desired effect? Great! For us, this was fine as the images were clear enough.

 

Too Long is Boring

Initially the videos we placed on the website were longer. We noticed that users were excited at the beginning but bored at the end. So, keep videos short.

 

Embedded Third Party Videos

Video players like the YouTube one are very popular and using them might improve usability, most users know how to use them. For us it was not an option, we wanted to have videos without ads, without external links and without any external branding.

Accessibility Quick Tip 3: Text Equivalents for Multimedia

Posted on by
1

If possible, a text equivalent should be provided for all visual information in a website, like video, music and interactive graphics. There are several reasons why a description text should be included in a website design.

 

- Old browsers might not be able to display some multimedia files

- Some browsers might not have the necessary plugins and the user might not be able to update it (or might not want to)

- Impaired people could have problems interacting with multimedia

- Visually impaired people could need a text version of the multimedia file to be read by web readers

- Not every body has a high speed internet connection to download multimedia files

 

Why should you care?  Improving usability helps everybody surfing your website, not only the impaired ones. Imagine that you trying to teach something through multimedia content, like a video; giving text explanation of what is going on in that video could improve the understanding of the idea you are trying to teach.

 

The BBC makes a good job providing an advance text to tell users what’s in the video. Unfortunately the BBC does not give an explanation about the video itself, if the user is not able to play the video no content would be delivered at all.

BBC Video Example

 

Most Cnet News videos and photo slides have more than decent descriptions of what’s going on there.

Cnet Video Example With Explanation Text

 

An image or video says a lot, but you could add much more value to that if you provide equivalent text for that media. At the end, if the user is able to see that media anyways, the text will increase the understanding of the message you are trying to deliver.

Accessibility Quick Tip No. 1: Alternative Text

Posted on by
Reply

Last Monday I wrote an article about the Quick Tips to Make Accessible Web Sites of the Web Accessibility Initiative of the W3C. I’ve promised to go through the quick tips, here is the first article.

"provide a text equivalent for every non-text element…"

The first tip is the one that recommends to provide a text equivalent for every non-text element, like an image, a video or a sound. I know, I don’t have to teach you about "alt", you know that, but many designers don’t use it.

alt="This is the alternative text!"

Alternative text is important for the impaired people surfing the web with screen readers, screen magnifiers or voice recognition software. Keep in mind that alternative text should not only be there but it should also be clear and representative of the content that is replacing.

Implementing this technique takes time but they improve the whole website usability, which means that users will feel more comfortable using the site (this means more visits and more money!). Users not always have the last computer with the last browser so it could be that many of your customers will be seeing the alternative text instead of an image, video or sound.

 

Google Checkout Logo Example

 

Google places an alternative text for the Google Checkout logo, without it a user that can not see images would get the incomplete phrase "Show ___ items only". You might also notice that here the alternative text "Show Google Checkout items only" could also help users seeing the image but not understanding this combination of text and image "Show [Google Checkout logo] items only".