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

(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

(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

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)

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

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

http://www.w3.org/WAI/ER/tools/complete

Web Accessibility Toolbar

A-Checker

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)

(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

(13)

HTML /XHTML

HTML /XHTML Validator

Validator

W3C Mark up Validation Service (checks HTML, XHTML of

web pages)

(14)

CSS

CSS Validator

Validator

W3C CSS Validation Service (checks CSS and XHTML web

pages with style sheets)

(15)

Alternative Browsers

Speech enabled web browser

◦ Simply Web 2000

(16)

Alternative Browsers

Speech-enabled web browser

◦ Browse aloud

(17)

Alternative Browsers

Text Browser

Lynx

(18)

Common Problems

Problem:

No <DOCTYPE>

Reason:

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.

Mozilla, IE5/Mac, and IE6/Win.

Remedy:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict. dtd">

(19)

Common Problems

Problem:

Missing <alt> text for images

Reason:

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 images. Also ALT tags can improve the search engine ranking of the page and make site navigation easier.

Remedy:

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:

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 will not make sense when read by screen readers.

Remedy:

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:

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 heading level (largest) whereas <H6> is the least important (smallest). Using header tag also improves page ranking (Search Engine Optimization).

Remedy:

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

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 smaller devices need web pages that are designed to be scalable, i.e. resized to fix the size of the viewing window.

Remedy:

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 user of the content they are about to view.

Remedy:

The link needs to be more meaningful such as “More Information on

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

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 to have Acrobat or Adobe reader software in order to view the file.

Remedy:

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

(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

(29)

National Disability Authority (Ireland)

www.nda.ie ◦ 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

WebAim (Web Accessibility in Mind)

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

www.verva.se/english/guidelines/public-sector-websites

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)

(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 understanding of accessibility would all be required to create an accessible world wide web.