Accessible Web Page Content
Aims & Objectives
The aim of this document is to create accessible web page content.
When you have completed these exercises you should be able to: Add accessible text, images, image maps and Flash to your web pages
Pre-requisites This document assumes that you are familiar with the use of a computer keyboard and mouse, and Microsoft Windows-based products. All participants should be familiar with HTML and these tasks assume you are comfortable with creating web pages in a text editor.
Edition September 2003 (Revised 26/09/03) File 08a795fe67e9b676812f7b40196c6c06.doc Print Record This document was printed on 26 September 2003.
© Netskills, University of Newcastle 1 Document Information
Format Conventions The following format conventions are used in this document.
Computer input that you type is shown in a http://www.netskills.ac.uk/ bold Courier New font
Hypertext links to be followed are shown in underlined From the Netskills home page, select the link to Courier New font University of Newcastle
Computer output, menu names and options, buttons, URLs are Save, Go to, Refresh shown in a Courier New font
Text that you must replace is shown in Courier New Enter your username italics
Computer keys that you must press are in a Courier New
Successive menu selections are illustrated in Courier New Insert > Picture > From File font using arrows to indicate a sub-menu. In the example this would mean: select the File menu, then select Picture, then select From File.
Copyright © Netskills, University of Newcastle Copyright in the whole and every part of this Courseware whether in the form of a written manual, document, software program, service or otherwise belongs to the University of Newcastle upon Tyne ("the Owner") and may not be used, sold, licensed, transferred, copied or reproduced in whole or in part in any manner or form or in or on any media to any person other than in accordance with the terms of the Owner's Licence Agreement or otherwise without the prior written consent of the Owner. All use of this material is governed by the Owner's Standard Licence Agreement together with the appropriate Schedule. The following are available: A Standard Licence Schedule to cover all use including all for-profit use by any type of organisation and all use by non-educational establishments An Educational Licence Schedule for not-for-profit internal use only by a recognised educational establishment The Netskills logo and this copyright notice must be included in any copy or adaptation. Netskills is a trademark of Netskills, University of Newcastle
Contact Information
Netskills, University Computing Service, University of Newcastle NE1 7RU Email: [email protected] Phone: UK 0191 222 5000
© Netskills, University of Newcastle 2 Contents
Task 1. Download Files...... 4
Task 2. Text...... 5
Task 3. Organising Text...... 7
Task 4. Images...... 9
Task 5. Images as Links...... 12
Task 6. Design a Page...... 13
Task 7. Image Maps...... 14
Task 8. Multimedia: Flash...... 16
Appendix 1 Resources...... 18
© Netskills, University of Newcastle 3 Task 1. Download Files
Objectives To access the online resources area, which contains the files that will be used in this hands-on session. Method You will access the Netskills web site and locate the appropriate resource area for these hands-on tasks. Comments These resources are specific to this set of hands-on tasks. Each hands-on session will have a separate resources area so you should always refer to the first task in each section to locate the files you will need.
Task 1.1 You will now download some files from the Netskills web site that you will use in Tasks 2-5. Subsequent optional tasks will also specify files for download. In your web browser go to the following address: http://materials.netskills.ac.uk/resources/91accesscontent/ Move your mouse over the link assist.html and click once with the right mouse button. From the menu that appears select Save Target As (or Save Link As) and save the file to your own folder. Follow the same procedure and download the other files listed below – make sure you save html files with the extension .html dummy.html computer.gif joystick.gif trackball.gif
© Netskills, University of Newcastle 4 Task 2. Text
© Netskills, University of Newcastle 5 Objectives To create accessible text. Method You will download an XHTML page and create a style sheet for formatting the text. Comments Text is the basis of most web pages.
WCAG 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on black and white screen. [Priority 2 for images, Priority 3 for text] 3.3 Use style sheets to control layout and presentation. [Priority 2] 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
Task 2.1 Open assist.html in a standards compliant web browser, such as Internet Explorer 5.5+, Netscape 6+ or Opera 5+. In your browser, View > Source and note that there is a link to a style sheet which does not yet exist: Task 2.2 In a text editor, create a new page and add the following text shown below in bold: body{font-family:arial,helvetica,sans-serif;} Save the new file as text.css Refresh (or Reload) assist.html in your browser. You should see a change in the font of your text display. Screen font The sans-serif fonts are easiest to read on a screen. CSS Arial and Helvetica are specific fonts, both members of the sans-serif font family. Browsers and operating systems support different fonts, but all support some example of a font-family. Designers commonly specify a list of fonts in the same family, in order of preference, ending with the font family as a safeguard for a browser that doesn't support the specified fonts. Task 2.3 Add the following properties, shown in bold, to your style sheet: body{font-family:arial,helvetica,sans-serif; font-size:0.9em;} h2{font-size:14px;} Save text.css and Refresh (Reload) assist.html in the browser. Task 2.4 Use your browser to change the size of the text display. [In Internet Explorer or Netscape 6: View > Text Size > Larger]. Note that all of the text, except
text adjusts in size. The text has been specified using absolute units, the other text using relative units. Revert the text display to your preferred setting. Absolute vs Specifying text (and positioning) using absolute units, such as pixels (px) or points (pt), Relative units prevents the user from adjusting the size of the text in the browser and therefore is bad for accessibility. The W3C recommend the use of relative units, such as the em or % units. The em unit The em unit is relative to the font-size of the elements parent. If an element has a font-size of 0.5em and a child of that element also has a font-size of 0.5em, then the child's font-size will be 0.25 of the root font-size.
Task 2.5 Add the properties shown below in bold to text.css: body{font-family:arial,helvetica,sans-serif; font-size:0.9em;color:#FFFF00;background-color:#3399FF;}
© Netskills, University of Newcastle 6 h2{font-size:1.4em;} Save text.css. Reload (Refresh) basic.html in your browser. Colour and 1. If specifying colours then both the foreground and background-colours should be accessibility specified. 2. Use the web-safe colour palette in order to ensure that colours look the same on different platforms: http://www.w3schools.com/html/html_colors.asp 3. Remember the following users: Users with monochrome screens: use high contrast colours Colour blind users: avoid red/green combinations and use an online simulator to view your pages as seen by users with common colour disabilities. Dyslexic users may have problems with your colour combinations: the best colour combination can be quite individual so think of offering a choice of colours or teach users how to create their own style sheets. CSS Correct CSS requires writing colours using the Hexadecimal codes, found at the URL noted above.
© Netskills, University of Newcastle 7 Task 3. Organising Text
© Netskills, University of Newcastle 8 Objectives To organise text making it more accessible to users. Method You will use HTML tags. Comments People tend to scan read information displayed on a computer screen. Web page writers should organise their pages with this in mind.
WCAG 3.6 Mark up lists and list items properly. [Priority 2] 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). [Priority 1] 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2] 14.1 Use the clearest and simplest language appropriate for a site's content. [Priority 1]
Task 3.1 Edit assist.html, adding the code shown in bold and removing some of the
tags. The resulting code should look as follows:
ATs
Technology, both hardware and software, can be employed to help disabled people in certain situations. A range of such ATs exist for helping computer users, and some of these are shown below in relation to the disability that they can help.
Physical Disabilities:
- Blind and VI.
- Screen Reader software reads aloud information displayed on a computer monitor, including text in documents and information within dialog boxes and error messages. Screen readers can operate in different languages. Ecoutez en Francais?
- Mouse Alternatives.
- A variety of alternatives exist including a foot control mouse, head tracking systems and joysticks.
- Keyboard Alternatives.
- Expanded keyboards and ergonomic keyboards may be used.
Cognitive Disabilities:
- Learning Disabilities.
- Specialist software exists to provide an interface for people with visual, cognitive and motor disorders.
© Netskills, University of Newcastle 9 h2{font-size:1.4em;} dt{font-weight:bold;line-height:1.5;} Save text.css and Reload (Refresh) assist.html in your browser. Note that you could build up more elaborate presentation of your definition list using CSS but since the structure of the list is defined in the HTML this will be retained in browsers that do not support CSS. Task 3.3 Add the code shown below in bold to assist.html:
Assistive Technologies
Technology, both hardware and software, can be employed to help disabled people in certain situations. A range of such Assitive Technologies exist for helping computer users, and some of these are shown below in relation to the disability that they can help.
Physical Disabilities:
- Blind and Visually Impaired.
- Screen Reader software reads aloud information displayed on a computer monitor, including text in .. Save assist.html and Reload (Refresh) in your browser. Page content Page content should always be appropriate to the intended audience. Neither patronise users nor exclude then by overly complex language, use of acronyms and jargon.
© Netskills, University of Newcastle 10 Task 4. Images
© Netskills, University of Newcastle 11 Objectives To incorporate an image in a web page and make it accessible. Method You will use the alt and longdesc attributes and also a d-link. Comments Screen readers can only interpret text. Some users with slow modem connections may turn images off in their browser in order to speed up download times.
WCAG 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1] 14.2 Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. [Priority 3]
Task 4.1 In your editor, add the following code shown in bold, to the end of assist.html:
- Learning Disabilities.
- Specialist software exists to provide an interface for people with visual, cognitive and motor disorders.