Accessible Web Design
We believe that everyone, regardless of disability, should be able to access web pages. Incredibly, the large majority of websites (around 80%) still fail to meet accessibility standards.
How can It Benefit You?
Web accessibility doesn't only help disabled users, but it can also provide a number of benefits e.g. improve your search engine rankings, web page download speeds, simplify site maintenance and future proof your site.
What Does Building an Accessible Website Entail?
Ensuring your website is accessible isn't as hard as you would imagine. There are a number of steps that can be taken to make a website accessible.
- Page organisation. Use headings, lists, and consistent structure. Use CSS for layout and style where possible. Use structural semantic markup to aid navigation rather than for presentation effect this will help visitors with specialised software to understand the organisation of the page and to navigate through it. Reduce information overload by simplifying text and by ensuring a simplified, consistent design throughout the site.
- Use valid code. Make sure HTML code is validated against W3C standards. Not only does valid code make it easier for assistive technologies such as screen readers to 'understand' your web pages, but browsers and browsing technologies tend to prefer it too!
- Write meaningful ALT text. Label ALL images with ALT (alternative) tags; without ALT tags a website might be virtually unusable for a blind visitor. This also applies to all multimedia including audio, videos, applets, etc where captioning and transcripts should be provided.
- Use of Tables.Place column headings in the first row of a table and place row headings in the first column. If headings are ambiguous, use the HTML scope attribute to clarify.
- Make text scalable. Partially-sighted people need to be able to resize text. Internet Explorer doesn't allow the resizing of text if font-size is set in pixels (px) or (pt) instead use relative length units such as percent or (em) or use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within your web pages.
- Accessible navigation. Build your website so that the pages can be accessed using only a keyboard. Features such as ACCESSKEY and TABINDEX can make your pages easier to navigate. Ensure that the accesskeys you choose don't clash with keystroke combinations which have already been reserved by other applications. Skip links which bypass content and go to main navigation areas can also be helpful.
- Don't rely colour alone to convey information. There should also be some other form of visual indicator such as additional characters, images or font changes. Use high contrast colours for text. Use dark text on light backgrounds. For most people, this increases site readability. Also, consider that 10% of men are colour blind so red/green or blue/yellow combinations can potentially cause a problem.
- Ensure links make sense out of context. Blind people often skip through the links on a web page. This makes it vital that links make sense out of context. 'Click here for more information on our latest holiday offers' is a lot more useful to a blind web user than 'Click here' or 'Find out more'.
- Make forms accessible. All form fields should have 'prompt' text associated explicitly with them. These are called label tags. A web user can then click their mouse or pointing device on this prompt text to move the cursor into that form field. Use the HTML fieldset and legend tags to give structure to complex forms.
- Never use the HTML blink and marquee elements. For animated GIFs or other moving objects, the flicker frequency must be less than 2 Hz or greater than 55 Hz. But better to have no moving content at all.
- Provide an option to skip navigation on all pages. This will save screen reader users from having to repetitiously listen to the same navigation, and keyboard users from having to repetitiously tab through every item. Use hierarchical headers to provide the same benefit and to enable navigation through copy.
Think Inclusive Not Exclusive
By implementing the suggestions above, working to WAI guidelines and using semantic mark-up, a website can be easily accessible.
Web Dandy is a web design agency which specialises in accessible web design and development. Contact us for more information or to request a website accessibility audit.
