The Aim of This Document Is to Create Accessible Web Page Content

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.

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 , , , font and enclosed in angle brackets

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

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

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 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

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 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:

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.

© 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:

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.

© 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:

Figure 4-1 Image with alt tag displayed as a tool-tip

This is not the purpose of the alt tag but does happen in some browsers. Screen Contents of the alt attribute will be read out as text content in the sequence of page flow Readers and will therefore be in context.

Figure 4-2 Use of longdesc in Netscape 6

Screen Most screen readers announce the link of the longdesc attribute, making the content readers available to users. Support for Support for longdesc is limited at present. Only Netscape 6 of the main graphical longdesc browsers and some screen readers support it, leading to many designers using the alternative d-link (description link). Task 4.5 Add the following code shown in bold to assist.html:

A d-link is a normal link and therefore supported by all browsers. It is replicating the information used in the longdesc attribute and visible to all users. Task 4.6 Edit assist.html removing some code including the contents of the alt attribute as follows:

Save assist.html and Refresh (Reload) the page in your browser. Screen readers read alt tags. When images are decorative, it is better to have an empty alt tag and not present the user with unnecessary content.

Objectives To make an image link accessible. Method You will use the alt attribute. Comments Images are commonly used as links in web pages.

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 5.1 Add the following code, shown below in bold, to assist.html:

Alternative mouse

Figure 5-4 Two Accessible Image Links

Both of your links are accessible. Image size Images (and multimedia items) are of a fixed size and may therefore be specified in absolute (not relative) units. Screen Contents of the alt tag will be read as part of the page content. readers A listing of links will show "Alternative Mouse" for the first link and "Joystick", the contents of the alt attribute for the second link. Either method is accessible.

Objectives To design a page utilising techniques from the previous tasks. Method You will download a basic page and add some formatting, images and links. Comments Read all tasks before you start.

Task 6.1 In your web browser go to the following address: http://materials.netskills.ac.uk/resources/91accesscontent/ Download the following files to your local folder: opera.html graph.html search.gif graph.gif Task 6.2 Modify the page opera.html, so that it demonstrate the following features:  Links to an external style sheet which defines the page formatting.  Text displayed in sans-serif font and with lilac as a background colour (hex code of #CCCCFF).  Include the two images (search.gif and graph.gif) in appropriate places in the page.  Make image search.gif link to the Google search engine (http://www.google.co.uk).  Include a long text description for the image graph.gif (this is in graph.html).  Ensure your page is XHTML-strict.

© Netskills, University of Newcastle 17 Objectives To make an image map accessible. Method You will add alt and title attributes to each hotspot in an image map. Comments Image maps are useful for links based on maps.

WCAG 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1] 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Priority 1] 14.2 Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. [Priority 3]

Task 7.1 In your web browser go to the following address: http://materials.netskills.ac.uk/resources/91accesscontent/ Download the file imagemap.html to your local folder. Task 7.2 Open imagemap.html in your browser.

Task 7.3 Open imagemap.html in your editor and add the code shown below in bold:

Click on the input device to learn about alternatives:

Task 7.4 Edit imagemap.html, adding the code show below in bold:

Click on the input device to learn about alternatives:

© Netskills, University of Newcastle 20 Objectives To learn how to make Flash movies as accessible as possible. Method You will examine several methods for increasing the accessibility of Flash movies. Comments The Flash format is not inherently accessible.

WCAG 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1] 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the visual track of a multimedia presentation. [Priority 1] 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1] 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2] 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1]

Task 8.1 In your web browser go to the following address: http://materials.netskills.ac.uk/resources/91accesscontent/ Download the following files to your folder: mosquitoKiller.html mosquito.html killer.html killer.gif mosquitoKiller.swf

Task 8.2 Open mosquitoKiller.html in your browser and view the page.

Task 8.3 Open mosquitoKiller.html in your editor. Locate the following code: This code is necessary for the inclusion of a Flash movie and should be copied, exactly as above, into web pages. Change the contents of the height and size attributes to specify the movie size and the value (name) attribute, which specifies the movie name. These are indicated in bold above. This HTML can be created automatically from within Macromedia Flash.

The Aim of This Document Is to Create Accessible Web Page Content

text adjusts in size. The

ATs

Physical Disabilities:

Cognitive Disabilities:

Assistive Technologies

Physical Disabilities:

Assistive Technologies – Alternative Input Devices

Assistive Technologies – Alternative Input Devices