Promotional Offer
Tuesday, 18 August 2009
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
Labels: accessibility, promotion, usability, user experience
HTML headings for Accessibility
Sunday, 16 August 2009
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. 
(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
Labels: accessibility, html headings, youtube
Colour Contrast / Color Contrast for Accessibility
Thursday, 13 August 2009
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
Labels: accessibility, color contrast, colour contrast
ALT and TITLE attributes for Accessibility & Web Design
Monday, 10 August 2009
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
Labels: accessibility, ALT attributes, TITLE attributes
Relative font sizes for accessibility
Sunday, 9 August 2009
I wanted to do a really quick post on the accessibility benefits of using relative font sizes in web design. It is something which is usually easy to implement, yet is still often overlooked by designers.
When presenting text on a webpage, there are various ways to specify the font size. Some argue it is best to leave the font size to the default size as specified by the browser, but for most web users this is likely to be too large.
Although widely supported by browsers, pixel sizes (px) are not accessible. They fix the size of the text. Points (pt) are another font size option, however, they are displayed inconsistently across different screen resolutions.
So, on to Percentages and Ems. These are relative measures rather than absolute. They are configured by the users font size, and can be adjusted using most browsers to suit the users needs. This basically means that if a visually impaired user needs to increase the size of the text in your website to read it comfortably... they can.
It is sometimes difficult however, to know exactly what percentage (%) font size to use to match up to a wireframe design, or pixel value (if you are converting directly). Therefore, this useful table below may help take out the guess work:
pixel
size (px) - percent (%)
10 - 77
11 - 85
12 - 93
13 - 100
14 - 108
15 - 116
16 - 123.1
17 - 131
18 - 138.5
19 - 146.5
20 - 153.9
21 - 161.6
22 - 167
23 - 174
24 - 182
25 - 189
26 - 197
(reproduced from diagram on Yahoo! Developer Network)
In a similar vein, I'm going to make a bold statement. Where possible for accessible design, use plain text rather than text included in imagery. This seems simple, and obvious, but it is still often overlooked... even by superb designers. If 'zooming' in on a page is necessary, then image's often become pixelated, often beyond recognition. I have worked with visually impaired Internet users who have needed to 'zoom in' to a webpage so much that only one or two letters are visible on their monitors- in this case the presentation of the characters is generally much clearer if its is a textual character written as plain text, rather than embedded in an image.
Please comment or drop me a line if you have any questions or thoughts on the topic.
In addition, if you need any help with the accessibility or user experience of your webpage, please get in contact with me directly via : Simplicity User Experience Optimisation.
Posted byCharlie M at 02:55 2 comments
Labels: absolute, accessibility, font, relative
What is your favourite Web Accessibility toolbar?
Monday, 3 August 2009
Accessibility toolbars / browser add-ons are great. Without fail, I use these tools everyday for both my web design and user experience & accessibility testing. They are always easily accessible from my browser- just where I need them. They're free too!
So... which are the best ones to use?
My personal favourites are the Firefox Accessibility Extension (1.5.53.0) which can be downloaded from : https://addons.mozilla.org/en-US/firefox/addon/5809, and also the Web Developer toolbar (1.1.8) available from https://addons.mozilla.org/en-US/firefox/addon/60.
The ever popular Firebug is also a great tool for my web design and CSS validation needs.
These toolbars just make life easier- easy resizing, links to code validators, easy view of ALT text, quick disabling of JS, quick outline viewer... etc.
What tools do YOU use for your user experience / accessibility testing and web design? Let me know!
Visit me at : Simplicity User Experience Optimisation
Posted byCharlie M at 05:05 0 comments