access by default
TRANSCRIPT
![Page 1: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/1.jpg)
Access By DefaultAccessible code is better for everyone
![Page 2: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/2.jpg)
Kendra Skeene@kskeene
Director of Product GeorgiaGov Interactive@GeorgiaGovTeam
![Page 3: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/3.jpg)
![Page 4: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/4.jpg)
Why universal access matters
What we did at GeorgiaGov
Easy wins for accessible HTML
Access by Default #GWO2016 @kskeene
![Page 5: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/5.jpg)
Disabilities come in many Forms
Visual AuditoryMotor SkillsCognitive Seizure
![Page 6: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/6.jpg)
Why?Access by Default #GWO2016 @kskeene
![Page 7: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/7.jpg)
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
![Page 8: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/8.jpg)
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
“
”
![Page 9: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/9.jpg)
Accessible websites are User Friendly websites
Access by Default #GWO2016 @kskeene
![Page 10: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/10.jpg)
Users with disabilities are a large audience
Access by Default #GWO2016 @kskeene
![Page 11: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/11.jpg)
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
![Page 12: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/12.jpg)
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.
![Page 13: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/13.jpg)
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%
![Page 14: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/14.jpg)
Access by Default #GWO2016 @kskeene
![Page 15: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/15.jpg)
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.
![Page 16: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/16.jpg)
Accessibility is the Law
![Page 17: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/17.jpg)
Department of Justicebasing settlements on conformance to WCAG 2.0 (Level AA) guidelines
Access by Default #GWO2016 @kskeene
![Page 18: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/18.jpg)
Department of Justice Rulings
●edX●Carnival Cruiselines●SAM.gov●Seattle Public Schools
… and so many more
![Page 19: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/19.jpg)
What We Did
Access by Default #GWO2016 @kskeene
![Page 20: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/20.jpg)
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
![Page 21: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/21.jpg)
Enterprise Web Platform - Managing over 75 state websites - more than 400 content managers
maintain contentGeorgia.gov (different codebase)- managing code AND content
![Page 22: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/22.jpg)
Government has a responsibility to be accessible
Access by Default #GWO2016 @kskeene
![Page 23: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/23.jpg)
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
![Page 24: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/24.jpg)
But we weren’t there yet
![Page 25: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/25.jpg)
But we weren’t there yet
![Page 26: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/26.jpg)
Accessible Platform Initiative
WCAG 2.0 (Level AA) compliant code and design
![Page 27: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/27.jpg)
Accessible Platform Initiative
Partnership with AMAC to find the gapsAMAC provided 13 reports across●13 themes●33 page types
![Page 28: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/28.jpg)
Review Research
Improve
12
3
![Page 29: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/29.jpg)
Accessible Platform Code: Result
24 code improvements●link text●tabbing visibility●structural HTML
and heading order
76 sites improv
ed
![Page 30: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/30.jpg)
Now for the really tedious part...
Access by Default #GWO2016 @kskeene
![Page 31: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/31.jpg)
We reviewed every element of every theme for color contrast
and font legibility
Access by Default #GWO2016 @kskeene
![Page 32: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/32.jpg)
Accessible Platform Themes
Using Common Tools:● Google Chrome
○ FontFace Ninja ○ ColorZilla
● WebAIM Color Contrast Checker● Google Spreadsheet
Access by Default #GWO2016 @kskeene
![Page 33: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/33.jpg)
Accessible Platform Themes
![Page 34: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/34.jpg)
![Page 35: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/35.jpg)
Before
![Page 36: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/36.jpg)
After
![Page 37: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/37.jpg)
Accessible Platform Themes: Result
13 themes updated●color contrast●text legibility
76 sites improv
ed
![Page 38: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/38.jpg)
WCAG 2.0 (Level AA)!
![Page 39: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/39.jpg)
That’s great, but...
![Page 40: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/40.jpg)
Why didn’t we do all that in the first place?
Access by Default #GWO2016 @kskeene
![Page 41: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/41.jpg)
Access by Default #GWO2016 @kskeene
We didn’t know.
![Page 42: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/42.jpg)
Access by Default #GWO2016 @kskeene
![Page 43: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/43.jpg)
What You Can Do
Access by Default #GWO2016 @kskeene
![Page 44: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/44.jpg)
Quick Wins - Think About:
1.Color2.Type3.Images4.Semantics5.Links
Access by Default #GWO2016 @kskeene
6.ARIA tags7.Forms8.Tables9.Javascript
![Page 45: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/45.jpg)
Quick Wins - Checklist
A11Y Project Checklisthttp://a11yproject.com/checklist.html
Access by Default #GWO2016 @kskeene
![Page 46: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/46.jpg)
1.Color me accessible
Access by Default #GWO2016 @kskeene
![Page 47: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/47.jpg)
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
![Page 48: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/48.jpg)
Color Testing
Test usability against color lossNoCoffee Vision Simulator for Chrome
Access by Default #GWO2016 @kskeene
![Page 49: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/49.jpg)
Color Testing
![Page 50: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/50.jpg)
Build in color contrasts checkers for tools that allow users to select their own colors
Building the Tools:
Access by Default #GWO2016 @kskeene
![Page 51: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/51.jpg)
2. Type - Size Matters
Access by Default #GWO2016 @kskeene
![Page 52: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/52.jpg)
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
![Page 53: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/53.jpg)
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
![Page 54: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/54.jpg)
Touch Targets - Bigger is Better
●make touch targets as large as is reasonable
●at least 9mm high x 9mm wide
●surrounded by inactive space
![Page 55: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/55.jpg)
3. Image Descriptions
Access by Default #GWO2016 @kskeene
![Page 56: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/56.jpg)
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="" … >
![Page 57: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/57.jpg)
To Alt, or Not to Alt?
Decision Tree:https://www.w3.org/WAI/tutorials/images/decision-tree/
Access by Default #GWO2016 @kskeene
![Page 58: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/58.jpg)
●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:
![Page 59: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/59.jpg)
Text Representation for Glyphs
Provide hidden text for glyphs and icons that aren’t images (e.g. Font Awesome icons)
![Page 60: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/60.jpg)
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
![Page 61: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/61.jpg)
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
![Page 62: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/62.jpg)
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
![Page 63: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/63.jpg)
4. A Matter of Semantics(markup, that is)
Access by Default #GWO2016 @kskeene
![Page 64: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/64.jpg)
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
![Page 65: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/65.jpg)
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>
![Page 66: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/66.jpg)
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
![Page 67: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/67.jpg)
5. Links Connect Us
Access by Default #GWO2016 @kskeene
![Page 68: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/68.jpg)
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>
![Page 69: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/69.jpg)
Links
Just Say No to target="_blank"
![Page 71: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/71.jpg)
Useful Link Text
Read More
Apply For Child Support
✗✓
![Page 72: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/72.jpg)
Useful Link Text
●Provide relevant link text●WAI-ARIA attributes can add helpful text○ aria-label ○ aria-labelledby
![Page 73: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/73.jpg)
ARIA Labels for Useful Link Text
<a href="/underwater-datacenter">Read More</a>
![Page 74: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/74.jpg)
ARIA Labels for Useful Link Text
<a href="/underwater-datacenter" aria-label="Read more about Underwater Datacenters">Read More</a>
![Page 75: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/75.jpg)
6. ARIA fills in gaps
Access by Default #GWO2016 @kskeene
![Page 76: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/76.jpg)
ARIA Landmark roles
HTML attributes that provide “landmarks” for screen readers navigating a page●<header role=“banner”>●<div role=“search”>
![Page 77: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/77.jpg)
7. Form and Function
Access by Default #GWO2016 @kskeene
![Page 78: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/78.jpg)
Forms● Each form field needs a <label> ● Place any help text between the <label> and <input> fields
● Use <fieldset> to group related fields
![Page 79: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/79.jpg)
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)
![Page 80: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/80.jpg)
8. Table it
Access by Default #GWO2016 @kskeene
![Page 81: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/81.jpg)
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
![Page 82: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/82.jpg)
9. Javascript(I’ve got nothing witty for this one, sorry.)
Access by Default #GWO2016 @kskeene
![Page 83: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/83.jpg)
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
![Page 84: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/84.jpg)
Accessify all the things!
![Page 85: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/85.jpg)
Accessify all the things?
![Page 86: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/86.jpg)
Resources
http://idreaminblue.com/accessible-resources/● Checklists & Guides● Color Contrast Testers● Drupal Resources● Vision Simulators● Open Source Accessibility Testing
Access by Default #GWO2016 @kskeene
![Page 87: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/87.jpg)
![Page 88: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/88.jpg)
Access By DefaultAccessible code is better for everyone
![Page 89: Access by Default](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f9b32c760da3da068bd336/html5/thumbnails/89.jpg)
We’re hiring! Drupal Solutions Analyst
contact me: @kskeene