| Info | ||
|---|---|---|
| ||
This is a draft of a plan to target WCAG 2.0 Level AA in uPortal that we hope to complete, discuss, and ratify in the community. Following that, we plan to convert this document to Markdown and commit it to the main uPortal repo in Github. |
...
The overall goal for accessibility is to create web content that is perceivable, operable and understandable by the broadest possible range of users and compatible with their wide range of assistive technologies, now and in the future. The These principles have numerous "techniques" that describe how to implement web accessibility. The basic principles include:
...
Information and user interface elements must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented. I cannot be invisible to all of their senses.
Common Perceivable issues
| Issue | Technique | Notes |
|---|---|---|
| This text input element does not have a name available to an accessibility API. Valid names are: label element, title attribute. | Technique: H91 | The technique for this issue tells us that a label element is missing. Add a label or title attribute to the element to address this accessibility issue. |
| Img element missing an alt attribute. Use the alt attribute to specify a short text alternative. | Technique: H91 | The technique for this issue tells us that an alt attribute is missing to describe the img in question. |
| This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.63:1. Recommendation: change text colour to #317ab9. | Technique: G18 | This technique tells us that the element(s) in question have contrast issues that need to be addressed. |
Operable
User interface elements and navigation must be operable. The user interface cannot require an action that a user cannto cannot perform.
Understandable
Information and the operation of the user interface must be understandable. That means the user must be able to understand the information as well as the operation of the user interace. The content cannot be beyond their understanding.
...
- chrome extension: https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
- chrome extension code: https://github.com/GoogleChrome/accessibility-developer-tools
HTML Code Sniffer / Pally
- HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs".
- website / bookmarklet: http://squizlabs.github.io/HTML_CodeSniffer/
- source: https://github.com/squizlabs/HTML_CodeSniffer
- Pally - your automated accessibility testing pal. It runs HTML CodeSniffer for programmatic accessibility reporting.
- website: http://pa11y.org/
- Dashboard: Web interface for automated accessibility reporting and graphing. https://github.com/nature/pa11y-dashboard
web service: A simple JSON web service for automated accessibility reporting. https://github.com/nature/pa11y-webservice
command line: Run one-off accessibility reports from the comfort of your command line. https://github.com/nature/pa11y
...