COAP:COAP-2170/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 10: Line 10:
(Use IE for Windows format or download the video first)
(Use IE for Windows format or download the video first)


; Introduction (videos and PPT)
; Introduction (Videos and PPT)
* [http://webaim.org/intro/video Keeping Web Accessibility in Mind] (11.5 min. Flash)
* [http://webaim.org/intro/index#video Keeping Web Accessibility in Mind] (Two Videos, part of the intro at webaim.org)
* Experiences of students with Disabilities: [http://webaim.org/media/common/video/k12.qtl Quicktime] [http://webaim.org/media/common/video/k12.asx Windows Media] from [http://webaim.org/intro/ webaim]
* [http://doit-prod.s.uw.edu/doit/videos/index.php?vid=33 Surfing the Web With a Screen Reader] (Downloadable Windows format, 20 min. AccessIT Video, start a min 4)
* [http://www.washington.edu/accessit/surfing.php Surfing the Web With a Screen Reader] (20 min. AccessIT Video, start a min 4)
* [http://ucpl.cornell.edu/Web_Accessibility_Trerise.ppt PPT slides] from Sharon Trerise, Cornell
* [http://ucpl.cornell.edu/Web_Accessibility_Trerise.ppt PPT slides] from Sharon Trerise, Cornell
* JAWS demo
* JAWS demo
Line 36: Line 35:
* visual, motor, auditory, seizures, cognitive
* visual, motor, auditory, seizures, cognitive


; On-line accessibility testing
; On-line accessibility testing ('''''pick one of these for your homework or get another tool .... ''''')
 
* [http://www.508checker.com/ 508 Checker]
 
* [http://accesslint.com/ AccessLint] (provides a short report in English sentences)


* [http://www.tawdis.net/ingles.html?lang=en TAW3 online] checks WCAG 2.0 compliance at all levels. Will provide a written report (English only for some levels)
* [http://www.tawdis.net/ingles.html?lang=en TAW3 online] checks WCAG 2.0 compliance at all levels. Will provide a written report (English only for some levels)
Line 42: Line 45:
* [http://wave.webaim.org/ WebAim] On-line service. (See also the recommended Firefox extension, below)
* [http://wave.webaim.org/ WebAim] On-line service. (See also the recommended Firefox extension, below)


* [http://wsspg.dequecloud.com/worldspace/wsservice/eval/checkCompliance.jsp Deque Systems] on-line service. Will provide a written report.
* [http://valet.webthing.com/access/url.html Valet] on-line accessibility check/demonstrator. Provides a short report (select "listed")


* [http://www.cynthiasays.com/ Cynthia says] (all-in-one service)
* [http://www.cynthiasays.com/ Cynthia says] (all-in-one service)
Line 48: Line 51:
* [http://uitest.com/en/check/ UITest.com]. This is an all-in-one service for accessibility, validity and miscellaneous. Enter a URL and the do checking using various other services.
* [http://uitest.com/en/check/ UITest.com]. This is an all-in-one service for accessibility, validity and miscellaneous. Enter a URL and the do checking using various other services.


See [http://webaim.org/articles/tools/ Accessibility Evaluation Tools] at WebAIM and [http://www.w3.org/WAI/ER/tools/complete Complete List of Web Accessibility Evaluation Tools] at W3C for larger lists.
See [http://webaim.org/articles/tools/ Accessibility Evaluation Tools] for tips on how to choose a tool at WebAIM and [http://www.w3.org/WAI/ER/tools/complete Complete List of Web Accessibility Evaluation Tools] at W3C for a larger list of tools.


; Designers' web browser extensions (some are alternatives to online tools)
; Designers' web browser extensions (some are alternatives to online tools)


* [http://wave.webaim.org/toolbar WebAim Firefox extension] '''Recommended'''. Click on "Icons key" for explanations of icons and problems encountered.
* [http://wave.webaim.org/toolbar WebAim Browser extension] for Firefox and Chrome '''Recommended'''. Click on "Icons key" for explanations of icons and problems encountered. As of Feb 2015, the Chrome version is interactive (much better).


* [https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/ WCAG Contrast checker]  
* [https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/ WCAG Contrast checker]  


* [https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/ Fangs Screen Reader Emulator], Firefox 2.0 -4.0 extension.
* [https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/ Fangs Screen Reader Emulator], Firefox 2.0 -4.0 extension.
* [http://www.deque.com/products/fireeyes/ FireEye] from Deque. Interfaces with a web service for which registration is required.


; Assistive technology for browsers  
; Assistive technology for browsers  
* See [[web accessibility]] (no need to install assistive technology for this lesson)
* See [[web accessibility]] (no need to install assistive technology for this lesson)


; Web developper tools (allow to disable CSS, JS, etc.)
; Web developer tools: F12 on most browsers or right-click->inspect element
* allow to manipulate CSS etc.
 
; Additional web developer tools, allow for example to disable CSS
* [http://chrispederick.com/work/web-developer/ Home page/download]
* [http://chrispederick.com/work/web-developer/ Home page/download]


Line 73: Line 81:
; Classroom activity
; Classroom activity


Evaluate a website according to some WCAG (Web Content Accessibility Guidelines) principles. Pick '''one'''
Evaluate a website according to some WCAG (Web Content Accessibility Guidelines) principles. Pick '''one'''. You may use an online validation service for generating the initial report.


(1) [http://www.w3.org/WAI/WCAG20/quickref/  WCAG 2.0] is today's most important standard
(1) [http://www.w3.org/WAI/WCAG20/quickref/  WCAG 2.0] is today's most important standard
Line 84: Line 92:
(3) US government - section 508 for government websites
(3) US government - section 508 for government websites
* [http://webaim.org/standards/508/checklist WebAIM's Section 508 Checklist] ([http://webaim.org/standards/508/508checklist.pdf PDF version])
* [http://webaim.org/standards/508/checklist WebAIM's Section 508 Checklist] ([http://webaim.org/standards/508/508checklist.pdf PDF version])
(4) Special color filtering
* http://colorfilter.wickline.org/
* [http://gmazzocato.altervista.org/colorwheel/wheel.php Accessibility color wheel] by Giacomo Mazzocato
* [http://contrast-finder.tanaguru.com/ Contrast-Finder]
(5) Simplifying add-ons
* https://addons.mozilla.org/en-US/firefox/addon/reader/
Tips:


* Use an on-line service (see Monday) to help you with this task.
* Use an on-line service (see Monday) to help you with this task.
Line 93: Line 111:
You should at least evaluate the '''home page plus two other pages''' (groups do 6 pages or compare 2 websites).
You should at least evaluate the '''home page plus two other pages''' (groups do 6 pages or compare 2 websites).


* Use a recognized evaluation grid or tool (e.g. the checklist used in the classroom activity or results produced from a service that checks for WCAG 1 or WCAC 2).  
* Use a recognized evaluation grid or tool (e.g. the checklist used in the classroom activity or results produced from a service that checks for WCAG 1 or WCAC 2). I suggest starting with the [http://wave.webaim.org/toolbar recommended Wave Firefox extension], but it's your choice.
* Doing an analysis at "A" level (i.e. strongly required items) is ok. I don't require analysis at AA or AAA level ....
* Doing an analysis at "A" level (i.e. strongly required items) is ok. I don't require analysis at AA or AAA level ....
* Produce a report (you can copy/paste evaluation forms and/or reports from online or other evaluation software).
* Produce a report (you can copy/paste evaluation forms and/or reports from online or other evaluation software).

Latest revision as of 08:54, 18 February 2015

COAP 2170
COAP:COAP-2170
COAP:COAP-2170/term project
COAP:COAP-2170/week1
COAP:COAP-2170/week2
COAP:COAP-2170/week3
COAP:COAP-2170/week4
COAP:COAP-2170/week5
COAP:COAP-2170/week6
COAP:COAP-2170/week7
COAP:COAP-2170/week8

COAP 2170 Week 6 program

Topic: Accessibility

Monday

(Use IE for Windows format or download the video first)

Introduction (Videos and PPT)
Administration
  • Homework 5 questions (if any)
  • Mid-Term: Grade average was high (worst grade: B), some doubts about usability testing vs. user surveys
Principles and players
  • The "players": W3C, US gov, some other national programs, corporate (e.g. Microsoft), some universities

Checklists and tools

(for both Monday and Wednesday lessons)

Some important checklists:

Categories of users
  • visual, motor, auditory, seizures, cognitive
On-line accessibility testing (pick one of these for your homework or get another tool .... )
  • AccessLint (provides a short report in English sentences)
  • TAW3 online checks WCAG 2.0 compliance at all levels. Will provide a written report (English only for some levels)
  • WebAim On-line service. (See also the recommended Firefox extension, below)
  • Valet on-line accessibility check/demonstrator. Provides a short report (select "listed")
  • UITest.com. This is an all-in-one service for accessibility, validity and miscellaneous. Enter a URL and the do checking using various other services.

See Accessibility Evaluation Tools for tips on how to choose a tool at WebAIM and Complete List of Web Accessibility Evaluation Tools at W3C for a larger list of tools.

Designers' web browser extensions (some are alternatives to online tools)
  • WebAim Browser extension for Firefox and Chrome Recommended. Click on "Icons key" for explanations of icons and problems encountered. As of Feb 2015, the Chrome version is interactive (much better).
  • FireEye from Deque. Interfaces with a web service for which registration is required.
Assistive technology for browsers
Web developer tools
F12 on most browsers or right-click->inspect element
  • allow to manipulate CSS etc.
Additional web developer tools, allow for example to disable CSS

Wednesday

Administration
  • Term project: Each student must post her/his idea for a term project in the world classroom. A few sentences are enough. This activity is not directly graded, but non-participation will affect grade for term project. Deadline: Friday week 6 midnight.
  • term project details
  • Homework 4 feedback (maybe)
Classroom activity

Evaluate a website according to some WCAG (Web Content Accessibility Guidelines) principles. Pick one. You may use an online validation service for generating the initial report.

(1) WCAG 2.0 is today's most important standard

(2) Older W3C version focusing on content:

(3) US government - section 508 for government websites

(4) Special color filtering

(5) Simplifying add-ons

Tips:

  • Use an on-line service (see Monday) to help you with this task.
  • You can work in teams of two if you like

Homework 6

Produce an accessibility review of a website of your choice. I suggest using one of the Webster web sites. You should at least evaluate the home page plus two other pages (groups do 6 pages or compare 2 websites).

  • Use a recognized evaluation grid or tool (e.g. the checklist used in the classroom activity or results produced from a service that checks for WCAG 1 or WCAC 2). I suggest starting with the recommended Wave Firefox extension, but it's your choice.
  • Doing an analysis at "A" level (i.e. strongly required items) is ok. I don't require analysis at AA or AAA level ....
  • Produce a report (you can copy/paste evaluation forms and/or reports from online or other evaluation software).
  • Structure of the report: Introduction, findings, conclusion. Findings may include cut/paste data.
  • Group work ok: 2 persons max/group, but analyze 6 pages or compare 2 websites.

Due: Wednesday week 7 before class.

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2170/week6&oldid=55190"