| Ensuring your website is accessible isn't as hard as | | | | or (em) or use absolute size ([ xx-small | x-small | |
| you would imagine. There are a number of steps that | | | | small | medium | large | x-large | xx-large ]) or relative |
| can be taken to make a website accessible. | | | | size ([ larger | smaller ]) when defining the font size |
| | | | for a particular element within your web pages. |
| 1. Page organisation. Use headings, lists, and | | | | 5. Accessible navigation. Build your website so that |
| consistent structure. Use CSS for layout and style | | | | the pages can be accessed using only a keyboard. |
| where possible. Use structural semantic markup to aid | | | | Features such as ACCESSKEY and TABINDEX can |
| navigation rather than for presentation effect this will | | | | make your pages easier to navigate. Ensure that the |
| help visitors with specialised software to understand | | | | accesskeys you choose don't clash with keystroke |
| the organisation of the page and to navigate through | | | | combinations which have already been reserved by |
| it. Reduce information overload by simplifying text | | | | other applications. Skip links which bypass content |
| and by ensuring a simplified, consistent design | | | | and go to main navigation areas can also be helpful. |
| throughout the site. | | | | 6. Use high contrast colours for text. Use dark text |
| 2. Use valid code. Make sure HTML code is validated | | | | on light backgrounds. For most people, this increases |
| against W3C standards. Not only does valid code | | | | site readability. Also, consider that 10% of men are |
| make it easier for assistive technologies such as | | | | colour blind so red/green or blue/yellow combinations |
| screen readers to 'understand' your web pages, but | | | | can potentially cause a problem. |
| browsers and browsing technologies tend to prefer it | | | | 7. Ensure links make sense out of context. Blind |
| too! | | | | people often skip through the links on a web page. |
| 3. Write meaningful ALT text. Label ALL images with | | | | This makes it vital that links make sense out of |
| ALT (alternative) tags; without ALT tags a website | | | | context. 'Click here for more information on our latest |
| might be virtually unusable for a blind visitor. This also | | | | holiday offers' is a lot more useful to a blind web user |
| applies to all multimedia including audio, videos, | | | | than 'Click here' or 'Find out more'. |
| applets, etc where captioning and transcripts should | | | | 8. Make forms accessible. All form fields should have |
| be provided. | | | | 'prompt' text associated explicitly with them. These |
| 4. Make text scalable. Partially-sighted people need to | | | | are called label tags. A web user can then click their |
| be able to resize text. Internet Explorer doesn't allow | | | | mouse or pointing device on this prompt text to |
| the resizing of text if font-size is set in pixels (px) or | | | | move the cursor into that form field. |
| (pt) instead use relative length units such as percent | | | | |