Accessibility GeekUp 25 th October 2007

Accessibility is a subset of Usability. It is usability for disabled users Accessibility & Usability

Accessibility is a subset of Usability.

It is usability for disabled users

The Nature of the Web – It’s a User Interface!

Accessibility – The official Why 2. Uh – it’s the law The position in the UK, unlike many countries, is relatively clear. Private and public sector Websites face accessibility obligations under the Disability Discrimination Act (DDA). Part III of the DDA (which came into force on 1st October 1999 ) refers to the provision of goods, facilities and services. The Code of Practice, which specifically mentions websites, can be downloaded in its entirety from the DRC website. The most relevant quotes from the Code of Practice are: * 2.2 (p7): “The Disability Discrimination Act makes it unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public.” To make 'reasonable adjustments' in circumstances in which the effect of that failure is to make it impossible or unreasonably difficult for the disabled person to make use of any such services. (19(1)(b))

2. Uh – it’s the law

The position in the UK, unlike many countries, is relatively clear. Private and public sector Websites face accessibility obligations under the Disability Discrimination Act (DDA). Part III of the DDA (which came into force on 1st October 1999 ) refers to the provision of goods, facilities and services. The Code of Practice, which specifically mentions websites, can be downloaded in its entirety from the DRC website.

The most relevant quotes from the Code of Practice are: * 2.2 (p7): “The Disability Discrimination Act makes it unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public.”

To make 'reasonable adjustments' in circumstances in which the effect of that failure is to make it impossible or unreasonably difficult for the disabled person to make use of any such services. (19(1)(b))

Accessibility – US legislation 2. Corporate responsibility (US) The Rehabilitation Act of 1973 (Sections 504 and 508) -Two sections within the Rehabilitation Act, as amended (93 & 98), have impact on accessible web design. These are Sections 504 and 508. 504: programs receiving federal funds may not discriminate against those with disabilities 508: a set of accessibility standards for Federal Electronics and Information Technology Americans with Disabilities Act (ADA) - two major sections in the ADA that may apply to Web accessibility: communications with persons with disabilities must be "as effective as communications with others" (Title II) public accommodation of people with disabilities (Title III)

2. Corporate responsibility (US)

The Rehabilitation Act of 1973 (Sections 504 and 508) -Two sections within the Rehabilitation Act, as amended (93 & 98), have impact on accessible web design. These are Sections 504 and 508.

504: programs receiving federal funds may not discriminate against those with disabilities

508: a set of accessibility standards for Federal Electronics and Information Technology

Americans with Disabilities Act (ADA) - two major sections in the ADA that may apply to Web accessibility:

communications with persons with disabilities must be "as effective as communications with others" (Title II)

public accommodation of people with disabilities (Title III)

Accessibility – the real why 1. Greater penetration and effectiveness The Legal and General Case - The following ‘indirect’ benefits were noted post re-design: A 30% increase in natural search-engine traffic A significant improvement in Google rankings for all target keywords 75% reduction in time for pages to load Cross browser-compatibility increased (not a single complaint since the redesign) Site now accessible to mobile devices Time to manage content reduced from average of five days to 0.5 days per job 95% increase in visitors getting a life insurance quote 90% increase in Life insurance sales online Savings of £200K annually on site maintenance 100% return on investment in less than 12 months.

1. Greater penetration and effectiveness

The Legal and General Case - The following ‘indirect’ benefits were noted post re-design:

A 30% increase in natural search-engine traffic

A significant improvement in Google rankings for all target keywords

75% reduction in time for pages to load

Cross browser-compatibility increased (not a single complaint since the redesign)

Site now accessible to mobile devices

Time to manage content reduced from average of five days to 0.5 days per job

95% increase in visitors getting a life insurance quote

90% increase in Life insurance sales online

Savings of £200K annually on site maintenance

100% return on investment in less than 12 months.

Selling Accessibility seo avoiding litigation and bad publicity maintenance market share better interoperability improved usability for everyone improved performance - shorter download time

seo

avoiding litigation and bad publicity

maintenance

market share

better interoperability

improved usability for everyone

improved performance - shorter download time

The Seven Deadly Sins, approximately.. Text resizing breaks layout Small clickable areas - especially on a-z menus Unforgiving search No site map No handheld style sheet No custom error page Client side form validation No skip links No labels on form elements, or legends & fieldset Crappy (or no) heading structure Nav bars not marked up as lists incorrect alt text

Text resizing breaks layout

Small clickable areas - especially on a-z menus

Unforgiving search

No site map

No handheld style sheet

No custom error page

Client side form validation

No skip links

No labels on form elements, or legends & fieldset

Crappy (or no) heading structure

Nav bars not marked up as lists

incorrect alt text

Accessibility – Resources If you go nowhere else then go to ACCESSIFY.COM It has: A forum where expert and free advice can be found relating to all matters of accessibility Accessibility related News Accessibility tools

If you go nowhere else then go to ACCESSIFY.COM

It has:

A forum where expert and free advice can be found relating to all matters of accessibility

Accessibility related News

Accessibility tools

Accessibility – Resources – Sites and books WebAIM , a non-profit organization dedicated to improving accessibility to online learning materials. Joe Clarke – ‘Building Accessible Websites’ - http:// joeclark.org /book/ (online) Mark Pilgrim – ‘Dive into Accessibility’ - http:// diveintoaccessibility.org / (online) Jim Thatcher et al – ‘Constructing Accessible Websites’ (book)

WebAIM , a non-profit organization dedicated to improving accessibility to online learning materials.

Joe Clarke – ‘Building Accessible Websites’ - http:// joeclark.org /book/ (online)

Mark Pilgrim – ‘Dive into Accessibility’ - http:// diveintoaccessibility.org / (online)

Jim Thatcher et al – ‘Constructing Accessible Websites’ (book)

Accessibility – Tools & Resources IE6 Web Accessibility Toolbar Developer toolbar Grease monkey scripts e.g. table inspector Jaws (Demo version) TAW, Cynthia says, ShiteMorse W3C Validator WDG Validator for batch validation Tools on Accessify Gez Lemon Video of blind guy using a screenreader Firefox screen reader emulator extension (fangs) Firefox screen reader (fire vox )

IE6 Web Accessibility Toolbar

Developer toolbar

Grease monkey scripts e.g. table inspector

Jaws (Demo version)

TAW, Cynthia says, ShiteMorse

W3C Validator

WDG Validator for batch validation

Tools on Accessify

Gez Lemon

Video of blind guy using a screenreader

Firefox screen reader emulator extension (fangs)

Firefox screen reader (fire vox )

Cubist Society Homepage

Testing for Accessibility Compliance Turn off JavaScript Turn off CSS Turn off Images Check ALT text Change font size Linearise page Check for headings Check for lists (in HTML) Listen in Jaws Navigate using keyboard Check form fields have labels Check data tables are marked up correctly Check dynamic content e.g. Video & Audio Check link text Resize window Validate HTML Turn off Flash Check acronyms, abbreviations

Turn off JavaScript

Turn off CSS

Turn off Images

Check ALT text

Change font size

Linearise page

Check for headings

Check for lists (in HTML)

Listen in Jaws

Navigate using keyboard

Check form fields have labels

Check data tables are marked up correctly

Check dynamic content e.g. Video & Audio

Check link text

Resize window

Validate HTML

Turn off Flash

Check acronyms, abbreviations

Ajax – the technology (not the detergent) Doesn’t require the traditional "submit data — retrieve web page" methodology so… more streamlined applications that require less processing and data transmission because entire web pages do not need to be generated for each change that occurs

Doesn’t require the traditional "submit data — retrieve web page" methodology

so…

more streamlined applications that require less processing and data transmission because entire web pages do not need to be generated for each change that occurs

Ajax – (“b ecause something is happening here / But you don’t know what it is / Do you, Mister Jones?” ) Bottom Line: There doesn't appear to be any reliable way to notify screen readers of an update in the DOM. Gez Lemon has posted a hack for Jaws 7.1 that improves upon the way it updates its virtual buffer

Bottom Line:

There doesn't appear to be any reliable way to notify screen readers of an update in the DOM.

Gez Lemon has posted a hack for Jaws 7.1 that improves upon the way it updates its virtual buffer

Progressive enschmancement and Disgraceful degredation Graceful Degredation – creates pages for the latest browsers that would also work well in older versions of browser software Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. So basically

Graceful Degredation – creates pages for the latest browsers that would also work well in older versions of browser software

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

So basically

Another Dilbert Cartoon

site 1: litmusapp.com

Litmusapp.com Find way of removing horizontal scrolling at 800 x 600 Use keyboard/mouseover focus styles e.g. a:hover, a:active, a:focus {text-decoration:underline; background-color:# 6B933D } Add contact form Custom error page which shows site map or way to find page Front load page titles No styles on a couple of pages?

Find way of removing horizontal scrolling at 800 x 600

Use keyboard/mouseover focus styles e.g.

a:hover, a:active, a:focus {text-decoration:underline; background-color:# 6B933D }

Add contact form

Custom error page which shows site map or way to find page

Front load page titles

No styles on a couple of pages?

site 2: hmv.com

hmv.com Validate code ahem 1550 errors on home page ..mostly due to unencoded ampersands Use server side validation on forms Skip links for keyboard users!! Tab order should be made more logical

Validate code ahem 1550 errors on home page ..mostly due to unencoded ampersands

Use server side validation on forms

Skip links for keyboard users!!

Tab order should be made more logical

site 3: Adaptavist

Adaptavist.com – few Possible Pointers Clean up code – make it valid, well formed and get presentational stuff into CSS Introduce skip links that only appear for sighted keyboard users Allow keyboard navigation of drop down menu Fallback to main menu without JS Style up link text in main content area so it’s obvious Extend heading structure beyond h1, h2 Contact form Label on search box Advanced search Clean up confusion over which is home page Put in alt attribute and make it appropriate– it’s required, put null attribute if its eye candy

Clean up code – make it valid, well formed and get presentational stuff into CSS

Introduce skip links that only appear for sighted keyboard users

Allow keyboard navigation of drop down menu

Fallback to main menu without JS

Style up link text in main content area so it’s obvious

Extend heading structure beyond h1, h2

Contact form

Label on search box

Advanced search

Clean up confusion over which is home page

Put in alt attribute and make it appropriate– it’s required, put null attribute if its eye candy

site 4: Webbie

webbie.org.uk Put in focus styles for mouseover Add contact form Make code valid and well formed on all pages Remove inline styles e.g. style="border:none;" – instead put img {border:0} in external style sheet

Put in focus styles for mouseover

Add contact form

Make code valid and well formed on all pages

Remove inline styles e.g. style="border:none;" – instead put img {border:0} in external style sheet

site 5: vagueware.com

vagueware.com Keyboard focus styles Make code valid and well formed Contact form Better heading/list structure e.g. http://vagueware.com/ideas Better page titling e.g. not just ‘vagueware.com’

Keyboard focus styles

Make code valid and well formed

Contact form

Better heading/list structure e.g. http://vagueware.com/ideas

Better page titling e.g. not just ‘vagueware.com’

How do you insult a front end developer? Call him a div.

Call him a div.

Step 5: The End