Designing for Everybody Workshop

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

Us

Matthew Fisher President, Partnermatthew@whatscookin.com

Matt Donadio Lead Developermattd@whatscookin.com

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