List-based navigation menu generator

I have just stumbled across a generator to create custom list-based navigation menus. It allows you to modify the content, layout and presentation, and works really well!
Give it a go!

List-O-Matic : http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Posted byCharlie M at 06:28 0 comments  

Web Accessibility / Web User Experience for Old Users

Web Accessibility for Old Users is something which is often overlooked. Unfortunately, when we get older we often begin to loose some of our senses and mobility... vision declines, hearing becomes more difficult, movement can be reduced and cognition is often negatively effected. Therefore, Web Accessibility is likely to be important for most of us at some point! I will be writing about this topic at length in the near future.

Over the past few weeks I have been working with some older users, and have viewed them making use of the world wide web. I thought it would be interesting to share some very basic observations of how they interacted with popular websites. The observations are certainly not scientific, but I think they are useful to add weight to some of the important usability / accessibility / user experience guidelines that I promote.

---

Generally, I saw once again that simplicity really made the whole user experience more usable and understandable. The websites that were cluttered and poorly arranged caused issues almost immediately. Hence the name of my business! I really see no reason or excuse for cluttered, untidy and unfriendly websites.

Unlike the younger generation, the older users i observed were reluctant to 'click to see what it does'. If the destination of the hyperlink or button was not apparent, they would be hesitant to click. It is very rare that a user who has grown up with computers and the Internet would get stuck and unable to continue on an website... however, I saw that the older generation would actually give up within seconds if the website was not sufficiently obvious to operate.

The older users were very concerned about hackers and malicious behavior on the internet. They have read about internet fraud and crime, and are very cautious as a result. Over cautious in my opinion!

In a similar vein, the credibility of each website was scrutinized. When we were looking for local services (plumbers, etc) the unprofessional websites were discarded very quickly, particularly if they did not provide full and easy to find contact details.

Pop-up windows and dialogue boxes caused a lot of issues. Surprisingly, the Firefox download dialogue box caused frustration and confusion. When are pop ups really essential?

Some websites use very small fonts for their body text. The users did not know that they could zoom or increase text size, so they simply left the website. Silly design decisions such as very small fonts will turn visitors away as quickly as they came!

--

Anyway readers, I hope this quick post has been of interest. If you have had any similar experiences of working with the older generation I would be interested in hearing from you.

Posted byCharlie M at 04:43 0 comments  

Snow Leopard- Accessibility Improvements

I have been trying to decide whether to update my Mac to Snow Leopard. To be honest, there does not seem to be many major improvements which I will benefit from, and I am a little concerned about losing my settings and preferences... can anyone reassure me?

While researching the new Snow Leopard features I have seen several accessibility improvements, particularly for those with Physical Disabilities.

Here is a very quick rundown:

- Trackpad Commander
Enables new trackpad gestures.

"you can hear what’s on screen by touching the corresponding part of the trackpad; touch the upper left corner of the trackpad, and VoiceOver will tell what’s in the upper left of the screen. Drag your finger, and VoiceOver will tell you what's in the frontmost window your finger touches"

- Quick Nav
Allows screen navigation and clicks using keyboard arrow keys.

- VoiceOver
Improvements make VoiceOver more configurable than before.

- Mono audio for hearing impaired
Users who hear better through one ear rather than in 'in stereo' can set the audio to play in Mono.

For more detailed information, please see : http://www.macworld.com/article/142456/2009/08/snowleopardaccessibility.html

It is great to see that Accessibility is getting more focus in new software and operating systems... may the current trend continue!

If you have any thoughts or comments about accessibility, Snow Leopard or this post, please let me know!

Posted byCharlie M at 09:04 1 comments  

Promotional Offer

For a limited time, 'Simplicity User Experience' are offering upto 75% off selected services including:

- Accessibility Consultancy - expert advice, full website reviews, optimisation and testing.
- Full website 'User Experience' review and optimisation.
- Usability Consultancy - expert advice, full site reviews and usability optimisation.

We are also offering FREE accessibility optimisation services for selected non-profit organisations.

If you would like any further information, please contact us at info@simplicityuserexperience.co.uk or via the Simplicity User Experience website.

We look forward to working with you.

Posted byCharlie M at 05:40 0 comments  

HTML headings for Accessibility

One thing which is often overlooked in accessible webpage design is the correct use of HTML headings. The headings (coded as H1-H6 tags) are important for users who navigate webpages using screen readers, keyboard input, refreshable braille displays, voice commands and other assistive technologies. Headings basically enable users to navigate / scan a webpage more easily and quickly, by indicating the beginning of sections / sub-sections.

A screenreader survey by webaim suggests that 76% of screenreader users navigate using headings 'often' or 'all the time'. This just shows the importance of correct use of headings for accessibility design.

Graph showing use of headings from webaim survey

(image source : http://webaim.org/projects/screenreadersurvey/#headings)

There are several 'HTML heading' rules that I follow in my webdesign:

1) Only use one H1. This should be the main page heading. Opinion is divided whether this is required for accessibility, but in my experience, having more than one H1 causes usability issues for blind users.
2) Headings should not be skipped, i.e. H2 should follow H1, H3 should follow H2 etc.
3) Headings should be used to break up long articles.
4) Headings should be informative about the subject matter, yet short and scannable.
5) Headings should be used to structure the webpage, not to format textual elements.

If you have any general rules that you use in your everyday webdesign, I would be interested to hear from you.

Here is a video from youtube about the 'Importance of HTML Headings for Accessibility'. This is a really informative video, and well worth a watch:



(If you can't access the embedded video, please navigate directly to youtube by clicking the link here: Importance of HTML Headings for Accessibility

I hope this post has been informative, if you would like any additional information, please contact me directly via : Simplicity User Experience Optimisation

Posted byCharlie M at 01:34 0 comments  

Colour Contrast / Color Contrast for Accessibility


So, Colour Contrast.
Some users with cognitive or visual impairments can have difficulty distinguishing and making sense of foreground text against certain background colours.

I'm sure we have all been on websites where there is a terribly bold background pattern that prevents you from being able to read the text in the foreground. Many MySpace, Bebo and WYSIWYG personal webpages pages have this problem!

Displaying text which is legible is useful for everyone, but especially for those with special requirements.

The most important thing to ensure is that the contrast between the foreground and the background colour is sufficient to enable easy reading. The most extreme examples are black text on white background, or white text on a black background. There are algorithms to ensure that the contrast is sufficient, but I won't go into those just now (feel free to get in contact if you would like an explanation!). The general rule I like to follow as an initial test is to imagine if your page was presented on a black and white screen- would the text and imagery be suitably clear?

Another consideration should be your users with colour blindness. Colour blindness is basically the difficulty distinguishing between different colours. e.g. red and green may appear virtually the same to a colour blind users. Therefore, it is important that colour is not used as the sole differentiator for areas of your webpage. For example a statement such as "click on the red button to stop, and green to start", could be problematic for some.

Here is a useful accessibility tool that I have used in previous accessibility projects. It is called the Accessibility Color Wheel. Move your mouse over the 'wheel' to see different coloured text presented against a background colour of your choice. If it meets the recommended WCAG 2 contrast ratio, the tool displays 'OK!'. The tool can also be used to test for Colour brightness / difference. Give it a go!

Hope this brief description of colour contrast was useful. If you have any further questions, please don't hesitate to contact me directly at : Simplicity User Experience Optimisation.

Posted byCharlie M at 09:18 0 comments  

ALT and TITLE attributes for Accessibility & Web Design

I have been asked several questions about the use of ALT and TITLE attributes in webpage design recently, so thought I would write a brief summary here.

'ALT text' or 'ALT attributes' (nb. not ALT 'tags' as many people call them) should be included on all non textual elements of your webpage, such as images. The ALT attribute should be provided as an alternative textual description for all relevant images. ALT attributes are coded like this:

ALT = "textual description of image".

If the image in question is purely decorative, the best practice is to use an 'empty alt attribute', i.e. with no textual description:

ALT = "".

ALT text should be used to improve the accessibility of your page particularly for those using assistance technology such as screen readers. They also enable search engine crawlers to "see" your non-textual page content- potentially improving your search engine ranking.

The ALT attribute is required.

--------------------------------------------------------


The 'TITLE attribute', in contrast, should be used to provide additional information about the page element. Most modern browsers show the title attribute as well as the image (or other page element). The title description is shown in a yellow box when the user hovers over the element with their mouse. It is coded using:

title = "title text".

I like to use title text in three main situations:
1) When additional information about a image is required, such as source information or the photographer's name when using a photograph.
2) If a field in a form requires explanation this information can be given via a title attribute. I would also include this information in plain text above the field for completeness.
3) To explain more about a hyperlink- such as a warning if a link opens in a new window.

The ALT attribute is optional.

This is a very basic overview of ALT and TITLE attributes- if you have any questions or queries, please don't hesitate to contact me at via : Simplicity User Experience Optimisation

Posted byCharlie M at 05:29 1 comments