SlideShare una empresa de Scribd logo
1 de 137
Descargar para leer sin conexión
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, Partner
matthew@whatscookin.com
Matt Donadio Lead Developer
mattd@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.
Designing for Everybody Workshop
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)
Designing for Everybody Workshop
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
Designing for Everybody Workshop
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
Designing for Everybody Workshop
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
Designing for Everybody Workshop
Designing for Everybody Workshop
Value
• Maximize value contrast
– Do not place same-value colors immediately next to
each other
• Perform grayscale test to check value variations
Designing for Everybody Workshop
Designing for Everybody Workshop
Saturation
• Use highly saturated colors
– For main accent colors, use hues in their “purest”
form, i.e. no tints, no shades.
Designing for Everybody Workshop
Designing for Everybody Workshop
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
Designing for Everybody Workshop
Designing for Everybody Workshop
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)
Designing for Everybody Workshop
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
Designing for Everybody Workshop
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.
Designing for Everybody Workshop
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
Designing for Everybody Workshop
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
Designing for Everybody Workshop
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
Designing for Everybody Workshop
Designing for Everybody Workshop
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
Designing for Everybody Workshop
Designing for Everybody Workshop
Designing for Everybody Workshop
Designing for Everybody Workshop
Designing for Everybody Workshop
Designing for Everybody Workshop
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.
Designing for Everybody Workshop
Design sites/tools
• Browser add-ons
– WAVE tools (http://wave.webaim.org/toolbar/)
• Color contrast websites and spreadsheet
Designing for Everybody Workshop
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)
Designing for Everybody Workshop
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

Más contenido relacionado

La actualidad más candente

Agile gathering + guidelines stories
Agile gathering + guidelines storiesAgile gathering + guidelines stories
Agile gathering + guidelines storiesfungfung Chen
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Developmentbinuvt
 
Accessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentAccessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentJacqueline L. Frank
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Multimedia phase
Multimedia phaseMultimedia phase
Multimedia phaseOnline
 
Targeted documentation STC Houston, Mar 20, 2012
Targeted documentation   STC Houston, Mar 20, 2012Targeted documentation   STC Houston, Mar 20, 2012
Targeted documentation STC Houston, Mar 20, 2012STC_Houston
 

La actualidad más candente (8)

Agile gathering + guidelines stories
Agile gathering + guidelines storiesAgile gathering + guidelines stories
Agile gathering + guidelines stories
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
 
Accessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning ContentAccessibility Best Practices for Online Learning Content
Accessibility Best Practices for Online Learning Content
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Software patterns
Software patternsSoftware patterns
Software patterns
 
Multimedia phase
Multimedia phaseMultimedia phase
Multimedia phase
 
Targeted documentation STC Houston, Mar 20, 2012
Targeted documentation   STC Houston, Mar 20, 2012Targeted documentation   STC Houston, Mar 20, 2012
Targeted documentation STC Houston, Mar 20, 2012
 
Typical MOOC objects
Typical MOOC objectsTypical MOOC objects
Typical MOOC objects
 

Destacado

Theatre interactive- performance
Theatre interactive- performanceTheatre interactive- performance
Theatre interactive- performanceLayak Singh
 
Loopbaanmetaforen
LoopbaanmetaforenLoopbaanmetaforen
LoopbaanmetaforenVoortmanl
 
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)nightkitcheninteractive
 
Escape from Diab
Escape from DiabEscape from Diab
Escape from Diabmaldo5610
 
PhilaPlace to AnyPlace: MWeb 2011 Presentation
PhilaPlace to AnyPlace: MWeb 2011 PresentationPhilaPlace to AnyPlace: MWeb 2011 Presentation
PhilaPlace to AnyPlace: MWeb 2011 Presentationnightkitcheninteractive
 
Diabetes Games
Diabetes GamesDiabetes Games
Diabetes Gamesmaldo5610
 
Xebec Biogas 2010 Presentation
Xebec Biogas 2010 PresentationXebec Biogas 2010 Presentation
Xebec Biogas 2010 Presentationsorschak
 
Status Of Biogas Upgrading In Germany October 2009
Status Of Biogas Upgrading In Germany October 2009Status Of Biogas Upgrading In Germany October 2009
Status Of Biogas Upgrading In Germany October 2009sorschak
 
THE SWARM at MEX10: Tell Me a Story: Mobile & Storytelling
THE SWARM at MEX10: Tell Me a Story: Mobile & StorytellingTHE SWARM at MEX10: Tell Me a Story: Mobile & Storytelling
THE SWARM at MEX10: Tell Me a Story: Mobile & StorytellingTHE SWARM
 
PhilaPlace for Non-Profits: Promoting your vision and history online
PhilaPlace for Non-Profits: Promoting your vision and history onlinePhilaPlace for Non-Profits: Promoting your vision and history online
PhilaPlace for Non-Profits: Promoting your vision and history onlinenightkitcheninteractive
 

Destacado (20)

Theatre interactive- performance
Theatre interactive- performanceTheatre interactive- performance
Theatre interactive- performance
 
Stanislav Sipko: Inovácia v Únii
Stanislav Sipko: Inovácia v ÚniiStanislav Sipko: Inovácia v Únii
Stanislav Sipko: Inovácia v Únii
 
English
EnglishEnglish
English
 
What is Drupal Answers?
What is Drupal Answers?What is Drupal Answers?
What is Drupal Answers?
 
Crowdsourcing Culture
Crowdsourcing CultureCrowdsourcing Culture
Crowdsourcing Culture
 
Loopbaanmetaforen
LoopbaanmetaforenLoopbaanmetaforen
Loopbaanmetaforen
 
MAAM 2009: Museums and the Social Web
MAAM 2009: Museums and the Social WebMAAM 2009: Museums and the Social Web
MAAM 2009: Museums and the Social Web
 
Letting Go : AAM 2010 Presentation
Letting Go : AAM 2010 PresentationLetting Go : AAM 2010 Presentation
Letting Go : AAM 2010 Presentation
 
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)
Walk the Walk: Using Learning Theory in the Exhibit Design Process (AAM 2011)
 
Museum As Platform
Museum As PlatformMuseum As Platform
Museum As Platform
 
Is it working
Is it workingIs it working
Is it working
 
Escape from Diab
Escape from DiabEscape from Diab
Escape from Diab
 
PhilaPlace to AnyPlace: MWeb 2011 Presentation
PhilaPlace to AnyPlace: MWeb 2011 PresentationPhilaPlace to AnyPlace: MWeb 2011 Presentation
PhilaPlace to AnyPlace: MWeb 2011 Presentation
 
Diabetes Games
Diabetes GamesDiabetes Games
Diabetes Games
 
Xebec Biogas 2010 Presentation
Xebec Biogas 2010 PresentationXebec Biogas 2010 Presentation
Xebec Biogas 2010 Presentation
 
Mexico City Connect - Barcode of Life
Mexico City Connect - Barcode of LifeMexico City Connect - Barcode of Life
Mexico City Connect - Barcode of Life
 
Status Of Biogas Upgrading In Germany October 2009
Status Of Biogas Upgrading In Germany October 2009Status Of Biogas Upgrading In Germany October 2009
Status Of Biogas Upgrading In Germany October 2009
 
THE SWARM at MEX10: Tell Me a Story: Mobile & Storytelling
THE SWARM at MEX10: Tell Me a Story: Mobile & StorytellingTHE SWARM at MEX10: Tell Me a Story: Mobile & Storytelling
THE SWARM at MEX10: Tell Me a Story: Mobile & Storytelling
 
Hist 210
Hist 210Hist 210
Hist 210
 
PhilaPlace for Non-Profits: Promoting your vision and history online
PhilaPlace for Non-Profits: Promoting your vision and history onlinePhilaPlace for Non-Profits: Promoting your vision and history online
PhilaPlace for Non-Profits: Promoting your vision and history online
 

Similar a Designing for Everybody Workshop

Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20Robert Stribley
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignMaria D'Amato
 
Strategies for User Experience Design
Strategies for User Experience DesignStrategies for User Experience Design
Strategies for User Experience DesignRobert Stribley
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Karen Mardahl
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design Terminalfour
 
Mozilla Developer Derby October 2012: Media Queries
Mozilla Developer Derby October 2012: Media Queries Mozilla Developer Derby October 2012: Media Queries
Mozilla Developer Derby October 2012: Media Queries themystic_ca
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Neil squire jailbreak lms moodle accessibility
Neil squire   jailbreak lms moodle accessibilityNeil squire   jailbreak lms moodle accessibility
Neil squire jailbreak lms moodle accessibilityChad Leaman
 
Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019Robert Stribley
 
Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19Robert Stribley
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Robert Stribley
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy
 
Online Drupal Training Syllabus
Online Drupal Training SyllabusOnline Drupal Training Syllabus
Online Drupal Training Syllabusvibrantuser
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
Web design content
Web design contentWeb design content
Web design contentMrCHenderson
 

Similar a Designing for Everybody Workshop (20)

Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
Strategies for User Experience Design
Strategies for User Experience DesignStrategies for User Experience Design
Strategies for User Experience Design
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
 
Mozilla Developer Derby October 2012: Media Queries
Mozilla Developer Derby October 2012: Media Queries Mozilla Developer Derby October 2012: Media Queries
Mozilla Developer Derby October 2012: Media Queries
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Website Migration Planning
Website Migration PlanningWebsite Migration Planning
Website Migration Planning
 
Neil squire jailbreak lms moodle accessibility
Neil squire   jailbreak lms moodle accessibilityNeil squire   jailbreak lms moodle accessibility
Neil squire jailbreak lms moodle accessibility
 
Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019
 
Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
 
Online Drupal Training Syllabus
Online Drupal Training SyllabusOnline Drupal Training Syllabus
Online Drupal Training Syllabus
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
Web design content
Web design contentWeb design content
Web design content
 

Designing for Everybody Workshop

  • 1. Designing for Everybody Workshop Accessible, Responsive, Universal Design in Drupal 1:30 pm – 5:00 pm night kitchen interactive
  • 2. 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
  • 5. Us Matthew Fisher President, Partner matthew@whatscookin.com Matt Donadio Lead Developer mattd@whatscookin.com
  • 6. 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
  • 7. 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?
  • 9. What does Accessible First mean? • A model of universal design for the web • Inspired by – universal design principles – responsive design – “mobile first”
  • 10. Typical Approach • Design for a general audience first • Retrofit to be accessible
  • 11. Accessible First Approach • W3C accessibility guidelines shape the fundamental building blocks of the site • iteratively integrate… – text content – images and media – interface design elements
  • 12. 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
  • 13. 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
  • 14. Universal Design Principles • Equitable • Flexible • Simple & Intuitive • Perceptible • Tolerant • Low Physical Effort • Size and Space for Approach and Use • Consistent
  • 15. 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
  • 16. 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.
  • 17. 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.
  • 18. Adaptive Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.
  • 19. 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.
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. mobile first – actions
  • 25. 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.
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 31. 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
  • 32. How to meet the guidelines – http://www.w3.org/WAI/WCAG20/quickref/ – Cross references the spec with the techniques
  • 34. 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.
  • 35. 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.
  • 36. 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.
  • 37. 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
  • 38. 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
  • 39. 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)
  • 41. Using Drupal to meet Accessibility Standards The Nuts and Bolts
  • 42. Base themes to choose • Omega: Responsive and accessible out of the box • or Adaptive Theme: accessible, not as responsive
  • 43. 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
  • 52. 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
  • 56. 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
  • 57. 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?
  • 58. 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)
  • 59. Use as much HTML5 as possible • The hope is that it will improve accessibility in the future as browser support becomes more universal.
  • 60. Visual Design for Accessibility Sometimes accessible is not pretty (…and that’s OK).
  • 61. Design features to consider • Color • Typography • Images • Styling • Layout
  • 62. 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
  • 64. 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
  • 67. Value • Maximize value contrast – Do not place same-value colors immediately next to each other • Perform grayscale test to check value variations
  • 70. Saturation • Use highly saturated colors – For main accent colors, use hues in their “purest” form, i.e. no tints, no shades.
  • 74. 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
  • 77. 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)
  • 79. 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
  • 81. 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
  • 82. Styling & layout • Use appropriate header nesting. – Check with an outlining tool • Strive to always have an open, uncluttered page layout.
  • 83. 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.
  • 85. Content drives accessibility! • Text is accessible • Goldilocks Syndrome • Accessible Content… – comes first – takes time – requires careful consideration – drives design
  • 86. 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
  • 87. 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
  • 88. Organize content into well- defined chunks • Use Visual breaks • Exhibition design construct applies here too – Streakers – Strollers – Studiers
  • 89. 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
  • 90. 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
  • 91. Other Content Considerations There’s more to content than body copy…
  • 92. 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?
  • 93. 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
  • 94. 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
  • 95. 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
  • 96. 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.
  • 97. 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
  • 98. 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.
  • 100. 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
  • 102. Part 2
  • 103. Case Study Everybody: An Artifact History of Disability in America
  • 104. 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
  • 105. 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
  • 106. 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.
  • 107. 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
  • 109. 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
  • 112. 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
  • 119. 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
  • 120. User Testing • Test early and often • Identify individuals for your test group early • An ounce of Prevention = Pound of cure
  • 121. 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
  • 123. 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.
  • 125. Design sites/tools • Browser add-ons – WAVE tools (http://wave.webaim.org/toolbar/) • Color contrast websites and spreadsheet
  • 127. 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)
  • 129. People to follow on twitter • Bruce Lawson (@brucel) • Peter Krantz (@peterkz_swe) • A List Apart (@alistapart) • John Foliot @johnfoliot • Mario Parise @marioparise
  • 130. Tips and Tricks Tools and practices
  • 131. 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
  • 132. Lessons Learned From our first Accessible First project
  • 133. Key Lessons • Content is the biggest hurdle • Can’t make everybody happy • Accessible sometimes feels wrong
  • 134. 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
  • 135. 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
  • 136. 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

Notas del editor

  1. Introductions (10 min) Accessible First (10 min) Standards &amp; Requirements (10 min) Using Drupal (30 min) Visual Design (15 min) Creating Content (15 min) Break (15 min) Case Study: Everybody (15 min) Resources (15 min) Tips and Tricks (15 min) Lessons Learned (15 min) Discussion (30 min)
  2. Equitable: all visitors feel welcome and successful, regardless of their abilities, prior experience, or technology. The design should be appealing to all users and whenever possible provide equal access to content and equitable user experiences .   Flexible: can be adjusted to accommodate visitors’ needs , preferences, and abilities such as allowing for larger text, removing decorative elements for clarity, or changing contrast.   Simple &amp; Intuitive: well-organized and easy to navigate and use regardless of the user’s experience, ability, or technology. The design should also allow for easy identification of where you are within the site with timely navigational support.   Perceptible: The website should be made available to all senses and clearly communicate necessary information to the visitor regardless of their abilities. Appropriate use of text, headers, color, and contrast should remain at the core of all content strategy efforts.   Tolerant: The website must support visitors’ inevitable mistakes and provide appropriate feedback and scaffolding to limit future errors, including clear instructions and labeling, ample space around buttons, and elimination of unnecessary elements or navigation.   Low Physical Effort:  The website can be used comfortably and efficiently, limiting overly repetitive actions and interfacing well with existing web plug-ins to achieve an optimal experience with minimal disruption on the part of the user.   Size and Space for Approach and Use:  The website makes use of balanced design elements (white space, content, color, contrast) to clearly indicate an information hierarchy and promote clear navigation pathways for all users regardless of ability or experience.   Consistent: The website adheres to web standards and conventions that visitors are familiar with and use them consistently throughout the site. Placement, order, and sequence are critical in the development of a balanced and successful user experience.
  3. Top-left: Braille Display Top-right: Head Wand Botom-left: Screen Magnification Bottom-right: Screen Magnifier
  4. Less CSS
  5. Contrast color check using Snook
  6. Font sizes used in Everybody
  7. Text is accessible images and media are less so Goldilocks Syndrome Not enough text, Too much text, Just right text Accessible Content… comes first Start thinking about the content—that is, the actual words and images on the page-- early in the development process; takes time Don’t underestimate how much time and attention creating accessible content will require. requires careful consideration You have to be intentional to create accessible content; the investment will pay off in more engaging content for users of all abilities. drives design Designers need the words to figure out how to design to make those words as clear and accessible as possible.
  8. Challenges Visual impairments vs cognitive disabilities vs neuro-diverse Some of these requirements conflict when addressing different disabilities Some users need more information laid out on one page; others have physical limitations that make scrolling down undesirable.
  9. Use Visual breaks highlights, headings, lists, and other visual breaks to clarify Exhibition design construct applies here too: Each audience able to achieve an understanding of the narrative Streakers, Strollers, Studiers Titles are for Streakers – what are the main sections; themes Headers are for Strollers – within a theme, what are the main points and takeaways Body Copy &amp; Captions are for Studiers – they are interested in all the nitty gritty.
  10. Use high-quality images with rich visual details Whenever possible, describe image and its relevance to your narrative within body copy to tie the two content pieces together. Use concise and clearly descriptive language with enough descriptive detail for those who can’t see accompanying visuals Titles (short, pithy, identify the image) Captions (longer, descriptive interpretive passage) Alt-text ( describe what’s show and significant but not already described in title or caption)
  11. Example of design elements used (marked with yellow): - Variety of icons - Use of the color red to denote location
  12. Image Gallery
  13. Image Overlay
  14. Sample page illustrating our design choices: - Navigation - Use of titles, summarizes and header image - Detailed body copy
  15. Sample page illustrating our design choices: - Image gallery with thumbnails
  16. The next four images illustrate our choice of fonts. Everybody homepage using APHont
  17. Everybody homepage using our custom selection of fonts
  18. Everybody detail page using APHont
  19. Everybody detail page using our custom selection of fonts
  20. Test early and often Take the time to do this properly Ex. Earlier testing didn’t give us the level of feedback we were hoping for; Determined it was with worth dedicating a full sprint to complete another round of user testing Identify individuals for your test group early Find people with disabilities, not just people with access to assistive technologies. If possible, do formative evaluation so you can identify frequent pitfalls upfront. An ounce of Prevention = Pound of cure Know the guidelines and establish how to meet them upfront Whatever is being tested is accessible at each stage (don’t add accessible later)
  21. Bruce Lawson (@brucel) an expert, check out his weekly reading list as well! Peter Krantz (@peterkz_swe) writer of firefox’s FANG extension, and Ruby Accessibility Analysis Kit (RAAKT) A List Apart (@alistapart) blog focusing on usability, web standards, and accessibility John Foliot @johnfoliot accessibility guru who contributes to the W3C. Mario Parise @marioparise Colorblind web &amp; app developer
  22. Bad or outdated accessibility info on the web Vet what’s current and accurate Look at other sites (hard to find!) Accessible AND responsive are very hard to find! Visual design hue, saturation, vue color picker HueVue app Establish a working language for fonts, styles, for everyone KISS Keep it simple stupid is an absolute imperative more so than on many other projects.
  23. Content Alt tags are not properly done (our recommendations were disregarded) Not clear enough or thematically anchored enough descriptive text to support the key role of the image for visually disabled user Titles of pages, Descriptive links Content goals at odds with accessibility goals (length, language) Content was more challenging to create as accessible as the client wanted it to be and they had to make compromises Challenge in tying text to images in crafting thematic content for pages Can’t make everybody happy Project stakeholders will HATE some accessible requirements Different accessibility audiences have different priorities/requirements Accessible sometimes feels wrong visible skip links very obvious focus states, default is subtle dotted grey outline, made it more obvious Aphont – ugly to some Color choices – ugly to some, red can be used, with care