Online marketing Whether your web site needs search engine optimisation or just to be seen by google or yahoo, listing position is as important today as it ever was...
Read more
Web design guidelines
Understanding your layout and code
Think of yourself as the spider or crawling robot what do you see first and what order are the next most important areas on your page. Is it easy for the search engines to see? Is it built in frames? Are you using CSS to design your site and are your headline (h1, h2, h3...) visible and relevant?
We all want our website to be No 1 in the rankings but we have to become efficent at delivering our sites in such a way so it make it easy for the search engines to list them. There is no right or wrong way to go about it, in most cases it is trial an error. Here are a few ways of making your site more accessible and readable.
Why should you be concerned about accessible design?
A lot of people are affected by a disability and most will be affected by some form of disability at some stage in their life - it's bad design to exclude such a large audience from information provided on the web.
Accessible design is nearly always good design: it's not a bad thing to ensure that your pages are easy to read and navigate. Legal requirements: legislation guarantees 'comprehensive enforceable civil rights' for disabled people in pre- and post-16 education in England, Scotland and Wales. All designers of educational websites face a legal requirement to make their sites accessible to disabled users.
Who are you designing for?
Everyone - thinking about accessible design should help you make your site easier for all to use. Disabilities which may affect web access include those with visual, hearing, mobility and specific learning difficulties and seizure disorders. (Such users may also be using assistive technologies for Internet access). The technically-impaired, including those with slow connections, old computers, small screens and, simply, those in a hurry! At Dynamite Creative we have a firm grip on future technologies such as Ajax, Java etc but we must also consider those people with older technology.
We can't please everyone but we try.
Minimum requirements for accessible web pages
Points to check
Does your site comply with W3C standards 2008?
Provide alternative text for every non-text element on a web page: including images, image map regions, audio, video and multimedia.
Ensure that all information conveyed with colour is also available without colour.
Ensure that there is sufficient contrast between text and background colours, both for those with standard colour vision and the colour blind.
Stylesheets are a very effective method of controlling formatting and layout, but where they are used web pages should also be readable without the stylesheets.
If possible, avoid scrolling text and other dynamic content which may be hard to read; where necessary, provide text alternatives and keep these up to date when dynamic content changes.
Avoid any technique which may produce flickering effects on-screen.
Use the clearest and simplest language appropriate for a site's content.
If you use image maps, they should be client-side, should contain alternative text labels for each hotspot, and should also include plain text links elsewhere on the page as an alternative.
Tables containing data should contain clear row and column headers.
Do not use frames.
If you use applets, scripts or plug-ins, your site should still be navigable and should not lose any content when these are turned off or not supported.
Avoid layouts which produce columns of text on a page.
Other things to consider
Web authors should also consider the following points. Some only apply under certain circumstances; others are more general points of good practice in accessible web design. This information is also available separately as part of the accessibility check-list which you can print out for easy reference.
Points to check Does your site comply?
Clearly identify changes in the natural language of a document's text and any text equivalents.
If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page. The link to this accessible page should be from the top-left corner of the original page.
Use style sheets to control layout and presentation.
Use relative rather than absolute units in markup language attribute values and style sheet property values.
Do not cause pop-up windows to appear and do not change the current window without informing the user.
Provide information about the general layout of a site (eg, a site map or table of contents).
Use a consistent approach to navigation mechanisms, layout and other forms of presentation.
If you use tables for layout the table should make sense when linearised.
Separate adjacent links by non-link, printable characters (surrounded by spaces).
Place distinguishing information at the beginning of headings, paragraphs, lists, etc.
Validate Your Pages
If you do not (as most of us don't) have access to different assistive technologies, there are two very effective tools available on the web to assist with accessibility testing:
Help to build accessible pages
Here are some tools that I use:
HTML Tidy: A must have application for any HTML author; cleans up HTML and fixes mistakes and a host of problems and points up some accessibility problems. Has built in support for cleaning up HTML produced by Word 2000 and Word 97.
Bobby Accessibility Checker: Using Bobby will tell give you a good idea of how well your pages conform to the World Wide Web Consortiums Web Accessibility Guidelines. Using ‘Bobby’ is only a start it is not able to point to all your access problems and does not work correctly on sites that use Frames.
Lynx Browser: Always check your pages using a text browser; Lynx is the best.
Betsie: is the filter program used by the BBC to create an automatic text-only version of its website. There are other programs that can convert a CSS design based page to text only ‘on the fly’. We don't use it on this site as this is a business to business web site.
A-Prompt is a relatively new piece of software which is available as a free download and will run a series of automated checks on a web page for accessibility.