Guideline Tips for Developers

Spread the love

The complete (and extensively detailed) guidelines for Accessibilty can be found at http://www.w3.org/WAI/ but the following tips are in complete conformance to those guidelines.

Tips for Designing Accessible Web Pages

This is a rather long page but with some valuable tips. You will also find more help on the various markup languages on the Getting Started page and view sample code for the WAI checkpoints.

ALT text 

Every image should have meaningful ALT text. 
Convey the important information in the image and if it is a link, say so. 
Use simple text for simple images (e.g. “*” for a bullet, numbers for a numbered image, and a single space character or an empty string for invisible images that are typically used for spacing).

Longer descriptions of more complex images may be provided by using the LONGDESC attribute, or by placing a “d” next to the image and linking that to a page containing the detailed description.

If the image is essentially functional (e.g. a “Search Now” button) the ALT text should convey the function. In the case of the example given, the ALT text could be, simply, “Search Now” – a description of what the button looks like is unnecessary.

Use text fields for embedded objects, such as the comment records in GIF and PNG files.

A text based site map or index will help visitors get an impression of the layout of the site quickly, and will make it easier to navigate. Fully sighted users become lost on large sites too, so all your visitors will benefit from this.

Applets and Controls

Provide an alternate page that uses static text and graphics for displaying information, and standard links for input 
Example: For information displayed by an ActiveX control or Java applet, provide a page displaying the same information as HTML text. 
Use either LABEL or TITLE tags to associate a name with every control

Java applets can be added to pages and forms. These applets must follow the guidelines for accessible Java applets. If the applet was developed using Java 1.1.x and AWT components, follow the IBM Software Accessibility Checklist. If the applet is designed using Java2, follow the IBM Java Accessibility Checklist. Read more about this at http://www-3.ibm.com/able/notescheck62.html

Audio

Provide closed captions for all audio content that contains useful information or, less effective, provide transcripts for all audio content.

Background

Ensure that your chosen colour scheme can be overridden by the user’s browser settings. Some people have eye conditions that mean they can read only black on white, while others can read only yellow on black – if your design is flexible, everyone will be able to read it.

Colour

An important aspect of colour choice is strong contrast between foreground and background colours, which makes the text easy to read. This is even more important when considering the colour-deficient user. Read more about colour.

File Formats

Provide ASCII or HTML alternatives to any private formats, except when the material is only relevant to readers on specific platforms or with access to specific technologies.

Flash

Equivalent content for features that are inaccessible or unsupported is a key to making your site accessible. Users who cannot view Macromedia Flash content can still experience it using assistive devices such as screen readers, which interpret the equivalent content you provide.

By definition Flash is not accessible to the blind and it can be disturbing to partially sighted users. Before running your Flash movie always give the option to view or bypass a Flash movie. This will also reduce the downloading time of your site. If a user decides to view the movie they have opted to wait for the download.

Download the free Accessibility Extension kit at the Macromedia Accessibility page. 

Formatting

Don’t rely on specific fonts, colours, or sizes. 
Use real heading tags not just formatted text. 
Don’t require a specific window size. 


Don’t assume things will line up vertically because horizontal distances may change. Flash Equivalent content for features that are inaccessible or unsupported is a key to making your site accessible. Users who cannot view Macromedia Flash content can still experience it using assistive devices such as screen readers, which interpret the equivalent content you provide.

Frames

You can use the NOFRAMES tag to show a link to a page that doesn’t use frames. 
Be sure to label frames with the TITLE attribute

Image Maps 

Provide text links in addition to any image map, either in-line or at the bottom of the page. 
Use client-side image maps whenever the client supports them. 
Use TITLE attributes to name AREA fields in client side image maps.

Java

Java Script is well suited for accessible design. Because Java is object-oriented, it provides a mechanism for application components to export accessibility information to assistive technologies. IBM has developed guidelines for writing accessible applications using 100% pure Java script. The guidelines are available on IBM’s Accessibility home page.

Links

If a link consists only of the phrase ‘click here’, its function and destination will not be obvious if it is presented out of context.

Links should not be presented directly next to each other, as some access software will interpret a group of links as being one single link. Instead, separate links with text (e.g. the bar character ” | “) or a graphic.

If you have used graphics of text as links, provide text based links as well to accommodate partially sighted users who are using their browser settings to increase the font size. They may not be able to read the graphic versions of the links since these are unaffected by browser text settings.

Marquees

Avoid using scrolling marquees wherever possible; otherwise, provide an alternative page. 


Provide alternate pages with static text when the client has animation turned off. 
Never use marquees as links.

MultiMedia

If there is valuable content in your movie, provide a text alternative to that content. In dealing with issues of access associated with online multimedia NCAM’s web site has the accessibility solutions.

Navigation 

The TAB key moves between links and image map areas in the order they’re defined in the HTML- be sure it generally moves from left to right and top to bottom, but does not skip back and forth between groups of items. 
Use the TABINDEX attribute to specify proper keyboard navigation order when necessary.


Use the ACCESSKEY attribute to provide access keys for all controls, and for links that act like controls.

Object


Provide titles for most objects 
Use the TITLE attribute to provide user-friendly names for the following objects: A, APPLET, AREA, BGSOUND, BUTTON, CODE, COL, COLGROUP, DIV, EMBED, FORM, FRAME, H1-H6, IFRAME, IMG, INPUT, LABEL, MARQUEE, OBJECT, OPTION, SELECT, TABLE, TD (if appropriate), TEXTAREA

Style Sheets 

Make sure your page is usable when style sheets are turned off (strings aren’t duplicated, and objects appear in the correct order). 
If the page isn’t usable without style sheets, provide an alternate page, which doesn’t use them.

Tables 

Provide alternate pages that don’t use tables, except for simple tables where (a) no information will be lost or order changed when the table tags are ignored, and (b) text does not form multiple columns. 
Make sure that tables make sense when read from left-to-right, top-to-bottom. 
Use the TITLE attribute to provide appropriate names for rows and columns.
Use the TITLE attribute to provide appropriate names for individual cells when appropriate (that is, when the single cell serves a unique purpose, such as “Navigation Bar”).
A text-based site map will help visitors to get an impression of the layout of the site quickly, and will make it easier to navigate. Fully sighted people become lost on large sites too, so all your visitors will benefit from this.

Text

Avoid large blocks of italic text – this can appear ‘wobbly’ on screen, and is difficult for many people to read.

You don’t have to use a large font size on your page. Standard (medium) size text is fine – visitors to your site can adjust the text size to suit their needs by altering their browser settings. However, ensure that you use relative font sizes in your code, not absolute font sizes. Some browsers can’t override absolute font sizes.

Don’t underline large blocks of text. Some people find underlined text difficult to read. In addition, since underlining usually indicates hyperlinked text, it can be confusing for users if it is used where no link exists.

Capitalisation of whole sentences should be avoided, as many people find it difficult to read and IT COMES ACROSS AS IF BEING SHOUTED VERY LOUDLY.