Backend accessible
-
Upload
mark-casias -
Category
Technology
-
view
82 -
download
0
Transcript of Backend accessible
![Page 1: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/1.jpg)
Backing Yourself into an
Accessible Corner
![Page 2: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/2.jpg)
@teampoop
http://www.abqwebgeeks.orgslideshare.net/teampoop
Mark brings a fifteen year programming background and eight years of Drupal experience to his role as Senior Drupal Developer at Mediacurrent. Highly involved in his local web community, Mark runs the ABQ Webgeeks Group and started the Albuquerque Drupal Users group.
Senior Drupal Developer - Mediacurrent
Shameless Self Promotion 1
![Page 3: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/3.jpg)
Mediacurrent Dropcasthttps://www.mediacurrent.com/[email protected]
@kepford@imariohernandez@ryanissampson
Shameless Self Promotion 2
![Page 4: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/4.jpg)
Mediacurrent Friday 55 things5 ways5 minutes on various topics.
Video (sorry)
https://www.mediacurrent.com/friday5
Shameless Self Promotion 3
![Page 5: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/5.jpg)
She’s my pal
This is DruLast thing about me.
![Page 6: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/6.jpg)
Accessibility Primer
Modules
Resources
Backend Development
4
3
2
1
Things covered
![Page 7: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/7.jpg)
Accessibility Primer
![Page 8: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/8.jpg)
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
![Page 9: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/9.jpg)
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
![Page 10: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/10.jpg)
US Population = 282,000,000(2000 census data)
Credit: https://openclipart.org
![Page 11: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/11.jpg)
Total Disabled Population = 57,000,000(2000 census data)
Credit: https://openclipart.org
~20%
![Page 12: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/12.jpg)
Severely Disabled Population = 28,000,000(2000 census data)
Credit: https://openclipart.org
~10%
![Page 13: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/13.jpg)
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
![Page 14: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/14.jpg)
Backend Development
![Page 15: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/15.jpg)
Myth
The First Step to Accessibility: Good
Design
![Page 16: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/16.jpg)
She’s my pal
This is DruColors
![Page 17: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/17.jpg)
She’s my pal
This is DruBetter Colors
![Page 18: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/18.jpg)
She’s my pal
This is DruSeriously
Don’t let me design your site.
![Page 19: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/19.jpg)
![Page 20: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/20.jpg)
Completely
Accessible!
![Page 21: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/21.jpg)
Semantic HTML
http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
![Page 22: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/22.jpg)
Skip to Content
http://a11yproject.com/posts/skip-nav-links/
![Page 23: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/23.jpg)
HTML5 Support
http://html5accessibility.com/
![Page 24: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/24.jpg)
ARIA
http://www.clarissapeterson.com/2012/11/html5-accessibility/
![Page 25: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/25.jpg)
Images
• Use ALT Text• ALT Text gives full meaning of the image in relationship to the page
• <figure> and <figcaption> tags• USE ALT TEXT!
![Page 26: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/26.jpg)
Forms
• Use <label> Elements• <fieldset> and <legend> elements• use the aria-required=“true" property for required fields
• Specify data types.• Input Patterns
![Page 27: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/27.jpg)
Form Example 2
<label for=”creditcard”>Credit Card Number</label><input name="CreditCard" id="creditcard" pattern=”[0-9]{13,16}”
title=”A credit card number is 13 or 16 digits.” />
![Page 28: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/28.jpg)
Document Structure
<fieldset><legend>Your Favorite Color</legend><input type=”radio” name=”favoritecolor” value=”blue” id=”blue”><label for=”blue”>Blue</label><input type=”radio” name=”favoritecolor” value=”green” id=”green”><label for=”green”>Green</label><input type=”radio” name=”favoritecolor” value=”purple” id=”purple”><label for=”purple”>Purple</label></fieldset>
![Page 29: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/29.jpg)
Testing
• http://wave.webaim.org/• http://pa11y.org/• Apple built in VoiceOver• Pretty sure there’s something for
Windows
![Page 30: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/30.jpg)
Testing
Seriously.. try navigating your site without a mouse. I double dog dare
you
![Page 31: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/31.jpg)
Testing
![Page 32: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/32.jpg)
Modules
![Page 33: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/33.jpg)
Modules
Accessible Forms (D7)https://www.drupal.org/project/
accessible_formsThis 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
![Page 34: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/34.jpg)
Modules
Accessible Mega Menu (D7)https://www.drupal.org/project/
accessible_mega_menuThis 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).
![Page 35: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/35.jpg)
Modules
Add 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.
![Page 36: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/36.jpg)
Modules
Block ARIA Landmark Roles (D7)https://www.drupal.org/project/
block_aria_landmark_rolesInspired 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.
![Page 37: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/37.jpg)
Modules
High 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.
![Page 38: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/38.jpg)
Modules
HTML 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.
![Page 39: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/39.jpg)
Modules
Readability 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.
![Page 40: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/40.jpg)
Modules
Switch 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.
![Page 41: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/41.jpg)
Modules
Text 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.
![Page 42: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/42.jpg)
Resources
![Page 43: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/43.jpg)
Resources
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
![Page 44: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/44.jpg)
Resources
WCAG 2.0 - https://www.w3.org/TR/WCAG20/#guidelines WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklistSection 508 - http://www.section508.govSection 508 Checklist - http://webaim.org/standards/508/checklistATAG - https://www.w3.org/WAI/intro/atag.phpUAAG - https://www.w3.org/WAI/intro/uaag.phpGeneral checklist - http://a11yproject.com/checklist.html
![Page 45: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/45.jpg)
Resources
Overview of Tools - http://webaim.org/articles/toolsGeneral Tool - http://pa11y.orgVisualization Toolkit - http://khan.github.io/tota11yColor Blindness Simulator - http://www.color-blindness.com/coblis-color-blindness-simulatorColor Safe - http://colorsafe.coVoiceOver - http://webaim.org/articles/voiceoverWave - http://wave.webaim.org
![Page 46: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/46.jpg)
Resources
• 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• Clarissa Patterson’s awesome post I promised to be in the
resources part:http://www.clarissapeterson.com/2012/11/html5-accessibility/
![Page 47: Backend accessible](https://reader036.fdocuments.net/reader036/viewer/2022062621/58abd1a81a28ab68068b7047/html5/thumbnails/47.jpg)
Thank you!