1 / 8

Accessibility and Usability For Web Sites: An Introduction to Web Accessibility

http://www.ukoln.ac.uk/web-focus/events/workshops/eemlac-2005-01/. UKOLN is supported by:. Accessibility and Usability For Web Sites: An Introduction to Web Accessibility. Brian Kelly UKOLN University of Bath Bath. Email B.Kelly@ukoln.ac.uk URL http://www.ukoln.ac.uk/.

malina
Download Presentation

Accessibility and Usability For Web Sites: An Introduction to Web Accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://www.ukoln.ac.uk/web-focus/events/workshops/eemlac-2005-01/http://www.ukoln.ac.uk/web-focus/events/workshops/eemlac-2005-01/ UKOLN is supported by: Accessibility and Usability For Web Sites:An Introduction to Web Accessibility Brian Kelly UKOLN University of Bath Bath Email B.Kelly@ukoln.ac.uk URL http://www.ukoln.ac.uk/

  2. Background To The Web • World Wide Web developed by Tim Berners-Lee to: • Provide universal access to digital resources • Avoid problems of • Device dependencies: data islands on PCs, Apple Macintoshes, Unix systems, … • Application dependencies: data islands between MS Word, WordPerfect, Wordstar, … users) • Vendor dependencies: monopoly stifling competition and raising prices; patent holders seeking licence fees (cf. GIF) • User dependencies: data islands due to disabilities – e.g. visual impairments, hearing impairments, lack of motor skills, …

  3. Background To Web Accessibility • "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." • Tom Berners-Lee, <http://www.w3.org/WAI/> • W3C (the consortium responsible for Web standards) set up WAI (Web Accessibility Initiative) to enhance accessibility of the Web. Key deliverables include: • Web Content Accessibility Guidelines (WCAG): guidelines on creating accessible resources • Authoring Tool Accessibility Guidelines (ATAG): guidelines on writing authoring tools which will help to create accessible resources • User Agent Accessibility Guidelines (UAAG): guidelines on writing browsers which provide accessibility support

  4. Quick Tips For Web Accessibility See <http://www.w3.org/WAI/References/QuickTips/> Images & animations: Use the alt attribute to describe the function of each visual. Image maps: Use the client-side map and text for hotspots. Multimedia: Provide captioning and transcripts of audio, and descriptions of video. Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here." Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible. Graphs & charts: Summarize or use the longdesc attribute. Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported. Frames: Use the noframes element and meaningful titles. Tables: Make line-by-line reading sensible. Summarize. Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

  5. Accessible Web Sites • Accessible Web sites should: • Use compliant HTML: if a page is valid it is more likely to be displayed sensibly on a range of devices • Use CSS to define the appearance of HTML tags: this has several benefits: • Users can use their own style sheet or switch off the style sheet (e.g. colour scheme or text sizes cause difficulties in reading) • Web site owner can define appearance in small number (1) of CSS files and can easily change this file • Pages can change appearance on devices such as PDAs, digital TVs, etc • Provide textual descriptions of multimedia (e.g. ALT tags for images) • Comply with the letter and spirit of W3C standards: avoid proprietary extensions (e.g. BLINK, FRAME, etc.); avoid file formats (e.g. PDF, Flash, …), …

  6. Doesn't Everyone Use IE? • How do people with disabilities access the Web? Zooming In: Many people with disabilities have some sight and may need to zoom in in areas of a Web browser. It is therefore essential that Web sites don’t use fixed fonts, for example (even if this allows users to change a corporate look-and-feel). Speaking Browsers: Blind users may use a speaking browser which speaks words on the page. Note that speaking devices can't understand text contained in images – so avoid this (or give appropriate ALT text for images). Special pointing & selection tools: Users with physical disabilities may not be able to use a mouse. Therefore Web sites should be usable without a mouse. For example, a Web form should be designed so that tabbing moves the cursor in a sensible order. PDAs, Mobile Devices, Digital TVs, …: Users with physical disabilities may prefer use of PDAs or other mobile devices. And digital TV access may help a widening participation agenda And everybody doesn't use IE – increasing numbers are moving to Firefox (which featured in a leader column in the Guardian in Nov 2004)

  7. Checking Compliance • You need to be able to check that your Web site is accessible: • For auditing existing Web sites • To identify problems in your workflow processes • For acceptance testing • Techniques for checking compliance include: • Use of automated tools such as Bobby, WAVE, … • Manual testing NOTE Automated tools are not able to verify that Web sites are accessibility – only that they are not accessible. For example Bobby can report if images do not have ALT tags, but not that the ALT tag is meaningful. <img src="logo" alt="UKOLN logo"> > <img src="logo" alt="" > <img src="logo" alt="Bath Abbey"> <img src="logo" alt="a picture">

  8. Any Questions? • Any Questions?

More Related