Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information

Transcription

1 Web Accessibility Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information available using any web browser on any platform.

2 Inaccessible websites affected a number of user groups including: Visually impaired (low vision, colour blindness, blind) Users with hearing impairments or deaf Physically impaired (inability to use a keyboard or mouse and inability to make fine movements) Cognitive and learning abilities (Reading difficulties, dyslexia or memory loss)

3 Inaccessible websites affected a number of user groups including: Users with slow Internet connections Users on hand held devices such as mobile phones and PDAs Users whose first language is not English Users with old browsers, or browsers other than IE some sites render differently in Firefox than IE

4 Why Accessibility is Important? There are a number of reasons including: Ethical (Everyone has the right to have access to the website) Financial (Saves money (easier to maintain) prevents lawsuits) Legal (legislation requires websites to be accessible Disability Act, 2005; Equal Status Act 2000, 2004; Employment Act 1998) Increased number of people with disability (8% of the population in Ireland have a disability) Increased number of people using the web

5 How to make a website accessible? 1. Follow the available Guidelines when developing and updating a website The World Wide Web Consortium (W3C) has published a list of guidelines called the Web Content Accessibility Guidelines (WCAG 1.0, WCAG 2.0) (European Guidelines). The National Disability Authority (NDA Access IT Guidelines) (Irish Guidelines)

6 How to make a website accessible? 2. Evaluate the website by running it through a Web Accessibility Evaluation Tool which checks for conformance with WCAG 1.0, 2.0 Guidelines or Section 508 and other guidelines 3. Manually check the website to evaluate appropriateness of text descriptions (alt text ) for images

7 How to make a Website Accessible? 4. Involve disabled people and users with slow internet connections in the testing phase of the website s development 5. Test website using text browser, speech enabled browser or screen reader 6. Test website using various web browsers such as Internet Explorer (IE), Mozilla Firefox, Netscape to ensure the web pages render the same for all browsers

8 Web Accessibility Evaluation Tools A complete list of evaluation tools can be obtained from World Wide Web Consortium Web Accessibility Toolbar A-Checker ColorDoctor HiSoftware Cynthia Says Total Validator Wave A-prompt AccessValet AccRepair ADesigner

9 Web Accessibility Toolbar This is an excellent toolbar. It can be downloaded for free from

10 Web Accessibility Toolbar Features include: Toolbar updates every 24 hours Validate (provides link to W3C HTML/CSS validators, W3C HTML tidy (repair HTML), checks for broken links Resize (allows developers to view page layout at different resolutions e.g. 800x600) Images (displays the image along with its alt text aids manual inspection- evaluation of appropriateness of alt text)

11 Web Accessibility Toolbar Structure (allows developer to check heading elements, table structure, lists, divs) Tools (provides links to WAVE, ACCMonitor, Lynx-viewer) Magnify (between 25% - 600%)

12 Web Accessibility Toolbar The toolbar also provides links to WCAG 1.0, WCAG 2.0 and Section 508 Guidelines Accessibility Legislation W3C tool list Accessible Net RNIB-WAC Research-based Guidelines WebAim Accessify.com Juicy Studio Jim Thatcher.com Usable Web Wats.ca Resource Library Assistive software Web Access All of the above are useful resources!!

13 HTML /XHTML Validator W3C Mark up Validation Service (checks HTML, XHTML of web pages)

14 CSS Validator W3C CSS Validation Service (checks CSS and XHTML web pages with style sheets)

15 Alternative Browsers Alternative Browsers Speech enabled web browser Simply Web

16 Alternative Browsers Speech-enabled web browser Browse aloud

17 Alternative Browsers Lynx Text Browser

18 Common Problems Problem: Reason: Remedy: No <DOCTYPE> DOCTYPEs ( document type declarations ) are essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " dtd">

19 Common Problems Problem: Missing <alt> text for images Reason: Remedy: ALT tags allow visually impaired users who use screen readers to "hear" the content that other visitors see in the images. Also ALT tags can improve the search engine ranking of the page and make site navigation easier. Add ALT text that states the purpose of the image and avoid just translating the entire image content from a visual format to a textural one.

20 Common Problems Problem: <Table> tag used for page layout Reason: Remedy: Tables used for page layout cause difficulties for the blind or visually impaired who use screen readers to read the content of web pages. Screen readers read from left to right and if the table is not linearised the content will not make sense when read by screen readers. Table used for layout must be linearised. Do not use summary, heading <th> or any other markup attributes on a table used for layout. Check that the content makes sense using a text browser e.g. Lynx. Use CSS <Div> tag instead of <table> tag for page layout.

21 Common Problems Problem: Header tags <H1> nested in wrong order Reason: Remedy: Header tags are used to convey document structure. The proper use of Header tags facilitates page scanning by screen readers. There are six levels of header tags e.g. <H1> <H6>. <H1> is the most important heading level (largest) whereas <H6> is the least important (smallest). Using header tag also improves page ranking (Search Engine Optimization). <H1> should be the first header tag to be used on a page. Subsequent header tags must be in logical order e.g. <H1>, <H2>, <H3>, <H4>,<H5>,<H6>. Developers should not skip levels, e.g. <H1> followed by <H3>.

22 Common Problems Problem: Empty tags e.g. <H1> </H1> <li> </li>, <p> </p> Reason: Empty tags are bad practice and should be avoided. Screen readers alert the user of empty tags which can be frustrating. Remedy: All tags used should contain content!! Instead of using <p> </p> to create a blank line use <br />. Test for Empty Tags using WAVE or Web Accessibility Toolbar

23 Common Problems Problem: Absolute value <font size = 10px> used instead of relative value for font size, table width <td width = auto > Reason: Remedy: 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 absolute values are used it is better to use percentages (100%) rather than pixels (50px). Using relative values will ensure that web pages will render the same at any resolution, e.g. 800x600.

24 Common Problems Problem: Use of meaningless links such as Click Here, Read More Reason: A Link must make sense even if it is read out of context of the page. Using links such as Click here does not inform the user of the content they are about to view. Remedy: The link needs to be more meaningful such as More Information on Accessible Design

25 Common Problems Problem: Use of deprecated HTML such as <b>, <i>, <align><h>, <border>, <center>, <strike>, <u> Reason: Assistive technology may not be able to interpret deprecated HTML. HTML should be used to structure a document s information not used for presentation. Remedy: Use CSS to control the presentation of a document. Instead of using <b> to add emphasis to text use <H1>.

26 Common Problems Problem: Documents published in inaccessible PDF formats Reason: Remedy: 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. Test accessibility of PDFs using Full Check. HTML/XHTML should be used where possible.

27 Reasons why pages are inaccessible? Lack of knowledge / awareness Lack of resources Lack of budget Additional cost involved Time constraints Tendering process

28 Online Resources National Disability Authority (NDA) Centre of Excellence and Universal Design (CEUD) WebAim (Web Accessibility in mind) Web Accessibility Initiative (WAI) Adobe Systems Swedish Guidelines (VERVA)

29 National Disability Authority (Ireland) Established in 2000 Provides information on Web Accessibility such as disabilities affected by inaccessible sites, NDA Access IT Guidelines (Irish equivalent to WCAG Guidelines)

30 Centre for Excellence and Universal Design (CEUD) Provides resources such as advice on buying accessible IT(the accessible IT Procurement Toolkit), auditing website accessibility, developing and designing accessible websites Provides information on Universal Design (Design for all) and Accessible Design.

31 WebAim (Web Accessibility in Mind) Established in 1999 Non profit organisation within the Centre for Persons with disabilities at Utah State University Provides articles which introduce web accessibility, explains who it affects, discusses the guidelines, legislations in various countries and discusses design considerations

32 Web Accessibility Initiative (WAI) Develops WCAG 1.0, 2.0 Guidelines Provides introductory information on web accessibility Provides a complete list of evaluation tools and tips to achieve web accessibility

33 Adobe Systems

34 Adobe Systems Resources include documents such as: Creating Accessible PDF Documents using Adobe Acrobat 7.0 A Guide for Publishing PDF Documents for Use by People with Disabilities Use Full Check feature to check for inaccessible content in a PDF document or use an accessibility evaluation tool such as ACCVerify

35 Online Resources Swedish Guidelines (VERVA) are a useful resource: Provides information on the complete development lifecycle of a website and recommends accessibility evaluation tools to check for colour contrast, layout, etc.

36 Mailing Lists which may be useful for web developers to join: IRL-DeAN (Irish Design-for-all and e-accessibility Network) E-DeAN (European Design-for-all and e-accessibility Network) IDD (Institute for Design & Disability) EIDD (European Institute for Design & Disability)

37 Conclusion Web Accessibility is a multifaceted problem with technology being only one dimension of the solution. Training, legislation, advocacy, clear guidelines, greater understanding of accessibility would all be required to create an accessible world wide web.