| 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. |
| Table of Contents | ||
|---|---|---|
|
Target WCAG 2.0 Level
At minimum, new sites or web sites that have undergone substantial change will also comply with WCAG 2.0 Level AA. Whenever possible, we should comply with the even stricter standard of WCAG 2.0 Level AAA.
The four principles
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. These principles have numerous "techniques" that describe how to implement web accessibility. The basic principles include:
...
| 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 cannot perform.
Common Operable issues
| Issue | Technique | Notes |
|---|---|---|
| Iframe element requires a non-empty title attribute that identifies the frame. | Technique: H64 | See technique for ways to solve issue. |
| Check that there is at least one mode of operation where the keyboard focus indicator can be visually located on user interface controls. | Technique: G149 | See technique for ways to solve issue. |
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.
Common Understandable issues
| Issue | Technique | Notes |
|---|---|---|
| Form does not contain a submit button (input type="submit", input type="image", or button type="submit"). | Technique: H32 | See technique for ways to solve issue. |
| The html element should have a lang or xml:lang attribute which describes the language of the document. | Technique: H57 | See technique for ways to solve issue. |
Robust
Web content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (AT). This means that users must be able to access web content as technologies advance. Software updates to user agents and AT should not matter when it comes to web content and accessibility.
WCAG
...
Common Robust issues
| Issue | Technique | Notes |
|---|---|---|
| This fieldset element does not have a name available to an accessibility API. Valid names are: legend element. | Technique: H91 | See technique for ways to solve issue. |
| Duplicate id attribute | Technique: F77 | See technique for ways to solve issue. |
| This text input element does not have a name available to an accessibility API. Valid names are: label element, title attribute. | Technique: H91 | See technique for ways to solve issue. |
| This checkbox input element does not have a name available to an accessibility API. Valid names are: label element, title attribute. | Technique: H91 | See technique for ways to solve issue. |
General Guidelines (for level A and AA)
Guideline 1.1
Text Alternatives: Provide text alternatives for any non-text content (more info|http://www.w3.org/TR/WCAG20/#text-equiv-all)
- All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
- Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.
- Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page.
- Form buttons have a descriptive value.
- Form inputs have associated text labels.
- Embedded multimedia is identified via accessible text.
- Frames are appropriately titled.
Guideline 1.3
Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure
- Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
- Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
- Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.
Guideline 1.4
Distinguishable: Make it easier for users to see and hear content including separating foreground from background
...
- If the same visual presentation can be made using text alone, an image is not used to present that text.
Guideline 2.1
Keyboard Accessible: Make all functionality available from a keyboard
- All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).
- Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.
Guideline 2.4
Navigable: Provide ways to help users navigate, find content, and determine where they are
...
- It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).
Guideline 3.2
Predictable: Make Web pages appear and operate in predictable ways
...
- Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.
Guideline 3.3
Input Assistance: Help users avoid and correct mistakes
...
- If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.
Guideline 4.1
Compatible: Maximize compatibility with current and future user agents, including assistive technologies
...
- Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.
Tools
...
HTML Code Sniffer / Pally
...
Accessibility tools and scanners
Manually sifting through code to determine accessibility issues is a long drawn out process. Thankfully, there are tools to help you on this endeavor!
- Webaim's Color Contrast Checker is a great way to check if you're color scheme adheres to Level AA.
- Webaim Web Accessibility Evaluation Tool scans an entire page and shows all accessibility issues. One caveat is this tool will only work for public websites. Sites with login access cannot be scanned.
- Webaim Web Accessibility Evaluation Extension is a Chrome extension that scans an entire page and shows all accessibility issues, its also includes an overview mode that highlights accessible metadata in a page.
- total11y is a Chrome extension that handles what Webaim Web Accessibility Evaluation Tool does, but as an extension to your browser.
- Accessibility Developer Tools is an accessibility audit tool built by Google Accessibility as a Chrome extension. (Github source)
- 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".
- This was the tool used for the Oct 2016 uPortal accessibility audit. (Github source)
- Pa11y - your automated accessibility testing pal. It runs HTML CodeSniffer for programmatic accessibility reporting
- .
- Dashboard: Web interface for automated accessibility reporting and graphing.
- (Github source)
- web service: A simple JSON web service for automated accessibility reporting.
- (Github source)
- command line: Run one-off accessibility reports from the comfort of your command line.
Tanaguru
- Tanaguru is a free/
- open source software (AGPL licensed) for web sites
- assessments. (Github source, Discussion Forum, Jenkins plugin)
- Audits include
- a page audit
- , entire website audit (Heritrix crawler embedded)
- ,
- offline file audit
- and scenario audit
- which is a user path over a given website
website:
- .
- aXe tools is an extension for Chrome and Firefox, that enhances the developer tools panel with an accessibility view.
Screen Readers
| Name | Platform | Site | Licensing | Cost |
|---|---|---|---|---|
| ChromeVox | Chrome Browser | http://www. |
Crawling with credentials
| Open Source | Free | |
| TalkBack | Android | https:// |
So something like this (with a valid login/password):
<bean id="credential" class="org.archive.modules.credential.HtmlFormCredential"> <property name="domain" value="example.com" /> <property name="login-uri" value="https://example.com/login"/> <property name="form-items"> <map> <entry key="login" value="mylogin"/> <entry key="password" value="mypassword"/> <entry key="submit" value="submit"/> </map> </property></bean>| apps/details?id=com.google.android.marvin.talkback | Proprietary | Free | ||
| VoiceOver | MacOS, IOS | https://www.apple.com/accessibility/mac/vision/ | Proprietary | Free |
Useful links and additional information
WCAG