What is Web Accessibility? Who is affected by an inaccessible Website?

Transcription

1 What is Web Accessibility? Web Accessibility means that a website is accessible if all users regardless of disability can access the website and retrieve all the information available using any web browser. Who is affected by an inaccessible Website? Users with Mobility difficulties, e.g. the inability to use a keyboard or mouse and the inability to make fine movements Users with Hearing impairment, i.e., partial hearing or deaf Users with Vision impairments, i.e. low vision, restricted vision, or colour blindness Users with Cognitive and Learning disabilities, e.g. reading difficulties, dyslexia or memory loss Users with slow Internet connections Users of Mobile phones Users of Personal Digital Assistants (PDAs) Users whose first language is not English

2 How can I make my site accessible? The World Wide Web Consortium (W3C) has published guidelines called the Web Content Accessibility Guidelines (WCAG 1.0) and (WCAG 2.0) which help web developers create accessible websites. WCAG 1.0 guidelines were published in 1999 and consist of 14 guidelines with 65 checkpoints. These are specific items which must be followed to make your website accessible to all Internet users. Each checkpoint is assigned a Priority level. There are three Priority levels and Priority 1 is the basic requirement which must be satisfied in order for some users to access and use web documents. WCAG WCAG (Candidate Recommendation April, 2008)

3 The National Disability Authority (NDA) has adopted the Web Content Accessibility Guideline 1.0 (WCAG 1.0) from the Web Accessibility Initiative (WAI) and created its own set of guidelines known as NDA Access IT Guidelines. The NDA has divided the guidelines based on Priority levels. The division of the guidelines into Priority levels make them easier for web developers to follow. The NDA has simplified the guideline statements in order to avoid misinterpretation. Explanation and help for each guideline is provided. The NDA Access IT Guidelines can be located at:

4 How do I know if my site is accessible? To evaluate your website s accessibility you must run it through a Web Accessibility Evaluation Tool to check the website conformance with WCAG 1.0, WCAG 2.0 Guidelines or Section 508. Manual checks should also be undertaken. Human judgement is required to evaluate the appropriateness of text description (alt text) for image. Involving disabled people in the testing of the website for accessibility issues may be beneficial for an organisation before live implementation. If user testing is not viable for your organisation you should test the site using a text browser, speech enabled browser, or screen readers to ensure that there are no accessibility issues and web content can be rendered correctly by everyone regardless of disability.

5 Web Accessibility Evaluation Tools A complete list of evaluation tools can be obtained from World Wide Web Consortium Free Online Evaluation Tools Name Description Guidelines Formats License A-Checker (version 0.8.6) University of Toronto Online accessibility checker that tests web pages for conformance to various accessibility guidelines WCAG 1.0 Section 508 BITV Stanca Act HTML, XHTML Free ColorDoctor (version 2.01) Fujitsu Limited Checks accessibility from the aspect of colour. It converts any images displayed on the screen into grey scale or colours that a person who has colour blindness perceives. WCAG 1.0 Section 508 N/A Free

6 HiSoftware Cynthia says Web portal is a web content accessibility validation solution. Identifies errors in content. Validates one page at a time WCAG 1.0 Section 508 HTML, XHTML Free Total Validator (version 4.4) Total Validator in a 5-in-1 validation tool, comprising a HTML validator, an accessibility validator (WCAG and US508), a spell checker, a broken link checker, and the ability to take screenshots with different browsers on different platforms WCAG 1.0 Section 508 HTML, Java Free WAVE(version 3) WebAIM Exposes errors and highlights content where accessibility considerations require human judgement (e.g. WAVE exposes alt text so a human evaluator can determine whether it is appropriate for the image) WCAG 1.0 Section 508 CSS, HTML, XHTML Free

7 Free Online Repair/Code Modification Tools Name Description Guidelines Formats License A-Prompt (version 1.06) ATRC University Of Toronto Accessibility evaluation and repair tool Section 508 WCAG 1.0 BITV HTML, XHTML Free AccessValet (version 1.2) WebThing Ltd AccRepair (version DS2 2005/8.x) HiSoftware ADesigner Checks HTML and XHTML. Reports invalid markup and violation of accessibility guidelines. Allows testing and reporting for accessibility, privacy, metadata and usability standards Tests accessibility and usability of web pages for visually impaired and blind people. Examines degree of colour contrast on a page, ability to change font size, appropriateness of alt tags for image Section 508 WCAG 1.0 Section 508 WCAG 1.0 Section 508 WCAG 1.0 JIS HTML XHTML CSS HTML XHTML PDF SVG HTML XHTML Trial/demo Commercial Commercial Commercial

8 Web Accessibility Toolbar The Web Accessibility Toolbar is perhaps one of the best accessibility evaluation tools available. It was developed by Vision Australia and Web Accessibility Toolbar Consortium (WAT-C) on 27 th October It can be downloaded for FREE from The Toolbar works on Microsoft Windows (Internet Explorer 5+) and Opera Operating Systems. The Toolbar checks for updates every 24 hours!

9 Web Accessibility Toolbar Features include: Validate: The toolbar checks the HTML code of the current pages using the W3C HTML Validator ( It also checks the CSS code of the current page using the W3C CSS Validator ( There is also an option to use W3C HTML tidy ( which checks the HTML code of the current page and provides the option to view or download a repaired version of the page. The toolbar also checks the hyperlinks of a page to ensure there are no broken links using W3C Line Checker ( Other validation services provided by the toolbar include: WDG HTML Validator ( WDG Link Valet ( P3P Validator ( ) Resize: Allows the user to resize the current browser window to width and heights of 640 x 840, 800 x 600, 1024 x 768 and1280 x 1024 or to any width and height defined by the user. It allows developers to see how the page will render in devices such as mobile phones, PDA and other handheld devices. CSS: This option allows developers to disable the CSS from the current page and removes the style attribute from all page elements. The developer can also view the style sheet appropriate to the current page by using the option Show Style Sheet(s).

10 Images: The toolbar displays the images along with their alt text which allows the user to verify the appropriateness of the description used. If no alt text is provided for an image the following text is displayed NoAlt! and a red border is placed around the image. Using this option would help to eliminate the use of images without their alt text description. This is a priority level 1 requirement of the WCAG 1.0 guidelines which is one of the basic requirements for web accessibility. Colour: The toolbar renders the content of the page in black and white. It also checks the colour contrast on the page by submitting the URL of the current page to a third party checker such as Colour Contrast Analyser, Juicy Studio Contrast and Vischeck Colour Blindness Simulator. Tools: This option allows the developer to test the current page using third party accessibility checking tools such as The Wave, AccMonitor, Webxact/Bobby, Lynx-Viewer, Torqumeda, TAW (Test de Accesibilidad) and Juicy Studio Tools. The Lynx viewer is particularly useful because it allows developers to visualise the content of the page in a text browser to ensure that the content makes sense (logical reading order).

11 Structure: This option allows the developer to check the layout of the current page and it displays and checks heading elements, table structure, Divs, lists and frame elements. It also checks for Javascript, event handlers and accesskeys. Using this option of the toolbar would eliminate some of the issues identified in this research such as the incorrect order of headings on pages tested and the incorrect use of lists. It would also ensure that any tables used would be linearised. Magnify: Allows the user to zoom in and out (25% to 600%) on the content on the current page. This allows developers to check how the page is displayed to visually impaired users at different zoom ranges. Another feature of the toolbar is Simulations which places an image mask over the content of the current web page that simulates the effects upon vision experienced by people who suffer from Diabetic Retinopathy, Cataracts, Glaucoma, Colour Blindness and Macular Degeneration. It disables the mouse so that the developer can check the navigation through the pages using the keyboard or alternative access devices used by the blind or the physical impaired. The Refs option of the toolbar provides links to WCAG 1.0, WCAG 2.0 and Section 508 Guidelines and Accessibility legislation. It also provides links to Accessibility/Usability resources including W3C tool list, Accessible Net, RNIB WAC, Research-Based Guidelines, WebAim, Accessify.com, Juicy Studio, Jim Thatcher.com, Usable Web, Wats.ca Resource Library and Assistive software Web Access.

12 Other Useful Links Validators W3C Markup Validation Service (checks HTML, XHTML of web pages) W3C CSS Validation Service (checks CSS and XHTML web pages with stylesheets) Browsers Simply Web 2000 (speech enabled accessible web browser) Browsealoud (speech enabled web browser reads and highlights web content) Lynx (text browser)

13 Common Problems No Doctype Doctype is important because it defines the version of (X)HTML being used and ensures compatibility between websites, web browsers and assistive technologies. Properly formatted (X)HTML pages must contain a Doctype declaration at the beginning of each web page before the <html> tag Solution: There are three document types, Strict, Transitional and Frameset. Frameset should only be used when you want to use frames to layout your website. The following code should be added to the top of each web page of your website. This code must come before the <html> tag.

14 HTML DTD HTML Strict <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML Transitional <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML Frameset <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

15 XHTML DTD XHTML 1.0 Strict <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" XHTML 1.0 Transitional <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" XHTML 1.0 Frameset <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns="

16 Missing Alt tags There must be an equivalent text description for each image, animation, applet, frame or audio files or anchor used on a web page. The text description used must be appropriate for the image. It must convey the information an image displays. Do not use Graphic or Image for the alt text. If the explanation of information for the image is too complex to describe in a few words longdesc must be used instead of the alt text. Longdesc provides a link to the more complex description of the image. For images used only for decoration and contains no information such as spacers, bullets or lists use the null value for the Alt text (Alt= ), this will be ignored by most screen readers. However if the web developer adds a space to Alt text (Alt= ) this causes the webpage to fail accessibility tests. ALT text in HTML and XHTML documents In HTML the <img> tag has no end tag. XHTML requires each tag to be closed with an end tag.

17 Alt text in HTML web document <img src="hackanm.gif" alt="hacker at work" width="48" height="48" > Alt text in XHTML web document <img src="hackanm.gif" alt="hacker at work" width="48" height="48" />

18 Empty Alt text (Null value) in HTML web document <img src="spacer.gif" alt="" width="1" height="10"> Empty Alt text (Null value) in XHTML web document <img src="spacer.gif" alt="" width="1" height="10" />

19 Longdesc text in HTML web document East West North 0 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr <img src ="graph1.gif" longdesc="graph1.htm" alt=" sales chart."> Longdesc text in XHTML web document East West North 0 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr <img src ="graph1.gif" longdesc="graph1.htm" alt=" sales chart." />

20 Tables used for layout The blind and visually impaired use different types of browsers such as screen readers, speech enabled browsers, Braille or text browsers to access the web. These browsers read the source code line by line from left to right. If reading cell1, cell2, cell3, the content does not read in a logical flow, the information becomes difficult to retrieve for this group of users. Layout tables need to be linearised. The Web Accessibility Toolbar allows developers to linearize the web page to check the reading order of its content when viewed using alternative browsers. If the layout uses tables within tables this causes difficulties rendering the content of the page. It is important when using tables to include table headers <th> and table cells <td>. Screen readers or speech enabled browsers or a text browser such as Lynx should be used to test the page before live release to ensure the content is presented in a logical reading order. Use style sheets <div> for page layout rather than tables where possible. Style sheets provide a number of advantages such as being easier to maintain and faster to download.

21 <table> <tr> </tr> <tr> </tr> </table> <th><b> Heading 1</b> </th> <th> <b> Heading 2 </b></th> <td> row 1 cell 1 </td> <td> row 1 cell 2 </td> Heading 1 Heading 2 Row 1 cell 1 Row 2 cell 2 <table> table <th> column heading <tr> row <td> data cell Tables can use additional elements such as <caption> describe content of the table </caption> which comes directly after the <table> tag and helps text browsers and screen readers make sense of tables. Other elements include <thead>...</thead>, <tfoot>...</tfoot>, <tbody>...</tbody>.

22 <table> <caption> Detailed Table with header, body and footer usage </caption> <thead> <tr><td colspan = 3 > Table Header </td></tr> </thead> <tbody> <tr> <td> Row 1 Cell 1 </td> <td> Row 1 Cell 2 </td> <td> Row 1 Cell 3 </td> </tr> <tr> <td> Row 2 Cell 1 </td> <td> Row 2 Cell 2 </td> <td> Row 2 Cell 3 </td> </tr> </tbody> <tfoot> <tr> <td colspan = 3 > Table Footer </td> </tr> </tfoot> </table> Detailed Table with header, body and footer usage Table Header Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Table Footer

23 Table summary can be used to provide a summary of a table s purpose. According to W3C layout table should not use the summary attribute; it should only be used when tables display complex data. The summary is an attribute of the table tag itself. Use of table summary attribute <table summary="this table gives some statistics about web accessibility of 5 tested websites."> </table> Recommended Accessibility Evaluation Tools: The Web Accessibility Toolbar to check the Table Structure (Structure Option) For more information on tables check out the World Wide Web Consortium (W3C) Recommendations for tables

24 Header tags nested incorrectly HTML has six heading tags <H1>, <H2>, <H3>, <H4>, <H5>, <H6> <H1> is the most important while <H6> is the least. It is bad practice to skip a heading level <H1> <H3> <H1> -----<H2> has been skipped over!!! Each header tag should be preceded by a header tag equal to or one level up from it. <H1><H2><H2><H3><H2><H3> see: Heading tags should NOT be left empty <H1> </H1> <H1> Page Section 1 </H1> Recommended Accessibility Evaluation Tools: The Web Accessibility Toolbar to check the Heading Structure (Structure Option) WAVE Useful information can be obtained from:-

25 Using Absolute Values instead of Relative Values The use of absolute units instead of relative units causes problems for the visually impaired and users of smaller devices such as mobile phones and PDAs. The visually impaired need a facility to increase font sizes while users of smaller devices need web pages that are designed to be scalable, i.e. resized to fix the size of the viewing window. If the <table> tag is used to lay out a webpage and the developer assigns absolute values to the width attribute it requires users of smaller devices to scroll horizontally to view the content. If absolute values are used it is better to use percentages (100%) rather than pixels (50px) or points (12pt). Using relative values will ensure that web pages will render the same at any resolution, e.g. 800x600. It is better to use ems rather than pixels or points and use relative sizes such as smaller or larger.

26 OR H1 {font-family: Arial, sans-serif; font-size: 1.5 em} H1 {font-family: Arial, sans-serif; font-size: small} Useful information can be obtained from: Use Internet Explorer 6 for testing to ensure that all users are able to enlarge text-based content on the website. In view menu option change Text size to view the content using all available options, i.e. largest, larger, medium, smaller, smallest to make sure the content can be read and it does not disappear off screen which can happen if the layout does not adapt for increased text size. Recommended Accessibility Evaluation Tool Total Validator:

27 Using deprecated HTML Assistive technologies may not be able to interpret deprecated HTML. Future browsers support may not be guaranteed. HTML should be used to structure a document s information not used for presentation. HTML should be used to structure a document s information not used for presentation. Deprecated HTML tags include: <applet>, <u>, <strike>, <center>, <basefont>, <font>, <menu>, <isindex> and <dir> Deprecated HTML attributes include: <b>, <align>, <border>, <bgcolor> Useful information can be obtained from: Recommended Accessibility Evaluation tool: Web Accessibility Evaluation Toolbar (Source Option Deprecated HTML)

28 Using Meaningless links such as Click Here, Read More A Link must make sense even if it is read out of context of the page. Using links such as Click here or Read More do not inform the user of the content they are about to view. Clear informative links help users retrieve information quickly and prevents time wasting viewing content that does not interest them. It also benefits the blind and visually impaired who use screen readers to tab from one link to the next in order to get an overview of the page. Instead of using Click here use Information on WCAG 1.0 Guidelines. Avoid using duplicate link phrases (Click here) on the same web page because users will be unable to tell which web page will open when clicking on the link. If using duplicate link phrases web developers should use the 'title' attribute to distinguish between the different links.

29 Useful information includes: Recommended Accessibility Evaluation Tool: Total Validator: Links to documents When linking to a document that is in other formats than HTML/XHTML it is good practice to include document format and file size, e.g. Application form for tax relief on tuition fees (PDF, 39KB) Links to other websites It is good practice to name the organisation you are linking too, e.g. The Department of Transport

30 Using inaccessible PDF to publish web content Untagged PDF documents cause problems for users who depend on screen readers to interpret the content because the screen reader does not know which part of the content to read first. It also can cause problems for mobile phone users who will need to have Acrobat or Adobe reader software in order to view the file. Tag PDF documents to indicate the structure of the document, such as headings, title, lists (similar to markup for HTML/XHTML). Tagging tells screen readers which part of the document to read first. Developers can check the reading order of their document by turning on the Read Out Loud feature or using the Reflow view. They can also run an accessibility Full Check to search a document for inaccessible content using Acrobat 7.0 professional and TouchUp Reading order to fix problems A PDF document scanned from a piece of paper is seen as an image and needs to be converted using OCR to convert the document from image to searchable text.

31 HTML/XHTML should be used where possible to publish web content. PDFs should only be used for: documents intended to be read from print outs documents that do not change documents that are required by law to be presented in a particular way documents that contain many tables (Verva, 2006) Useful information can be obtained from: Recommended Accessibility Evaluation Tool: Full Check Acrobat 7.0 ACCVerify

32 Use clear and simple language for the content Avoid using jargon or overly complex language for a website s content. Use simple plain language and do not present the content in large blocks of text. Content should be presented in a clear and concise manner. This will benefit all users especially: Users whose first language is not English Users suffering from cognitive or learning difficulties Check the readability of your website s content by copying content into Microsoft Word Check Spelling & Grammar Options Show Readability Statistics

33 Microsoft Word checks readability using Flesch Reading Ease and Flesch-Kincaid Grade Level. The higher the score the easier the document is to read and understand. Useful information can be obtained from: Recommended Accessibility Evaluation Tools: Web Accessibility Toolbar (Tools Juicy Studio tools- Readability Test) Juicy Studio Readability Test:

34 Provide transcript for audio files If audio files are used, provide a text equivalent to ensure that the content is accessible to the deaf or those with partial hearing. Do not use colour alone to convey information Do not use colour only for mandatory fields on a form because users who are colour blind or users who depend on screen readers to read content (non-visual) would not be able to distinguish which fields are mandatory and which are optional. Useful Information can be obtained from:

35 Create contrast between foreground and background Developers need to ensure that there is a good contrast between the colour of text and the background colour otherwise people will have difficulties seeing the content on the web page. Black text on a white background would be a suitable combination to use. White text on grey background would cause difficulties for some users. Recommended Accessibility Evaluation Tool: Web Accessibility Toolbar (Colour)

36 Other Useful Tips:- Ensure your mark-up language (HTML/XHTML) is valid by using the W3C mark-up validation service Have a consistent navigation style throughout the website - use a breadcrumb trail to let the user know which web page they are currently on, e.g. Home>Finance>Budget. The example indicates to the user that they are viewing the Budget webpage. Avoid using moving/blinking text as this may cause seizures Provide <noscript> tag for javascript tags used <script type = text/javascript > Use Meta Data to provide information for search engines and users, such as when the website was created, updated, key words (to help page location). Dublin Core provides a list of attributes which can be in the metadata of web pages

37 Useful Resources: National Disability Authority (NDA) and Centre of Excellence and Universal Design (CEUD) WebAim (Web Accessibility in mind) Web Accessibility Initiative (WAI) Adobe Systems

38 Swedish Guidelines (VERVA) Juicy Studio - Readability test Web Standards Project Jim Thatcher AccessibleNet.org