Website Accessibility: The Internet is for Everyone

Website Accessibility: The Internet is for EveryoneGovCon 2016 - July 22, 2016

Carie Fisher

@cariefisher

/in/cehfisher

Website developer, graphics guru, Drupal diva, broke technophile, and Star Wars fan (by default). Carie has been focused professionally on Drupal since 2009. In her role as a Senior Front-End Developer at Mediacurrent, she thrives on the challenge of turning a static mock-up into a responsive, live site that is both beautiful and functional.

Senior Front End Developer - Mediacurrent

slideshare.net/CarieFisher

http://slideshare.net/CarieFisher

Credit: http://www.glowingdial.com

Accessibility Facts1

What is website accessibility anyway?

Credit: http://netdna.webdesignerdepot.com

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with

disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

- Wikipedia

Who is website accessibility for?

Credit: http://www.northfloridaahec.org

EVERYONE!!! 57 million Americans (~20%) have some type of DISABILITY

• Visual impairments • Hearing impairments • Cognitive impairments • Mobility impairments

• Temporary Disabilities • Seizure Disorders • Aging population • Search engine bots

US Population = 282,000,000 (2000 census data)

Credit: https://openclipart.org

Total Disabled Population = 57,000,000 (2000 census data)


~20%

Severely Disabled Population = 28,000,000 (2000 census data)


~10%

State of Maryland + DC = 5,870,000 (2000 census data)


~0.02%

Why should I care about website accessibility?

Credit: https://ironyisapoormaster.files.wordpress.com

Karma Points - Everyone should have full access to cat videos & ridiculous internet memes…as well as all the useful information

Smart Thing to Do - Opens your site to a wider audience, good for SEO/search bots/Google ranking, etc

It is the Law* - Federal/state agencies, airlines, Section 504 & 508, Americans with Disabilities Act (ADA) 2018

Credit: https://www.wikipedia.org

We are ALL just Temporarily Able-bodied

Credit: https://0.s3.envato.com

Easy Accessibility Rules2

Credit: https://fortunedotcom.files.wordpress.com

Rule #1: Don’t Freak Out

What can I do about website accessibility?

Credit: http://www.wareferst.org

Rule #2: Learn a Few Things

Credit: http://7-themes.com

Rule #3: Build from the Ground Up

Credit: https://www.haikudeck.com

Rule #4: Use the Right Tools

Credit: https://happier1.imgix.net

Rule #5: Try, Try Again

Do or do not. There is no try.

Credit: http://blog.jewilson.com

Accessibility Guidelines 3

• Plan out heading & page structure • Add page titles for browser tabs • Add a ‘skip to content’ link • The heading hierarchy is

meaningful • Try not to skip heading levels • Use a markup validator tool

Structure

• Use colors on the opposite ends of the color spectrum

• Be careful with light shades

• Do not rely on color alone to convey info to your users

• Use solid color backgrounds

• Use color/contrast WCAG standard testing tools

Color & Contrast

• Use a limited number of fonts & provide alternative fonts

• Specify the font size in terms of %, em or a relative value

• Use adequate font size - 10pt min

• Limit the use of ALL CAPS

• Limit the use of font variations

Fonts

• Differentiate links with theme elements besides color

• Use descriptive link text

• Do not use images for links

• Avoid super short or long links

• Design link focus indicators

• Ensure link text makes sense on its own

Links

• Use animation, video & audio carefully & selectively

• Avoid flashing/strobing content

• Provide alt ways to access content

• USE ALT TAGS! Be accurate, be succinct, avoid being redundant, avoid “image of” phrases, & use empty alt attributes for decorative images

Media

• Accessible menus • Dyslexia font • Contrast theme • Font resizing buttons • Visual focus indicators • Sitemap • Accessibility statement

Misc Features

Credit: https://www.calebthorne.com

Drupal All the Things4

Credit: http://blogs-images.forbes.com

Great News! D8 Does a Lot of Heavy Lifting

Credit: http://indianagrace.org

Great news! lots of accessibly baked into D8• More Semantic - more HTML5 elements and WAI-

ARIA landmarks, live regions, roles & properties • Aural Alerts - Drupal.announce() is now part of D8

now users can confidently provide timely messages • Controlled Tab Order - The TabbingManager is a

guide to both non-visual users and non-mouse users to access the elements on the page in a logical order

• Hidden/Invisible/On-focus - alternative to CSS display:none built in

Accessibility in D8


Great news! lots of accessibly baked into D8• Fieldsets - for radios & checkboxes now in the Form

API. Also used in the advanced search • jQuery UI - jQuery UI is now delivering Drupal's

autocomplete and modal dialog in Views UI • Alt Text - Alternative text is now required by default • Accessible Inline Form Errors - Drupal forms have

become more accessible with the addition of accessible inline form errors as an optional experimental Core module

Accessibility in D8 (cont)

Credit: http://cdn.pinthiscars.com

Extend Drupal Accessibility


Great news! lots of accessibly baked into D8Accessible Forms (D7) https://www.drupal.org/project/accessible_forms

This is a simple Drupal 7 module for adding form attributes for improved accessibility. Includes: required attribute to required fields, required label to required fields (instead of asterix *), aria-invalid to form fields with errors


Great news! lots of accessibly baked into D8Accessible Mega Menu (D7) https://www.drupal.org/project/accessible_mega_menu

This module provides integration with the Accessible Mega Menu jQuery plugin. An Accessible Mega Menu block is created for each menu. Accessible Mega Menu is an open source jQuery plugin provided by Adobe Accessibility (https://github.com/adobe-accessibility).


Great news! lots of accessibly baked into D8Add to Any (D7 & D8) https://www.drupal.org/project/addtoany

Share buttons for Drupal including the AddToAny universal share button, Facebook, Twitter, Google+, Pinterest, WhatsApp and many more.


Great news! lots of accessibly baked into D8Block ARIA Landmark Roles (D7) https://www.drupal.org/project/block_aria_landmark_roles

Inspired by Block Class, this module adds additional elements to the block configuration forms that allow users to assign a ARIA landmark role to a block.


Great news! lots of accessibly baked into D8High contrast (D7) https://www.drupal.org/project/high_contrast

Provides a quick solution to allow the user to switch between the active theme and a high contrast version of it.


Great news! lots of accessibly baked into D8HTML Tidy (D7) https://www.drupal.org/project/htmltidy

This module tidies Drupal's HTML output with HTML Tidy by optionally sanitizing it when it is saved or when it is displayed, like a traditional input formatter. Missing and mis-ordered tag components are replaced and reordered automatically so that user input doesn't break site structure with open tags and the like.


Great news! lots of accessibly baked into D8Readability Analyzer (D7) https://www.drupal.org/project/readability

This module is designed to help copywriters and editors develop more consistently readable content across a Drupal site. It performs five popular automated readability tests that provide a grade level equivalency of the difficulty of a page's readability. It enables you to set a target grade range for your site's content.


Great news! lots of accessibly baked into D8Switch Theme (D7) https://www.drupal.org/project/switchtheme

Adds a block to allow users to switch between enabled themes. Themes can be given 'user friendly' names and access can be controlled by user role. Switchtheme provides optional support for Browscap module to switch themes based on the browser of a visitor.


Great news! lots of accessibly baked into D8Text Resize (D7 & D8) https://www.drupal.org/project/text_resize

The Text Resize module provides your end-users with a block that can be used to quickly change the font size of text on your Drupal site. This module is primarily focused on increasing the accessibility of your pages, by helping visually-impaired users to adjust the text size so that it is most comfortable for their eyesight.

Credit: http://www.uglydogbooks.com

Accessibility Resources5


Accessibility Resources - General

• Types of Disabilities - https://www.w3.org/WAI/intro/people-use-web/diversity

• Accessibility Law - http://webaim.org/articles/laws/usa • Understanding Web Accessibility - http://uiaccess.com/

understanding.html • User Stories - https://www.w3.org/WAI/intro/people-use-web/

stories • Design/Theme Specific - http://alistapart.com/topic/accessibility


Accessibility Resources - Guidelines & Checklists

• WCAG 2.0 - https://www.w3.org/TR/WCAG20/#guidelines • WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklist • Section 508 - http://www.section508.gov • Section 508 Checklist - http://webaim.org/standards/508/

checklist • ATAG - https://www.w3.org/WAI/intro/atag.php • UAAG - https://www.w3.org/WAI/intro/uaag.php • General checklist - http://a11yproject.com/checklist.html


Accessibility Resources - Tools

• Overview of Tools - http://webaim.org/articles/tools • General Tool - http://pa11y.org • Visualization Toolkit - http://khan.github.io/tota11y • Color Blindness Simulator - http://www.color-blindness.com/

coblis-color-blindness-simulator • Color Safe - http://colorsafe.co • VoiceOver - http://webaim.org/articles/voiceover • Wave - http://wave.webaim.org


Accessibility Resources - Drupal

• Accessibility Statement - https://www.drupal.org/about/features/accessibility

• Accessibility in D8 - https://www.drupal.org/node/2004876 • Front-end accessibility - https://www.drupal.org/node/464472 • Back-end accessibility - https://www.drupal.org/node/1637990 • Site builder accessibility - https://www.drupal.org/node/394094 • Accessibile modules - https://www.drupal.org/node/394252

Your Challenge

Credit: https://ronniemcbrayer.files.wordpress.com

Questions/Comments? Slides: slideshare.net/CarieFisher

Twitter: @cariefisher