- From: Stella O'Brien <smo-brien@lioness.demon.co.uk>
- Date: Thu, 27 Aug 1998 18:15:27 +0000
- To: WAI Education and Outreach <w3c-wai-eo@w3.org>
There is no formatting in this plain text version. The headings are not consistent with the later, shorter versions of the reference cards because I have not worked on this version since 11th August. This draft Basic Guide was presented to the Washington D.C. Webmasters two weeks ago, in conjunction with another paper of mine, "Top Ten Hazards of Accessible Web Design": both papers were received well. Title: Basic Guide to Accessible Web Design Author: Stella O'Brien, KO2 Contact: smo-brien@lioness.demon.co.uk Version: 2 Status: Draft Date last modified: 11 August 1998 Audience: general; html aware; concerned with issue of accessibility but not aware Purpose: overview of typical access problems; suggests techniques to address problems Contents 1 Introduction 2 Use meaningful alt text for pictures 3 Use alt text with applets and plug-ins 4 Provide keyboard access 5 Make text easy to read 6 Keep text stable to read 7 Provide easy navigation and links 8 Using frames and tables 9 Provide access to audiovisual media 10 Get more information 1 Introduction You have valuable information to share about yourself or your organisation. Why fail to reach interested customers when a few simple tips can make your site so much faster and easier to use for people with portable web devices, anyone with low bandwidth connections, or people with disabilities? Graphics, sounds, and moving images are all powerful information tools. Use them, but in such a way that your web site communicates effectively even when they are turned off. Following these simple and cost-effective guidelines can help you to achieve this. 2 Use meaningful alt text for pictures Good visuals are very powerful, but not everybody can see them. Text can be spoken or converted into Braille. Make the graphics on your pages accessible. Write a concise description of the picture and include it in the alt part of the <img src> tag. (If you have specified height and width for your image placeholder, please make sure that it does not hide the alt text). alt is used like this: <img src="cake.gif" alt="John's football-shaped birthday cake"> A version which does this <img src="cake.gif" alt="photo"> is accurate, but it is useless to anyone who can not see the photo. If you need to present important information in the form of a diagram, graph, pie chart etc., then remember that these can not be seen by some users. The complexity of this information might mean that you will need to provide a longer description as a suitable alternative, and this would not fit comfortably in an alt tag. Use the "rel" tag and the "d-link" so that the user can easily move to a more in-depth description by selecting the "D" link. For example, if you wanted to provide more details about John's birthday cake, put them in the file "cake.html" and do the following: <img src="cake.gif" alt="John's football-shaped birthday cake"> <a href="cake.html" rel=next title="Description of John's birthday cake">D</a> Selecting D takes the user to the fuller description. At the end of the description provide a Return link to take the user back to the image. 3 Use alt text with applets and plug-ins Some browsers don't support Java applets. Some users switch off Java or plug-ins to speed up download times or to avoid security risks. So, it is important to use alt tags and a "d-link" if you use Java or plug-ins to present important information (see above for use of "d-link"). <applet code=plantfood alt="[Animation: Plant food trial results]"> The text in the applet alt will be displayed in Java-enabled browsers if users have Java turned off. Browsers which do not support Java will ignore any <applet> tags, and their users would not know that there is anything there. You can fix this by providing a quick explanation and description as html text within the <applet tag>. <applet code=plantfood alt="[Animation: Plant food trial results]">Our plant food trials demonstrated that in controlled conditions plants which received our food are less prone to disease and carry up to 60 per cent more blossoms. </applet> A browser which supports Java, but has it turned off, will only display the text "[Animation: plant food trial results]". A browser which does not support Java will display the html content, "Our plant food trials demonstrated that in controlled conditions plants which received our food are less prone to disease and carry up to 60 per cent more blossoms". In both cases, the d-link will give easy access to a fuller description of the trial results. If an applet gathers information for a database then the author needs to provide alternative ways for the user to provide information such as an accessible form, or contact details. 4 Design for keyboard and voice access Not everybody can use a mouse or tracker ball. Many people find it faster to tab between form fields than to select each one by mouse. Make it possible to tab up, down and across the screen, using directional arrows, 'enter', and other keys to control the cursor. Some people can not use your forms or database, so always include an email address and further contact information for users. Not everybody can see your imagemap. Even when an imagemap is well- designed and striking to look at, many people find it quicker to follow the links with keyboard shortcuts rather than clicking on specific regions of it. Depending on the number of links, the user-friendly author can provide a) alt text in the area tags; b) a list of text links just below the image; or c) a link to a full list of links which is arranged in an alphabetical, or easily understandable way. <img src="welcome.gif" alt="Library resources list" usemap="#map1"> <map name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio Visual Lab"></map> People who use voice control systems need clear, distinctive link names and navigation aides to enable them to interact with a page successfully. If the names of links sound similar then it will be easier for the speech system to confuse the words and bring up the wrong links. 5 Make text easy to read Be clear in what you say and how you say it. Even for sighted people with big screens, it takes longer to read online text than print. Users scan text, picking out keywords and sentences and ignoring those areas which do not interest them. Many users find it difficult to manipulate long, scrolling pages. They want the text to be clear, short, and relevant. Provide summaries so that users know if they want to follow links or to read a document in greater detail. It is harder for blind users or people with small display screens to scan for interesting material. Visual scanning allows users to process various sources of information at the same time. Users of speech browsers or screen readers scan a speech stream to listen for cues to relevant information. Synthesised speech output constricts scanning for points of interest to listening to a linear, monotone output in which information is presented serially, a piece at a time. The author can help by using proper HTML markup to emphasise the structure of the page. Use <H1> for the top level heading; <H2> for the titles of the main body of text; <H3> and beyond for finer divisions of information. Use list tags to create lists and bullet points. Complex background images and colours obscure text and make it difficult to read for people with vision impairments or print disabilities. So do poor colour contrasts; white text on a pale grey background is difficult to read and to print. Some people need large fonts or a zoom facility to read a page more comfortably. Use relative sizing and positioning (e.g., a percentage of the default size) rather than absolute sizes or positions (e.g., pixels or points) for both fonts and graphics. 6 Keep text stable to read Screen readers can not read moving text. People with cognitive disabilities or vision impairments struggle to read moving text. Auto-updating of a page is dis- orienting for some people who use screen-readers. It is a mystery to users who have cognitive disabilities and do not understand why the page has changed when they did not request the action. Allow users to freeze movement. Request users' permission before refreshing a page. 7 Provide easy navigation and links Write brief, descriptive page title which reflects the name and hierarchy of the web site. For example. <title>acme | web design | access guide<title> In this way users always have an idea of where they are which is useful if they did not enter the site through the home page. Well written titles also make it easier to recognise pages in a history list or collection of bookmarks. Navigation is easier if every page links to the home page. The home page should offer users a choice of overviews of the site's structure and contents. Navigation aides should be consistent in name, style, and position throughout the site. Knowing that a navigation icon is a 'button link' can not help the user to do anything useful without further information as to what it does. For example <img src="pen.gif" alt="button"> <img src="openbook.gif" alt="button"> just tells the user that there is a button. If you tell the user what the button is for, then the link is meaningful. <img src="pen.gif" alt="signup"> <img src="openbook.gif" alt="place an order"> Some authors write unhelpful text links such as <a href="x">this</a> <a href="y">Click here</a> which read as "this" or "click here" and do not make sense out of context or when scanning quickly. Use meaningful link phrases: for example If you have any comments you can email us by clicking <a href="mailto:admin1@business.com">here</a> which gives the link "here". It is more informative and useful to write If you have any comments <a href="mailto:admin1@business.com">send email to John at admin1@business.com</a> for which the link reads "send email to John at admin1@business.com". 8 Using frames and tables Frames are difficult to design, navigate, or print effectively. Use frames sparingly, and only if you understand them very well, but otherwise do not use them. The source of a frame should always be an HTML file. If an image file or Java file is the source then there is no means to attach alt text or other useful alternatives which some users will need. Provide and regularly update a <noframes> option for browsers that do not support frames. Provide a title for each frame so that it is easier to understand the contents or purpose of each one. <frame src="nav.html" title="Navigation bar"> Bookmarking frames can be a problem. Keep the URL's correct by using target in your link. For example <a href=results.html target="_top"> forces the browser to replace the entire window with a new frameset, not just the currently selected frame. This reload means that the URL is now correct and that navigation actions behave appropriately. Do not use tables to manipulate page layout or to create multiple columns because these will not make sense when displayed in some browsers, or when interpreted by screen readers used by blind people or users with some forms of dyslexia. Use tables for data. If the tables are complex then you will need to provide a link to an accessible page where the data are presented in a linear manner, and which is updated every time there is a modification to the data on the inaccessible page. If complex data are to be presented then provide text alternatives which summarise the data, explain the interpretation, and allow access to the raw data. These alternative versions may also assist people with cognitive disabilities who need data to be presented to them in a different manner. 9 Provide access to audiovisual media Audio is a rich medium which is not available to deaf people, users in a noisy environment, or those who have the sound turned off. Provide a text version of sound or speech clips which stand alone, or which accompany a visual presentation. Include a description of all relevant sounds. Provide both audio and text descriptions of dynamic visuals such as movies, or animations. Use audio and text to make visual cues explicit. Draw attention to, and describe, significant action. Important auditory and visual information is now available to users who have partial or no access to the original material. 10 Get more information For further information, more detailed guidelines, examples, and techniques, see the WAI Page Authoring Guidelines at http://www.w3.org/TR/WD-WAI-PAGEAUTH This document is a working draft. It contains some basic tips based on current best practice and the 80:20 principle of cost and benefit. The recommendations change on a regular basis and vary according to the responsibilities of the web author. If you are mandated to design or maintain an accessible web site then contact an appropriate adviser. Stella O'Brien, KO2 email: smo-brien@lioness.demon.co.uk
Received on Thursday, 27 August 1998 13:24:26 UTC