Ten Tips for Accessible Websites : 10th July 2007



1. Validate your XHTML and CSS

Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.

2. Add alternative text for images

Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.

3. Make sure your site works without JavaScript

As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.

4. Use CSS to seperate content and formatting

As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.

5. Provide a high contrast style sheet

Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.

6. Ensure link text is descriptive

Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.

7. Add “Skip to content” links on pages

Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.

8. Ensure every form has label tags

Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.

9. Don’t open links in a new window

Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.

10. Make an accessibility statement

Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.




Comments and Discussion


On 21st November 2007 , andrew said:

As an addition to number 9, I'd also say to not frame the content. It renders bookmarks to be useless. Google does something like this when following a link from their mobile search results. That's bad.



Add your thoughts



Subscribe


Design Shack CSS Gallery RSS Feed Design Shack News RSS Feed Design Shack Email Newsletter Design Shack Twitter


Tutorial Archives






Sponsored By


PSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS.

GoodBarry - The best way for web designers to build online businesses, not websites for their clients. eCommerce, Email Marketing, Content Management, Integrated CRM, Reporting and Analytics and web hosting in one integrated solution.

ACS: Social Media Marketing & Search Engine Optimization Agency

Gooey Templates

NuBlue UK Web Hosting

Logo design, pre-made logo design and stationery

Search Web Jobs

Standard Advert

I'd like to be
inspired by:



Colour


Red Designs Blue Designs Green Designs Yellow Designs Brown Designs Orange Designs Brown Designs Grey Designs Multi Coloured Designs


Category




Layout


One Column CSS Layout Two Column CSS Layout Three Column CSS Layout Grid CSS Layout Other CSS Layout


I've got a
question...



What is Design Shack?

We showcase stunning CSS and Web 2.0 design, alongside resources and inspiration for you to succeed in the same way. We only offer the cream of great design, perfect for getting that spark of creativity going again.

Can you feature my site?

Of course - if it's up to the mark! Just fill in our simple form.

Can I help out?

We are looking for new people to help update and maintain the website alongside us. If you're interested, feel free to contact us.