COAP:COAP-2170/week6: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (→Wednesday) |
||
| (37 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
=== Monday === | === Monday === | ||
(Use IE for Windows format or download the video first) | |||
; | ; Introduction (Videos and PPT) | ||
* [http://webaim.org/intro/index#video Keeping Web Accessibility in Mind] (Two Videos, part of the intro at webaim.org) | |||
* | * [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://ucpl.cornell.edu/Web_Accessibility_Trerise.ppt PPT slides] from Sharon Trerise, Cornell | ||
* | * JAWS demo | ||
* [http://uiaccess.com/accessucd/design.html Accessibility in User-Centered Design] (online book chapter) | |||
; Principles | ; 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: | |||
* [http://www.w3.org/WAI/WCAG20/glance/ WCAG 2.0 at a glance] | * [http://www.w3.org/WAI/WCAG20/glance/ WCAG 2.0 at a glance] | ||
* [http://www.w3.org/WAI/WCAG20/quickref/ WCAG "quick" ref] (official) | * [http://www.w3.org/WAI/WCAG20/quickref/ WCAG "quick" ref] (official) | ||
* | * [http://webaim.org/standards/wcag/checklist WebAIM's WCAG 2.0 Checklist] ([http://webaim.org/standards/wcag/WCAG2Checklist.pdf A PDF version]) .... this is more understandable | ||
* [http://webaim.org/standards/508/checklist WebAIM's Section 508 Checklist] for the [http://www.section508.gov/index.cfm?fuseAction=stdsdoc#Web Section 508 Standards Guide] | |||
; Categories of users | ; Categories of users | ||
* 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. | * [http://www.508checker.com/ 508 Checker] | ||
* [http:// | * [http://accesslint.com/ AccessLint] (provides a short report in English sentences) | ||
* [http:// | * [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.cynthiasays.com/ Cynthia says] | * [http://wave.webaim.org/ WebAim] On-line service. (See also the recommended Firefox extension, below) | ||
* [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://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 | 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 | * [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 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] | |||
=== 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. | |||
* [[COAP:COAP-2170/term project|term project]] details | |||
* Homework 4 feedback (maybe) | |||
; Classroom activity | ; Classroom activity | ||
Evaluate a website according to WCAG (Web Content Accessibility Guidelines) principles | 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. | ||
Older version focusing on content: | (1) [http://www.w3.org/WAI/WCAG20/quickref/ WCAG 2.0] is today's most important standard | ||
* [http://webaim.org/standards/wcag/checklist WCAG 2.0 Checklist] (HTML version) | |||
* [http://webaim.org/standards/wcag/WCAG2Checklist.pdf WCAG 2.0 Checklist] (PDF version) | |||
(2) Older W3C version focusing on content: | |||
* [http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0] | * [http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0] | ||
(3) US government - section 508 for government websites | |||
* [http://webaim.org/standards/ | * [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. | |||
* You can work in teams of two if you like | |||
=== Homework 6 === | === 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 [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 .... | |||
* 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. | |||
Latest revision as of 09:54, 18 February 2015
COAP 2170 Week 6 program
Topic: Accessibility
Monday
(Use IE for Windows format or download the video first)
- Introduction (Videos and PPT)
- Keeping Web Accessibility in Mind (Two Videos, part of the intro at webaim.org)
- Surfing the Web With a Screen Reader (Downloadable Windows format, 20 min. AccessIT Video, start a min 4)
- PPT slides from Sharon Trerise, Cornell
- JAWS demo
- Accessibility in User-Centered Design (online book chapter)
- 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:
- WCAG 2.0 at a glance
- WCAG "quick" ref (official)
- WebAIM's WCAG 2.0 Checklist (A PDF version) .... this is more understandable
- WebAIM's Section 508 Checklist for the Section 508 Standards Guide
- 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")
- Cynthia says (all-in-one service)
- 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).
- Fangs Screen Reader Emulator, Firefox 2.0 -4.0 extension.
- FireEye from Deque. Interfaces with a web service for which registration is required.
- Assistive technology for browsers
- See web accessibility (no need to install assistive technology for this lesson)
- 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
- WCAG 2.0 Checklist (HTML version)
- WCAG 2.0 Checklist (PDF version)
(2) Older W3C version focusing on content:
(3) US government - section 508 for government websites
(4) Special color filtering
- http://colorfilter.wickline.org/
- Accessibility color wheel by Giacomo Mazzocato
- Contrast-Finder
(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.