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