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”
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.
20.
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
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)
40.
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
63.
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
65.
66.
67. Value
• Maximize value contrast
– Do not place same-value colors immediately next to
each other
• Perform grayscale test to check value variations
68.
69.
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
75.
76.
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)
78.
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
80.
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
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.
99.
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
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
108.
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
110.
111.
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
113.
114.
115.
116.
117.
118.
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.
124.
125. Design sites/tools
• Browser add-ons
– WAVE tools (http://wave.webaim.org/toolbar/)
• Color contrast websites and spreadsheet
126.
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)
128.
129. People to follow on twitter
• Bruce Lawson (@brucel)
• Peter Krantz (@peterkz_swe)
• A List Apart (@alistapart)
• John Foliot @johnfoliot
• Mario Parise @marioparise
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
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
Introductions (10 min) Accessible First (10 min) Standards & 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)
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 & 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.
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.
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.
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 & Captions are for Studiers – they are interested in all the nitty gritty.
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)
Example of design elements used (marked with yellow): - Variety of icons - Use of the color red to denote location
Image Gallery
Image Overlay
Sample page illustrating our design choices: - Navigation - Use of titles, summarizes and header image - Detailed body copy
The next four images illustrate our choice of fonts. Everybody homepage using APHont
Everybody homepage using our custom selection of fonts
Everybody detail page using APHont
Everybody detail page using our custom selection of fonts
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)
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 & app developer
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.
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