Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To...
-
date post
19-Dec-2015 -
Category
Documents
-
view
215 -
download
3
Transcript of Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To...
![Page 1: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/1.jpg)
Web Site Accessibility
Ian SeniorNovember 2004
![Page 2: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/2.jpg)
Aim of talk
To give an overview of the problem To describe the legal situation To show some good and bad practice To point to some help
![Page 3: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/3.jpg)
What is Accessibility?
Web content can be obtained and understood by as many potential viewers as possible, regardless of the user agent they employ or the constraints under which they operate. University of Buffalo NY State.
![Page 4: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/4.jpg)
The problem
1 in 10 visitors is disabled in some way. Access is impeded by not allowing for people:
with forms of colour-impaired vision slow modems and lines turning off graphics who find it hard to read long sentences
![Page 5: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/5.jpg)
The problem (2)
who only have a 640 x 480 monochrome screen unable to read small fonts who prefer to use Linux who cannot use a mouse who cannot hear oh, yes, and people who cannot see!
![Page 6: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/6.jpg)
Ways to use the web
Remember that viewing sites with IE is not the only way to use the web. Think of technologies like: Synthetic speech (screen reader) Paper printout Dynamic braille Keyboard only Text-mode browsers Web-enabled cars Mobile phones and PDAs
![Page 7: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/7.jpg)
The legal situation
The 1995 Disability Discrimination Act (DDA) is relevant.
Since 1st September 2002, the Special Educational Needs and Disability Act (SENDA) has been in force. This act became part IV of the DDA and bring higher and further education under the protection of this legislation.
![Page 8: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/8.jpg)
What does SENDA say?
SENDA makes it unlawful to:
Treat disabled people less favourably than their non-disabled peers, for a reason relating to their disability
Fail to provide reasonable adjustments for disabled students.
![Page 9: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/9.jpg)
SENDA
SENDA seeks to provide disabled students with access to all the facilities and services of FE/HE organisation.
SENDA is an anticipatory Act, meaning organisations have to adjust their working practices for disabled people regardless of whether they are presently at the organisation or not.
This means web sites have to be accessible to all visitors and not just registered users.
This also applies to any teaching documents.
![Page 10: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/10.jpg)
Australian legal case
Maguire vs Sydney Olympic Games Failed to provide accessible site Defence of ‘unjustifiable hardship’ rejected $20,000 fine
Case could be used in UKThere have been no legal test cases in the
UK so far.
![Page 11: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/11.jpg)
Poor excuses for non-compliance
Sorry, I am not interested We don't have any disabled people We don't have the time or expertise It's not my problem, I'll wait until everyone else
does something My system won't let me No-one else is fixing their sites I don't know what to fix
![Page 12: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/12.jpg)
How not to help your visitors…
![Page 13: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/13.jpg)
Who’s page was that?
![Page 14: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/14.jpg)
Web Standards
World Wide Web Consortium (W3C). They develop interoperable technologies to:‘Lead the web to its full potential as a forum for commerce, information, communication and collective understanding’
![Page 15: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/15.jpg)
Web Accessibility Initiative (WAI)
W3C programme to: Ensure web technologies support accessibility Developing guidelines for accessibility Developing tools to evaluate and facilitate
accessibility Conduct education and outreach Co-ordinating web design with R & D
![Page 16: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/16.jpg)
WAI checkpoints
WAI have produced a list of checkpoints for web content accessibility guidelines (WCAG) 1.0
This is a hierarchical structure consisting of three priority levels:
Priority 1 (level A) Priority 2 (level AA) Priority 3 (level AAA)
![Page 17: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/17.jpg)
Priority 1
This is the minimum level of accessibility web developers should be working towards. While this removes some accessibility barriers, many disabled students would still be excluded from using a site.
e.g Use Alt tags on images
![Page 18: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/18.jpg)
Priority 2
Achieving this level will remove more barriers to accessibility although some students will still be excluded.
e.g. Link form elements with their labels
![Page 19: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/19.jpg)
Priority 3
Satisfying this highest level will provide access for the vast majority of disabled people.
e.g. Separate adjacent links with more than white space
![Page 20: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/20.jpg)
Aim high
What priority level should you achieve?
FE/HE institutions should regard priority 1 as the starting point for a web site.
Priority 2 is the standard level expected Priority 3 is the ideal level
![Page 21: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/21.jpg)
Basic web design issues
It is not hard to get the simple things right:
1. Be realistic: don't make technology assumptions 2. Don't be lazy and do it all with images 3. Don't use non-intuitive navigation aids 4. Make your site consistent 5. Use simple language 6. Provide text versions 7. Leave control of appearance to CSS8. Structure your web pages correctly (H1 tags etc.)
![Page 22: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/22.jpg)
Make consistency rules
Make house rules and stick to them. Keep your pages consistent.
Create a visual identity that holds all your pages together. This will help everyone.
Decide on a technology and make everyone use it. Don't mix Flash and XML and PDF in the same small site.
![Page 23: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/23.jpg)
Dyslexia and cognitive disabilities
Write short sentences Use consistent layout Don't flash at people or use multi-coloured backgrounds Keep sentences below 20 words Use white space
Say one thing at a time
![Page 24: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/24.jpg)
XHTML
Current standard for HTML and is a form of XML(eXtensible Markup Language)
Comes in 3 versions: Strict document type definition (DTD) Transitional DTD Frameset DTD
The strict DTD will produce a web site that complies to all three priority levels, the other two make compliance very difficult above level 1
![Page 25: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/25.jpg)
HTML – Standard page
Give DOCTYPE DTD State document language If table used in page design use an empty summary
tag Include ‘skip navigation’ link Use headers for structure only – style through CSS if
necessary Consider a CSS approach to page layout
![Page 26: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/26.jpg)
More HTML
TITLE attribute describe a link
Acronym elementAbbreviation elementACCESSKEYTABINDEX attribute
cycle logically through links
![Page 27: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/27.jpg)
Coding Accessible Graphics
Use ‘alt’ attribute on all images Spacer image used in design only alt=“” Graphics used as bullets alt=“*” Information graphics should have sensible alt text Use longdesc attribute for complex images e.g.
graphs, detailed images. Alternatively link image via ‘D’ text
![Page 28: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/28.jpg)
Accessible Tables
Make your table as simple as possible Add summary of information for data tables Associate table column & row headings with
cells Attributes include: TH, ID, headers, scope THEAD, TBODY, TFOOT also available
Give your table a caption Check readability when linearized using Lynx or
Opera
![Page 29: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/29.jpg)
Accessible Forms
Use clear languageUse form accessibility tags:
For, ID, name, label, Group related items together
fieldset, optgroup and legendAdd hints to text boxes
![Page 30: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/30.jpg)
Tools to aid compliance
Evaluation tools analyse pages and produce a report
Repair tools Identify and help to fix page problems
Filter and transformation tools Assist web users by modifying a page or supplement
assistive technology or browser
![Page 31: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/31.jpg)
Opera & Accessibility
When developing a site it is helpful to see how accessible your new site is. A very quick way is to use Opera. This has accessibility options:
Turn on/off graphics Turn on/off CSS author & user versions Zoom in on text Turn on/off JavaScript Linearize tables
![Page 32: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/32.jpg)
WAVE software
Allows you to add a button to the links bar of your browser.
Clicking the button opens up WAVE which examines the page for accessibility. Problems are indicated by error images.
![Page 33: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/33.jpg)
WAVE in action – poor site
![Page 34: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/34.jpg)
WAVE in action – good site
![Page 35: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/35.jpg)
Cascading style sheets
Allow for - font family: serif, sans-serif, cursive - font size: tiny or huge - colour, background and foreground - white space around objects - control link format - borders around things - to be controlled in one place- allow the user to override it.
Not all browsers implement CSS properly (Netscape 4).
![Page 36: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/36.jpg)
CSS Accessibility
Aids accessibility of a site by: Used to separate style from structure Can construct page
![Page 37: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/37.jpg)
With CSS
![Page 38: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/38.jpg)
Without CSS
![Page 39: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/39.jpg)
What are we doing?
We use XML to mark up our pages We can deliver pages in different forms: PDF, print
ready, XML, HTML We provide a text only selection (same information,
different view) We are developing an automatic accessibility XSLT style
sheet to check our content before it goes online. We are developing methods to transform Word
documents into XML.
![Page 40: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/40.jpg)
Conclusions Accessibility is all about people being able to obtain
information regardless of their circumstances. Legal requirement through SENDA
Write W3C compliant code Use XHTML strict DTD as your starting level Aim for priority 2 as a standard Use CSS for site style
Use the validation tools from W3C and others to check site compliance.
![Page 41: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/41.jpg)
Useful sites
Web Accessibility Initiative http://www.w3c.org/WAI/
W3 Consortium http://www.w3c.org TechDis (JISC Funded) http://www.techdis.ac.uk/ RNIB http://www.rnib.org.uk/digital/ Check your understanding of colour blindness
http://vischeck.com/
![Page 42: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/42.jpg)
Validators & other tools
Site Viewing Tool http://www.anybrowser.com/siteviewer.html
HTML Tidy Tool http://www.w3c.org/People/Raggett/tidy/
HTML Validatorhttp://validator.w3.org/
CSS Validator http://jigsaw.w3.org/css-validator/
![Page 43: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/43.jpg)
Checking tools
Wave http://www.wave.webaim.org/index.jsp
Bobby http://bobby.watchfire.com/bobby/html/en/index.jsp
Aprompthttp://aprompt.snow.utoronto.ca/
Vischeck http://www.vischeck.com/vischeck/vischeckURL.php
Lifthttp://www.usablenet.com/
![Page 44: Web Site Accessibility Ian Senior November 2004 Aim of talk To give an overview of the problem To describe the legal situation To show some good and.](https://reader030.fdocuments.in/reader030/viewer/2022032800/56649d385503460f94a10b43/html5/thumbnails/44.jpg)
Talk found at
http://users.ox.ac.uk/~ian/
PDF and PowerPoint versions available