Date post: | 21-Apr-2017 |
Category: |
Internet |
Upload: | kendra-skeene |
View: | 3,580 times |
Download: | 0 times |
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
Access by Default #GWO2016 @kskeene
Users with disabilities are a large audience
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
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%
Access by Default #GWO2016 @kskeene
We’re all Temporarily Able-Bodied
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
Department of Justice Rulings
●edX●Carnival Cruiselines●SAM.gov●Seattle Public Schools
… and so many more
What We Did
Access by Default #GWO2016 @kskeene
Community Health
Veterans Service
Governor’s Office
Attorney General
Public Safety
Dept. of LaborTechnology AuthorityDept. of Revenue
Human ServicesEnvironmental Protection
Planning and
BudgetInspector General
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
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...
Access by Default #GWO2016 @kskeene
We reviewed every element of every theme for color contrast
and font legibility
Access by Default #GWO2016 @kskeene
Accessible Platform Themes
Using Common Tools:● Google Chrome
○ FontFace Ninja ○ ColorZilla
● WebAIM Color Contrast Checker● Google Spreadsheet
Access by Default #GWO2016 @kskeene
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?
Access by Default #GWO2016 @kskeene
Access by Default #GWO2016 @kskeene
We didn’t know.
Access by Default #GWO2016 @kskeene
What You Can Do
Access by Default #GWO2016 @kskeene
Quick Wins - Think About:
1.Color2.Type3.Images4.Semantics5.Links
Access by Default #GWO2016 @kskeene
6.ARIA tags7.Forms8.Tables9.Javascript
Quick Wins - Checklist
A11Y Project Checklisthttp://a11yproject.com/checklist.html
Access by Default #GWO2016 @kskeene
1.Color me accessible
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
Color Testing
Build in color contrasts checkers for tools that allow users to select their own colors
Building the Tools:
Access by Default #GWO2016 @kskeene
2. Type - Size Matters
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
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/
Access by Default #GWO2016 @kskeene
●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
Access by Default #GWO2016 @kskeene
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
Speaking of Hiding Elements...
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
Speaking of Hiding Elements...
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)
Access by Default #GWO2016 @kskeene
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:
Access by Default #GWO2016 @kskeene
5. Links Connect Us
Access by Default #GWO2016 @kskeene
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"
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
Access by Default #GWO2016 @kskeene
ARIA Landmark roles
HTML attributes that provide “landmarks” for screen readers navigating a page●<header role=“banner”>●<div role=“search”>
7. Form and Function
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
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.)
Access by Default #GWO2016 @kskeene
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
Access by Default #GWO2016 @kskeene
Access By DefaultAccessible code is better for everyone
We’re hiring! Drupal Solutions Analyst
contact me: @kskeene