Access by Default

transcript

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

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

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

Accessible Platform Code: Result

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

and heading order

76 sites improv

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

Accessible Platform Themes: Result

13 themes updated●color contrast●text legibility

76 sites improv

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

Color Testing

Test usability against color lossNoCoffee Vision Simulator for Chrome

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/

●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

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>

Just Say No to target="_blank"

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

http://allyjs.io/

Useful Link Text

Access by Default

Internet