Access by Default

Access By DefaultAccessible code is better for everyone

Kendra Skeene@kskeene

Director of Product GeorgiaGov Interactive@GeorgiaGovTeam

Why universal access matters

What we did at GeorgiaGov

Easy wins for accessible HTML

Access by Default #GWO2016 @kskeene

Disabilities come in many Forms

Visual AuditoryMotor SkillsCognitive Seizure

Why?Access by Default #GWO2016 @kskeene

Accessible websites are Search Engine Friendly websites

Search Engines :Can’t “see” imagesCan’t “hear” audio Can’t interpret audio or video from a movieCan’t interpret color-coding or graphic representations

Use a text browser, such as Lynx, to examine your site. Most spiders see your site much as Lynx would. If features such as JavaScript, cookies, session IDs, frames, DHTML, or … Flash keep you from seeing your entire site in a text browser, then spiders may have trouble crawling it.

Google Says:

https://support.google.com/webmasters/answer/40349

“

”

Accessible websites are User Friendly websites


Users with disabilities are a large audience


How Large?

● 15% of the population has some form of disability

● 7 to 10% of men have some form of color blindness

● 4% of the population have low vision


Low Vision Conditions increase with Age

● 1/2 of people over 50 have a low-vision condition

● Most people over 40 need reading glasses to clearly see small objects or text

The fastest-growing population in the US is over 65 years of age.

Our Population is Aging

15% of US population is over the age of 65

sour

ce: w

ww

.pew

glob

al.o

rg/2

014/

01/3

0/gl

obal

-pop

ulat

ion

2015 projection65 and older: 14.7%15-64: 65.9%Under 15: 19.4%Total: 100%


We’re all Temporarily Able-Bodied


Coding for universal access to technology benefits all of us in the long term.

Accessibility is the Law

Department of Justicebasing settlements on conformance to WCAG 2.0 (Level AA) guidelines


Department of Justice Rulings

●edX●Carnival Cruiselines●SAM.gov●Seattle Public Schools

… and so many more

What We Did


Community Health

Veterans Service

Governor’s Office

Attorney General

Public Safety

Dept. of LaborTechnology AuthorityDept. of Revenue

Human ServicesEnvironmental Protection

Planning and

BudgetInspector General


Enterprise Web Platform - Managing over 75 state websites - more than 400 content managers

maintain contentGeorgia.gov (different codebase)- managing code AND content

Government has a responsibility to be accessible


Section 508 Accessible Websites

● Drupal 7 Platform ● Omega Base theme ● Child themes tested for accessibility● No frames● No flash● Fields for image alt text ● Fields to label tabular data● Webform labels

But we weren’t there yet

But we weren’t there yet

Accessible Platform Initiative

WCAG 2.0 (Level AA) compliant code and design

Accessible Platform Initiative

Partnership with AMAC to find the gapsAMAC provided 13 reports across●13 themes●33 page types

Review Research

Improve

12

3

Accessible Platform Code: Result

24 code improvements●link text●tabbing visibility●structural HTML

and heading order

76 sites improv

ed

Now for the really tedious part...


We reviewed every element of every theme for color contrast

and font legibility


Accessible Platform Themes

Using Common Tools:● Google Chrome

○ FontFace Ninja ○ ColorZilla

● WebAIM Color Contrast Checker● Google Spreadsheet


Accessible Platform Themes

Before

After

Accessible Platform Themes: Result

13 themes updated●color contrast●text legibility

76 sites improv

ed

WCAG 2.0 (Level AA)!

That’s great, but...

Why didn’t we do all that in the first place?



We didn’t know.


What You Can Do


Quick Wins - Think About:

1.Color2.Type3.Images4.Semantics5.Links


6.ARIA tags7.Forms8.Tables9.Javascript

Quick Wins - Checklist

A11Y Project Checklisthttp://a11yproject.com/checklist.html


1.Color me accessible


Color Contrast

4.5 : 1 color contrast ratio http://contrast-finder.tanaguru.com/ http://leaverou.github.io/contrast-ratio/ http://webaim.org/resources/contrastchecker/ Access by Default #GWO2016 @kskeene

http://contrast-finder.tanaguru.com/

http://leaverou.github.io/contrast-ratio/

http://leaverou.github.io/contrast-ratio/

http://webaim.org/resources/contrastchecker/

http://webaim.org/resources/contrastchecker/

Color Testing

Test usability against color lossNoCoffee Vision Simulator for Chrome


https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US

https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US

Color Testing

Build in color contrasts checkers for tools that allow users to select their own colors

Building the Tools:


2. Type - Size Matters


Typography - Size Matters

●Text should be 1em or larger ●Use relative units instead of pixels

●Increase line height - 1.2em - 1.6em

●Increasing text size by 200% should not break your layout

DON’T USE ALL CAPS. SCREEN READERS WON’T READ THE WORDS CORRECTLY.ALSO, IT’S HARDER TO READ FOR SIGHTED VIEWERS, BECAUSE THERE’S NOT ENOUGH VARIATION IN THE LETTERS.Access by Default #GWO2016 @kskeene

Touch Targets - Bigger is Better

●make touch targets as large as is reasonable

●at least 9mm high x 9mm wide

●surrounded by inactive space

3. Image Descriptions


Alt Attributes for All Images

Alt text for images that provide value or context to the information

Null alt text for decorative images <img alt="" … >

To Alt, or Not to Alt?

Decision Tree:https://www.w3.org/WAI/tutorials/images/decision-tree/


https://www.w3.org/WAI/

●Provide a field for alt text

●Use help text to guide content managers

●Don’t make alt text required

●Default to alt="" if no alt text is entered


Building the Tools:

Text Representation for Glyphs

Provide hidden text for glyphs and icons that aren’t images (e.g. Font Awesome icons)

Speaking of Hiding Elements...

DON’T use:● visibility: hidden;● display:none;● width:0px, height:0px

● text-indent: -10000px;

Hides text from screen readers, too (whoops!)focus box issue when tab focus is on the link


DO use (when hiding entire element)position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;

remove from the page flow and position off-screen

backup in case positioning is disabled

prevents left from being ignored


DO use (when hiding text but keeping other elements)

text-indent: -10000px;overflow-y:hidden;

Moves just the text off-screen

fixes the Firefox focus box issue when tab focus is on the link

4. A Matter of Semantics(markup, that is)


A Tag for Everything, and Everything in its Tag

Use tags for their specified purpose● don’t use a <div> for a <button>● <blockquote> is for quotes,

not indenting text

Heading Tags - Right Place, Right Time

● Use H1-H6 tags for headings only● <h1> for the main heading of the

page● Sequence Matters: <h6> should only come after <h5>,

which is after you use an <h4>, which is nested under <h3>, which should follow <h2>, which is nested under <h1>

Provide users with an option to choose the heading level for module headings for blocks that can be placed in different locations on a site.

Building the Tools:


5. Links Connect Us


Links

Use a “Skip to Main Content” link

that’s hidden until tab focus is on it<a href="#main-content" class="skip">Skip to Main Content</a>

Links

Just Say No to target="_blank"

Links

Don’t remove :focus outlines ●ally.js can help you :focus

http://allyjs.io/

http://allyjs.io/

Useful Link Text

Read More

Apply For Child Support

✗✓

Useful Link Text

●Provide relevant link text●WAI-ARIA attributes can add helpful text○ aria-label ○ aria-labelledby

ARIA Labels for Useful Link Text

<a href="/underwater-datacenter">Read More</a>

ARIA Labels for Useful Link Text

<a href="/underwater-datacenter" aria-label="Read more about Underwater Datacenters">Read More</a>

6. ARIA fills in gaps


ARIA Landmark roles

HTML attributes that provide “landmarks” for screen readers navigating a page●<header role=“banner”>●<div role=“search”>

7. Form and Function


Forms● Each form field needs a <label> ● Place any help text between the <label> and <input> fields

● Use <fieldset> to group related fields

Forms● Indicate required fields with * (not

just color)● Clearly mark fields with input errors

(not just using color)● Check tab order

(fix with tabindex if needed)

8. Table it


Tables for Tabular Data

● use <thead> to mark the table header row

● mark header cells <th> instead of <td>

● <caption> describes the data - like a title

9. Javascript(I’ve got nothing witty for this one, sorry.)


kendra skeene

It's either "Javascript FTW?" or this. Someone tell me what to do. :)

Javascript is not Evil

●JS should enhance the experience - but not be the only path to content.

●Don’t use inline Javascript●Provide fallbacks●tools like ally.js can help

Accessify all the things!

Accessify all the things?

Resources

http://idreaminblue.com/accessible-resources/● Checklists & Guides● Color Contrast Testers● Drupal Resources● Vision Simulators● Open Source Accessibility Testing


http://idreaminblue.com/accessible-resources/

http://idreaminblue.com/accessible-resources/

Access By DefaultAccessible code is better for everyone

We’re hiring! Drupal Solutions Analyst

contact me: @kskeene

Internet

Access by Default