Embed Size (px)
Citation preview
Designing for Everybody Workshop
Accessible, Responsive, Universal
Design in Drupal
1:30 pm – 5:00 pm
night kitchen interactive
Agenda
Part 1 (1:30pm – 3:00pm)•Introductions•Accessible First•Standards & Requirements•Using Drupal•Visual Design•Creating Content
Break (3:00pm – 3:15pm)
Part 2 (3:15pm – 5:00pm)•Case Study: Everybody•Resources •Tips and Tricks•Lessons Learned•Discussion
Part 1
Introductions
Your Priorities
• Accessible First (universal, responsive, accessible web design)
• Using Drupal to meet Accessibility Standards• Resources for accessible design• Tips and Tricks• Accessibility Requirements/Standards• Lessons Learned from EveryBody: An Artifact History of
Disability in America• Case Study: EveryBody: An Artifact History of Disability
in America
Aptitudes and Interests
• How many use Drupal already?• Do you do theming?• Do you develop modules?• How many are comfortable with PHP?• How many lead teams with these capabilities?• Do you want to dive deep into code or get a high
level across the board?• If deep dive, which areas to focus on?
Accessible First
What does Accessible First mean?
• A model of universal design for the web
• Inspired by– universal design principles – responsive design– “mobile first”
Typical Approach
• Design for a general audience first
• Retrofit to be accessible
Accessible First Approach
• W3C accessibility guidelines shape the fundamental building blocks of the site
• iteratively integrate…– text content– images and media– interface design elements
True Accessibility
• everywhere– responsive to the browsing environment
– mobile, tablet and screens of all sizes • everyone
– simplicity and ease-of-use for all audiences
– people of all ages, physical and mental abilities
Accessible First thoughts
• Accessible and Usable are not the same• Accessible is not about Graceful Degradation for
user; it is about Progressive Enhancement of your features
• Accessible is subjective
Universal Design Principles
• Equitable
• Flexible
• Simple & Intuitive
• Perceptible
• Tolerant
• Low Physical Effort
• Size and Space for Approach and Use
• Consistent
Responsive design
• Responsive, liquid, adaptive design– http://mashable.com/2013/01/16/adaptive-design-
explanation/– http://liquidapsive.com/
• Responsive is good for accessibility– simpler– universal– streamlined– scales well– typography-oriented vs image-oriented– EX:
http://bradfrost.github.com/this-is-responsive/patterns.html
Static
Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.
Liquid
Liquid (also called "Fluid") is characterized by scaling the width of parts of the design relative to the window. It tends to fail when the window is much smaller or much larger than it was originally designed for.
Adaptive
Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.
Responsive
Responsive is characterized by having defined layouts for different resolutions. Within each layout, the design is liquid and resizes the width of elements relative to the changing window size.
mobile first – constraints
• Screens are small– Prioritize what really matters
• Connections are slow– Vigilant about performance/page loads
• Attention is limited– Quick in and out
• Location and time matter– Messaging can change based on location or
time of day
mobile first – capabilities
• direction: from a digital compass
• gyroscope: 360 degrees of motion
• audio: input from mic; output to speaker
• video & image: capture & input from camera
• dual cameras: front & back
• device connections: bluetooth
• proximity: closeness to physical objects
• ambient light: light/dark environment aware
• NFC: Near Field Communications RFID
mobile first – organization
• focus on content first, navigation second
• well-placed navigation allows dive deeper or pivot
• reduce navigation for clarity and focus
• simplicity is appreciated
mobile first – actions
mobile first – actions
• using websites with our hands
• go BIG with touch targets
• become familiar with touch gestures
• natural user interfaces (NUIs) are your friend
• transition from on-hover menus and functions
• consider non-touch and hybrid devices as well.
mobile first – inputs
• embrace mobile for contributors whenever and wherever inspiration strikes
• use input types, attributes and masks to make mobile input easier
• choose the right layouts for sequential, non-linear and in-context forms
mobile first – layouts
• mobile will continue to change at a breakneck pace for foreseeable future
• let mobile browsers know you are designing for them
• account for differences in screen resolution with higher resolution images
• be flexible, fluid and responsive in your layouts• know the lines between device experiences• reduce to minimum amount necessary
mobile first – conclusion
• take advantage of the growth to innovate
• embrace mobile constraints
• use capabilities to innovate for mobile
• build on web knowledge, but focus on mobile
• test your designs and code on devices
• mobile device stores are good for testing
• prototype and iterate
Audience
• Accessible first means defining accessible, and defining accessible means defining disabilities that it addresses, which means defining audience groups
• Defining two sets of audience priorities– Assistive technologies– Content & Messaging
Accessibility Requirements/Standards
Understanding the guidelines
The list of guidelines
• WCAG: http://www.w3.org/TR/WCAG/• Compliance with (A, AA, AAA)
– In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest)
– http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head
• Section 508 web guidelines are out of date– Draft version is essentially equivalent to
WCAG 2.0 Level A and AA conformance
How to meet the guidelines
– http://www.w3.org/WAI/WCAG20/quickref/– Cross references the spec with the techniques
Key considerations
Top level topics
Content Considerations
• Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• Time-based Media: Provide alternatives such as captions, transcripts and sign-language videos.
• Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Content Considerations
• Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
• Readable: Make text content readable and understandable (more later)
• Sufficient Time: Provide users enough time to read and use content.
• Seizures: Do not design content in a way that is known to cause seizures.
Functional Considerations
• Navigable: Provide ways to help users navigate, find content, and determine where they are.
• Keyboard Accessible: Make all functionality available from a keyboard.
• Predictable: Make Web pages appear and operate in predictable ways.
• Input Assistance: Help users avoid and correct mistakes (e.g. web forms)
• Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
Typical museum project = A
• (as many AA & AAA as possible)• Eg Color contrast important• Eg Media equivalents not always feasible• Live text everywhere• ALT tags
Accessible First = AA
• (and AAA when feasible)• Skip links• Access keys/keyboard navigation• “Explicit” headings (verbose)• AAA: color compliance (ratio of contrast)• Robust ALT tags & accessible content
Assistive technologies
• Screen readers (e.g. JAWS, HAL)• Screen magnifier software (e.g. Dolphin Lunar)
– Physical magnifiers also an option• Browser features (browser zooming, access keys)• Nontraditional input devices (name?)
– Voice-based data input systems (e.g. Dragon Naturally Speaking)
– Alternate cursor movement systems (e.g. head wand or button input)
• Nontraditional output device (braille display)
Using Drupal to meet Accessibility Standards
The Nuts and Bolts
Base themes to choose
• Omega: Responsive and accessible out of the box• or Adaptive Theme: accessible, not as responsive
Modules to use
• Less CSS Preprocessor – Lets you use Less CSS in Drupal; plays nicely with Omega
• Menu Attributes – Allows you to add access keys and link titles to menus
• Media – Allows you to field images (i.e, add more than just alt text), and create multiple renderable view modes.
• Theme Developer – Shows how page elements are being rendered so you know what to customize.
• WYSIWYG + CKEditor – Give you a better environment for adding accesskeys and titles to links.
• Entity View Modes – Give you better control for rendering from the Views module
• Fences or Display Suite – Gives you better control of how fields get rendered if you don’t want to use code
Less CSS
Menu Attributes
Media Fields
Theme Developer
CKEditor
Entity View Modes
Display Suite
Theming Techniques
• Copy the base .tpl.php files into your theme so you know exactly what is being rendered
• Customize your .tpl.php files to remove extraneous markup• Custom theme_field() functions for your fields to remove
extraneous markup and add in any markup you need for accessibility.
• Leverage the API as much as possible– Eg, use l() to make links instead of manually building up
<a> elements.• Leverage view modes for rendering entity references, views,
and media
Skip Link
Field Formatter
Menu Formatter
Content fields
• Separate content into fields to help make an accessible layout
• Flow - Think about how the content in these fields will sound as it’s read by a screenreader scanning down the page.– Title: limit length and reflect Body copy text– Header: brief, highlighted, primary message– Body: main copy, supporting details, explaining ideas
• Summary – pulled for Site Map, describes top-level pages in navigation, helps range of visitors find content more easily
Image Fields
Field out your images with the Media module
Populate these fields with text that describes the images for visually-impaired users.
• Image Title – what is the image?• Image Caption – how does the image reflect the page
content?• Alt tag – what are the most important details in the
image?
Performance optimization
• Minimizing latency for accessing pages improves experience for everyone
• Apache output compression and cache rules from HTML5 Boilerplate
• Drupal page caching• Drupal CSS/JS aggregation• CDN Module• Advanced modules (Varnish, Memcache, etc)
Use as much HTML5 as possible
• The hope is that it will improve accessibility in the future as browser support becomes more universal.
Visual Design for Accessibility
Sometimes accessible is not pretty
(…and that’s OK).
Design features to consider
• Color• Typography• Images• Styling• Layout
Color
• Meet up to AAA standards for all color combinations in the design. (http://snook.ca/technical/colour_contrast/colour.html)
• Avoid using color alone to convey information.• Develop a proper color scheme and arrangement of
colors.• Goal: Create differentiation among the colors used, no
matter how they are perceived by a visually-impaired individual.
• How: Work with hue, value, and saturation
Hue
• Limit color palette to a maximum of three or four hues• Maximize contrast between hues
– Avoid placing analogous colors immediately next to each other
• Considering the most common type of color blindness– Avoid the use of green and greenish hues with red and
reddish hues
Value
• Maximize value contrast – Do not place same-value colors immediately next to
each other
• Perform grayscale test to check value variations
Saturation
• Use highly saturated colors– For main accent colors, use hues in their “purest”
form, i.e. no tints, no shades.
Typography
Typographical design before graphical design
Typefaces
• Limit use of serif fonts. Use sans-serif fonts for body text.
• Helpful font features:– Even spacing between letters– Wide letters– Heavy letters– Large punctuation marks– Openness
Font Size
• Absolute Minimum = 12px• Body copy = 15px• Titles = 16px+• If body copy is 15px then titles (H1s) should be larger than
16px. Determining a minimum size is tricky because there could be many headings (like up to H6), so their sizes would have to work in relation to this number.
• To distinguish Title fields and Header fields consider both size and color.
• Body fields: Recommended to use black text on a white background or white text on a black background. (BIG debate here)
APHont
• http://www.aph.org/products/aphont/• Typeface for low vision readers - Available for free to
target audiences or those designing for those audiences.
• Not available as a web-font• Use in stylesheets along with standard fonts
– If users have it installed, it will be used is specified in the CSS
Use of Images
• Using rotating image carousels with caution• Don’t use text-based images when live text can do the
job– Use CSS image replacement when needed
Styling & layout
• Use appropriate header nesting.– Check with an outlining tool
• Strive to always have an open, uncluttered page layout.
JavaScript
• Design the site to work well without Javascript, and then enhance it for your users that have Javascript
• Think about how your Javascript will work for users with alternate input and output devices– Eg, how will your JS rollover work with keyboard-
only users?• Image carousels with auto advance are problematic
for screenreader users and those with Javascript disabled.
Creating Accessible Content
Harder than it sounds…
Content drives accessibility!
• Text is accessible
• Goldilocks Syndrome
• Accessible Content…– comes first – takes time– requires careful consideration– drives design
Write appropriately for audience
• Consider the audiences for the site• AAA: crafting content to be comprehensible by people
with cognitive disabilities? • Challenges
– visual impairments– cognitive disabilities/neuro-diversity
Crafting Content for Readability
• Accessibility and readability go hand-in-hand• Use language that can be understood by a large
number of people, even if you are discussing complex ideas.
• Don’t use metaphors, idioms or jargon unless your intent is to explicate that language on the page
• Be aware of ESL readers, when appropriate
Organize content into well-defined chunks• Use Visual breaks
• Exhibition design construct applies here too– Streakers– Strollers– Studiers
With a large volume of content
• Give ample opportunities for brief review and/or practice
• Repeat important ideas, give multiple examples• Highlight or foreground main ideas • Consider including dense content in a drill down link
that is not in the primary flow or arch of the narrative• Read more and show/hide links do not resolve the
problem
Use concise and clearly descriptive language
• Short sentences with just enough descriptive detail for those who can’t see accompanying visuals
• Use active voice• Expand acronyms and abbreviations• You do NOT need to dumb it down
Other Content Considerations
There’s more to content than body copy…
Non-visual displays (Screen readers, braille readers)
• How will text sound to people using screen readers?• How will it be perceived by people using other
assistive technologies?
Link Language
• Meaningful and descriptive language for links– Use active voice– Expand acronyms and abbreviations
• Ensure that color alone is not used to convey content or direction
• Pair icons/graphics with text to address multiple user needs
Images
• Use high-quality images with rich visual details
• Describe image and its relevance to your narrative within body copy
• Use descriptive language with enough detail – Short titles– Descriptive captions– Alt-text
Man on Moon
Using the ultimate in assistive technology: A moonwalker could not survive in the hostile space environment without significant support, including a pressurized suit with oxygen supply, customized boots, gloves, helmet, and face shield.
An astronaut in his spacesuit stands on the moon surface. Beside him are the United States flag, the lunar lander and a lunar rover.
Title
Caption
ALT Text
Audio & Video
• How to degrade A/V assets to make them as accessible as possible
– Transcripts
– Audio reader
• Using A/V to provide supplemental information targeted to a specific accessibility group of users
• For all video:
– Provide captions
– If no captions, provide a transcript either on the page or as a download.
• For all audio:
– Provide a transcript either on the page or as a download.
WebForms
• CAPTCHA is a barrier to accessibility – use honeypot or use CAPTCHA for a second chance– Need audio versions of CAPTCHAS
• Each field should have descriptive label visible to screenreaders
• Submission errors are not just visual; must be available to screenreaders and keyboard users
Sitemap
• Break the site map up into discreet organized sections and provide brief descriptors of each to help with comprehension and navigation. See Drupal section for info about using the Summary field to provide these descriptors.
Include an Accessibility Statement
• Identify the level of web accessibility the website aims to achieve. With which level of standards have you complied? Are there any special features to be made aware of?
• Ex. Drupal http://drupal.org/about/accessibility • Browser Aids• Provide guidelines for how to access and use built-in
browser aids (Explorer, Chrome, Firefox,…)• Encourage feedback if people encounter problem
Part 2
Case Study
Everybody: An Artifact History of Disability in America
Everybody
• Mission– Exceed minimum standards for accessibility
• Solution– Accessible First
• Audience– Accessibility audience
• vision impaired• motor impaired• which disabilities and what priority?
– Curatorial audience• typical audience breakdown
Discovery
• Accessibility consultant helped us frame the questions– Nancy Massey – long history as an accessibility
advocate; specializes in websites– Made sure we asked the right questions; made sure
we received appropriate answers – Provided a sounding board along the way and
reviewed the site at critical points to help with QA
Content
• Artifact history = Images of objects primary content• Question: How do we make an object / image-based
exhibit accessible to everyone, including the visually impaired?
• Meta-data is key– captions and alt-text for all images– image-related text had to be as powerful a
conveyor of the content themes as the images themselves, whenever possible.
Thematic structure
• How to help users stay oriented to their location within the site, within the story arc of the content—using design elements to aid this effort
Number of images and variety of image sizes• To handle the large number of images, we
provided an Image Gallery on most pages
• We made images viewable in small and large sizes for the greatest accessibility
Design
• Navigation• Use of titles, summarizes and header image• Detailed body copy• Image gallery with large thumbs (toenails)• Fonts?
– APH font default (if installed)– Crete Regular– Open Sans Bold– Open Sans Regular
Development
• Agile/Scrum– Forced client to prioritize– Focused on features and the accessible
requirements for each feature, instead of an afterthought
– Developing iteratively to address wide range of platforms, audiences, assistive technologies
User Testing
• Test early and often• Identify individuals for your test group early• An ounce of Prevention = Pound of cure
Testing outcomes
• Prev/Next navigation– Round 1 moved “next page” navigation from above
the image gallery to below the image gallery– Round 2 duplicated navigation above and below
image gallery; also added the previous page link• Move Accessibility Statement to first position in
the header• Move caption above photos on image overlays
Resources for Accessibility
Resources
• WCAG page– how to meet the guidelines (mentioned above)
• Section508.gov– governmental agency compliance standards and assistive
technology information
• Accesskeys.org– rating sites according to disability
• http://yaccessibilityblog.com/– Stories about accessibility in media and the web from people
with disabilities.
Design sites/tools
• Browser add-ons– WAVE tools (http://wave.webaim.org/toolbar/)
• Color contrast websites and spreadsheet
Testing sites/tools
• Ipad colorblindness app – Hueview or CV Simlulator• http://www.read-able.com/ – Readability testing tool
for any website• JAWS for testing ($$$, 45 min at a time if you don’t
want to buy it)• Keyboard only (no mouse)• Use only non-dominant hand (limited motor skills)
People to follow on twitter
• Bruce Lawson (@brucel)• Peter Krantz (@peterkz_swe)• A List Apart (@alistapart)• John Foliot @johnfoliot• Mario Parise @marioparise
Tips and Tricks
Tools and practices
Tips and Tricks
• Vet accessibility info on the web
• Review other sites
• Visual design tools– HSV color picker, HueVue app
• Working language for fonts & styles
• KISS
Lessons Learned
From our first Accessible First project
Key Lessons
• Content is the biggest hurdle
• Can’t make everybody happy
• Accessible sometimes feels wrong
What we would've done differently
• High contrast stylesheets
• More sophisticated font sizing– text buttons to make it bigger
• New responsive layout techniques– Omega 3 vs Omega 4– 960.gs vs SUSY
What we would’ve done with more time/budget• Outsourced accessibility testing to
professional organizations
• More into content development – writing for accessibility rather than about
accessibility
• Translation to different languages
Accessible is NOT just about standards and assistive technologies, its about people
• Audience includes cognitive disabilities, limited motor function
• Testing with assistive technologies helpful but not enough, as non-disabled don't use them
• Test with people representing a diverse pool of disabilities
Discussion
