Difference between revisions of "Accessibility Guide"
Jump to navigation
Jump to search
Line 15: | Line 15: | ||
** The login page doesn't identify what to do with the User: and Password: input boxes. Should have a <label>? |
** The login page doesn't identify what to do with the User: and Password: input boxes. Should have a <label>? |
||
** The Course home page has "Sel." for select -- what does that mean? The download Hardcopy button comes after the selection of radio buttons -- so no clue why one would select anything until one "scans" down to there. |
** The Course home page has "Sel." for select -- what does that mean? The download Hardcopy button comes after the selection of radio buttons -- so no clue why one would select anything until one "scans" down to there. |
||
− | * In general the Login, Course home pages were written using HTML for styling |
+ | ** In general the Login, Course home pages were written using HTML for styling |
− | ** This should be replaced by using HTML for hierarchical organization and CSS for styling. |
+ | *** This should be replaced by using HTML for hierarchical organization and CSS for styling. |
− | *** For example the top "Main page" is an H3 because that gives the right size -- but it should be H1? |
+ | **** For example the top "Main page" is an H3 because that gives the right size -- but it should be H1? |
− | *** Practicing navigating the page using VoiceOver or JAWS gives some idea of what one is up against. |
+ | **** Practicing navigating the page using VoiceOver or JAWS gives some idea of what one is up against. |
Revision as of 09:35, 15 February 2011
Accessibility Project
We have received a good deal of advice from the folks at the University of Missouri who do accessibility testing. (Contact through Jason Aubrey User:aubreyja)
- One can make significant progress quickly in meeting 508 requirements, but really improving usability is a sizable project. Student manpower would be helpful.
- Establishing a good protocol for AltText in images would be a good start
- Implementing <label> tags for attaching labels to input boxes would be good
- It's somewhat preferable to adding label attributes to HTML entities.
- One would think that the equations and problems would be the chief barrier, but in fact there are substantial (and perhaps more important) barriers on the first pages. For example:
- The front page which lists the courses
- The every underscore is "pronounced" by the JAWS reader -- this makes many course names difficult to recognize.
- The bullets are read (and they are not really necessary) -- there is some means to suppress this?
- Fix?: Replace all underscores with spaces when printing to HTML pages. (John Jones has already done this in some locations.)
- The masthead and links in the picture have too much prominence. The "not logged in" logo in the upper right hand corner is confusing (it is read before the login input)
- The login page doesn't identify what to do with the User: and Password: input boxes. Should have a <label>?
- The Course home page has "Sel." for select -- what does that mean? The download Hardcopy button comes after the selection of radio buttons -- so no clue why one would select anything until one "scans" down to there.
- In general the Login, Course home pages were written using HTML for styling
- This should be replaced by using HTML for hierarchical organization and CSS for styling.
- For example the top "Main page" is an H3 because that gives the right size -- but it should be H1?
- Practicing navigating the page using VoiceOver or JAWS gives some idea of what one is up against.
- This should be replaced by using HTML for hierarchical organization and CSS for styling.
- The front page which lists the courses
Web Accessibility Tools and Resources
Introduction to Web Accessibility
- WebAIM’s Introduction to Web Accessibility - http://webaim.org/intro
- W3C Web Accessibility Initiative - http://www.w3.org/WAI/gettingstarted/Overview.html
Laws, Standards and Guidelines
- MU Web Policies and Guidelines -
- Missouri Information Technology Accessibility Standards (MITAS) - http://oa.mo.gov/itsd/cio/standards/ittechnology.htm
- Section 508 -
- WebAIM Section 508 Checklist - http://www.webaim.org/standards/508/checklist
- Web Content Accessibility Guidelines (WCAG) 2.0 – http://www.w3.org/TR/WCAG20
- WebAIM's WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklist
Free Online Web Accessibility Checkers
- Functional Accessibility Evaluator (FAE) - http://fae.cita.uiuc.edu
- W3C validator - http://validator.w3.org
- Cynthia Says - http://www.cynthiasays.com
- WebAIM’s Wave Web Accessibility Evaluation Tool - http://wave.webaim.org
Firefox Add-ons
- Fangs Screen Reader Emulator - http://www.standards-schmandards.com/projects/fangs
- HTML Validator - https://addons.mozilla.org/en-US/firefox/addon/249
- WebAIM’s WAVE Toolbar - http://wave.webaim.org/toolbar
- Accessibility Extension Firefox toolbar - https://addons.mozilla.org/en-US/firefox/addon/5809
- Web Developer - http://chrispederick.com/work/web-developer
Colorblind Checkers
- WebAIM Color Contrast Checker - http://webaim.org/resources/contrastchecker
- Colorblind Web Page Filter - http://colorfilter.wickline.org
- Color Oracle - http://colororacle.cartography.ch
- Is your site color blind accessible? http://interface.missouri.edu/2008/07/is-your-site-color-blind-acces.php
Manual Web Accessibility Testing Guides
- Using JAWS to Evaluate Web Accessibility - http://webaim.org/articles/jaws
- Using NVDA to Evaluate Web Accessibility - http://webaim.org/articles/nvda
- Using VoiceOver to Evaluate Web Accessibility - http://webaim.org/articles/voiceover/
- Evaluating Cognitive Web Accessibility - http://webaim.org/articles/evaluatingcognitive
Webinars/Online Trainings
- EASI: Equal Access to Software and Information - http://easi.cc/clinic.htm
- WebAIM - http://www.webaim.org/articles
- High Tech Center Training Unit - http://htctu.net/trainings/manuals/tutmain.htm
- CATEA accesselearning - http://www.accesselearning.net
Mobile Devices
- mobiForge - http://mobiforge.com/Testing
WebAIM Articles
- Skip Navigation - http://webaim.org/techniques/skipnav
- Appropriate Use of Alternative Text - http://webaim.org/techniques/alttext
- Creating Accessible Forms - http://webaim.org/techniques/forms/controls
- Creating Accessible Tables - http://webaim.org/techniques/tables