Skip to main content
Sign in

Accessibility

Kevin Wall

https://www.drupal.org/docs/8/accessibility 

Most all sites going live now should be tested for accessibility. Although not required to be a live site, your organization might require it and there's many lawyers ready to come after you for $$ http://www.karlgroves.com/2016/12/19/accessibility-lawsuits-trolls-and-scare-tactics/

http://chrishofstader.com/stop-the-ada-trolls/

For Universities it's important to be accessible and meet specific requirements. https://www.w3.org/TR/WCAG20/ this information here isn't specifically enough of a guideline to keep you legally safe and shouldn't be construed as anything more than helpful hints.


The easiest way to review your site is through a browser extension from WAVE http://wave.webaim.org/ to test for errors and contrast issues of a page. 

Going further, take a look at SiteImprove https://siteimprove.com/ which is a subscription account to scan and review all pages. 

Skip to Nav:

http://paypal.github.io/skipto/

Text:

All text can be resized to up to 200% without a loss of content or functionality using the web browser zoom.
Make sure that links make sense out of context ("click here" is problematic).
Don't write scripts that require mouse usage. Supply keyboard alternatives (e.g. use onFocus instead of onMouseover).
To reduce that amount of horizontal scrolling, use relative rather than absolute units (e.g., use percentages for table widths, instead of pixels)
Write clearly and simply
Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings.  Likewise, do not use headers to achieve visual results only.
Include :focus and :active on your hover states
AAA:
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
Foreground and background colors can be selected by the user.
Width is no more than 80 characters.
Text is not justified (aligned to both the left and the right margins).

Colors:

Colors can not be the only indicator of information like an error, or what form element has an error, etc.
All elements have a contrast ratio of 4.5:1 (7:1 AAA) other than:
Large scale text and images can be 3:1 (4.5:1 AAA)
purely decorative, logos, or inactive elements that don’t matter have no contrast ratio
if using parallax or slideshows make sure colors that cover each other have enough contrast at all points

Forms


Inputs:
All controls and inputs should have labels that are descriptive or a fieldset if labels are not applicable
Instructions are provided where necessary
Errors are described to the user in text
Include a name, role, and value
move focus to the input with an error when it has one
use html5 types and patterns
Captcha:
Captcha should provide alternatives for people with various disabilities or be accessible.

Media


Images:
Provide alt text, unless decorative or linked (with text on the link)
keep alt text small and to the point, and only for images that matter
Use real text rather than images of text unless it is a logo
use longdesc to describe complex images or link to pages of description
When using a background image, use aria labels
<div class="hero img" role="img" aria-label="Snow storms on the horizon">
    Snow storms on the horizon
</div>
Video/Audio:
Provide a text description of the video
Provide captions or have transcript that it is labeled relative to if it’s pre-recorded
There is a pause/play button and a volume control
Unless it is music, captcha, or a logo there must be no background noise (or are 20db lower than foreground noise), or the background sounds can be turned off

Guidelines:

  • All functionality should be operable through the keyboard.
  • All links and form inputs should allow you to tab/arrow to and away from them, in an order that preserves meaning and operability
  • Timed events like slideshows or log out popups should provide a way to extend or stop this with the keyboard
  • Any scrolling, moving, auto updating, or blinking mechanisms should be able to be paused or hidden with the keyboard
  • do not flash more than 3 times per second as this can cause siezures
  • there should be a way to bypass content that is repeated on multiple web pages (skip to nav, skip to content links)
  • All links purpose can be determined by the link text alone, or with the context of it’s containing paragraph, table cell, or list.  Make line-by-line reading sensible. 
  • There is more than one way to locate a web page within a set of web pages, unless it’s part of a process
  • the keyboard focus is visible in some way at all times
  • there is a breadcrumb or other way to tell where you are in the site
  • the header tells us what written language the webpage is in
  • HTML is correct, do not contain duplicate attributes, ids are unique
  • Any javascript has text identifying what the script does in no script tags
  • any application required to view a pdf, applet, plugin, etc is provided in a link on the page (can be a link to a single page linking off to tools)
  • Document the user interface, including all accessibility features
  • Data tables have column aHnd/or row headers appropriately identified (using the <th> element).
  • Data table cells are associated with the appropriate headers using the scope or id/headers attributes.
  • Each frame is given a title that describes the frame's purpose or content.
  • Don't write scripts that require mouse usage. Supply keyboard alternatives (e.g. use onFocus instead of onMouseover).
  • Lists should never be used for merely indenting or other layout purposes. Nested lists should be coded properly.
  • The viewport must allow users to pinch zoom (scale) up to 200%.
  • Have links to pdf readers and any applications needed to view things, could be a single page with a bunch of links that is linked to.
For SVGs:
  • use an inline sag
  • have a role, title, text, description, and text alternative
  • use links so they’re focusable with tab


Aria-Tags

aria-invalid="true” for form errors on input elements
<form role="search">
<ul role="navigation"> 
<input aria-required="true">
<input aria-disabled="true">
aria-live for dynamic content
<button aria-label="close">&times;</button>
banner
Site-orientated content, such as the name of the web site, title of the page, and/or the logo.
navigation
The area that contains the navigation links for the document or web site.
main
The main or central content of the document.
search
This section contains the search functionality for the site.
article
Stand-alone content that makes sense out of context from the rest of the document. Examples might be a blog posting, a comment on a blog, a forum post, etc. Specifically, a blog posting might be identified as an article and individual blog comments might also be marked up with a role of article within that blog posting.
complementary
Supporting content for the main content
contentinfo
Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.








Perceivable: usable in sight, sound, and touch
Operable: keyboard navigable, usable forms and form validation
Understandable: simple instructions, avoid unusual, unexpected, or inconsistent functions
Robust: Meets standards and works in browsers, devices, screen readers, etc.
Why:
Help people with disabilities
Equal access and opportunity
Government agencies must provide
More users can use site, means wider audience for site
Avoid law suits
While the main focus of Web accessibility is people with disabilities, accessibility also benefits people without disabilities, including:
  • older people
  • people with low literacy or not fluent in the language
  • people with low bandwidth connections or using older technologies
  • new and infrequent users
  • mobile phone users
Design:
Content:
Functionality:
Tools:




Some Scanning Tools

Online:
Server Based:
Browser Extensions:
OS Features:

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk