designing for everybody workshop
TRANSCRIPT
![Page 1: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/1.jpg)
Designing for Everybody Workshop
Accessible, Responsive, Universal
Design in Drupal
1:30 pm – 5:00 pm
night kitchen interactive
![Page 2: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/2.jpg)
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
![Page 3: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/3.jpg)
Part 1
![Page 4: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/4.jpg)
Introductions
![Page 6: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/6.jpg)
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
![Page 7: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/7.jpg)
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?
![Page 8: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/8.jpg)
Accessible First
![Page 9: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/9.jpg)
What does Accessible First mean?
• A model of universal design for the web
• Inspired by– universal design principles – responsive design– “mobile first”
![Page 10: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/10.jpg)
Typical Approach
• Design for a general audience first
• Retrofit to be accessible
![Page 11: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/11.jpg)
Accessible First Approach
• W3C accessibility guidelines shape the fundamental building blocks of the site
• iteratively integrate…– text content– images and media– interface design elements
![Page 12: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/12.jpg)
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
![Page 13: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/13.jpg)
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
![Page 14: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/14.jpg)
Universal Design Principles
• Equitable
• Flexible
• Simple & Intuitive
• Perceptible
• Tolerant
• Low Physical Effort
• Size and Space for Approach and Use
• Consistent
![Page 15: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/15.jpg)
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
![Page 16: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/16.jpg)
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.
![Page 17: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/17.jpg)
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.
![Page 18: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/18.jpg)
Adaptive
Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.
![Page 19: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/19.jpg)
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.
![Page 20: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/20.jpg)
![Page 21: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/21.jpg)
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
![Page 22: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/22.jpg)
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
![Page 23: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/23.jpg)
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
![Page 24: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/24.jpg)
mobile first – actions
![Page 25: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/25.jpg)
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.
![Page 26: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/26.jpg)
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
![Page 27: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/27.jpg)
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
![Page 28: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/28.jpg)
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
![Page 29: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/29.jpg)
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
![Page 30: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/30.jpg)
Accessibility Requirements/Standards
Understanding the guidelines
![Page 31: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/31.jpg)
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
![Page 32: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/32.jpg)
How to meet the guidelines
– http://www.w3.org/WAI/WCAG20/quickref/– Cross references the spec with the techniques
![Page 33: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/33.jpg)
Key considerations
Top level topics
![Page 34: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/34.jpg)
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.
![Page 35: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/35.jpg)
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.
![Page 36: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/36.jpg)
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.
![Page 37: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/37.jpg)
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
![Page 38: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/38.jpg)
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
![Page 39: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/39.jpg)
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)
![Page 40: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/40.jpg)
![Page 41: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/41.jpg)
Using Drupal to meet Accessibility Standards
The Nuts and Bolts
![Page 42: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/42.jpg)
Base themes to choose
• Omega: Responsive and accessible out of the box• or Adaptive Theme: accessible, not as responsive
![Page 43: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/43.jpg)
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
![Page 44: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/44.jpg)
![Page 45: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/45.jpg)
Less CSS
![Page 46: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/46.jpg)
Menu Attributes
![Page 47: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/47.jpg)
Media Fields
![Page 48: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/48.jpg)
Theme Developer
![Page 49: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/49.jpg)
CKEditor
![Page 50: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/50.jpg)
Entity View Modes
![Page 51: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/51.jpg)
Display Suite
![Page 52: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/52.jpg)
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
![Page 53: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/53.jpg)
Skip Link
![Page 54: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/54.jpg)
Field Formatter
![Page 55: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/55.jpg)
Menu Formatter
![Page 56: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/56.jpg)
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
![Page 57: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/57.jpg)
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?
![Page 58: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/58.jpg)
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)
![Page 59: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/59.jpg)
Use as much HTML5 as possible
• The hope is that it will improve accessibility in the future as browser support becomes more universal.
![Page 60: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/60.jpg)
Visual Design for Accessibility
Sometimes accessible is not pretty
(…and that’s OK).
![Page 61: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/61.jpg)
Design features to consider
• Color• Typography• Images• Styling• Layout
![Page 62: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/62.jpg)
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
![Page 63: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/63.jpg)
![Page 64: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/64.jpg)
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
![Page 65: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/65.jpg)
![Page 66: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/66.jpg)
![Page 67: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/67.jpg)
Value
• Maximize value contrast – Do not place same-value colors immediately next to
each other
• Perform grayscale test to check value variations
![Page 68: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/68.jpg)
![Page 69: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/69.jpg)
![Page 70: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/70.jpg)
Saturation
• Use highly saturated colors– For main accent colors, use hues in their “purest”
form, i.e. no tints, no shades.
![Page 71: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/71.jpg)
![Page 72: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/72.jpg)
![Page 73: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/73.jpg)
Typography
Typographical design before graphical design
![Page 74: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/74.jpg)
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
![Page 75: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/75.jpg)
![Page 76: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/76.jpg)
![Page 77: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/77.jpg)
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)
![Page 78: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/78.jpg)
![Page 79: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/79.jpg)
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
![Page 80: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/80.jpg)
![Page 81: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/81.jpg)
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
![Page 82: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/82.jpg)
Styling & layout
• Use appropriate header nesting.– Check with an outlining tool
• Strive to always have an open, uncluttered page layout.
![Page 83: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/83.jpg)
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.
![Page 84: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/84.jpg)
Creating Accessible Content
Harder than it sounds…
![Page 85: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/85.jpg)
Content drives accessibility!
• Text is accessible
• Goldilocks Syndrome
• Accessible Content…– comes first – takes time– requires careful consideration– drives design
![Page 86: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/86.jpg)
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
![Page 87: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/87.jpg)
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
![Page 88: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/88.jpg)
Organize content into well-defined chunks• Use Visual breaks
• Exhibition design construct applies here too– Streakers– Strollers– Studiers
![Page 89: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/89.jpg)
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
![Page 90: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/90.jpg)
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
![Page 91: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/91.jpg)
Other Content Considerations
There’s more to content than body copy…
![Page 92: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/92.jpg)
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?
![Page 93: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/93.jpg)
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
![Page 94: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/94.jpg)
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
![Page 95: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/95.jpg)
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
![Page 96: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/96.jpg)
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.
![Page 97: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/97.jpg)
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
![Page 98: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/98.jpg)
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.
![Page 99: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/99.jpg)
![Page 100: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/100.jpg)
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
![Page 101: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/101.jpg)
![Page 102: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/102.jpg)
Part 2
![Page 103: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/103.jpg)
Case Study
Everybody: An Artifact History of Disability in America
![Page 104: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/104.jpg)
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
![Page 105: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/105.jpg)
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
![Page 106: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/106.jpg)
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.
![Page 107: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/107.jpg)
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
![Page 108: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/108.jpg)
![Page 109: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/109.jpg)
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
![Page 110: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/110.jpg)
![Page 111: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/111.jpg)
![Page 112: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/112.jpg)
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
![Page 113: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/113.jpg)
![Page 114: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/114.jpg)
![Page 115: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/115.jpg)
![Page 116: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/116.jpg)
![Page 117: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/117.jpg)
![Page 118: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/118.jpg)
![Page 119: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/119.jpg)
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
![Page 120: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/120.jpg)
User Testing
• Test early and often• Identify individuals for your test group early• An ounce of Prevention = Pound of cure
![Page 121: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/121.jpg)
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
![Page 122: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/122.jpg)
Resources for Accessibility
![Page 123: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/123.jpg)
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.
![Page 124: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/124.jpg)
![Page 125: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/125.jpg)
Design sites/tools
• Browser add-ons– WAVE tools (http://wave.webaim.org/toolbar/)
• Color contrast websites and spreadsheet
![Page 126: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/126.jpg)
![Page 127: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/127.jpg)
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)
![Page 128: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/128.jpg)
![Page 129: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/129.jpg)
People to follow on twitter
• Bruce Lawson (@brucel)• Peter Krantz (@peterkz_swe)• A List Apart (@alistapart)• John Foliot @johnfoliot• Mario Parise @marioparise
![Page 130: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/130.jpg)
Tips and Tricks
Tools and practices
![Page 131: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/131.jpg)
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
![Page 132: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/132.jpg)
Lessons Learned
From our first Accessible First project
![Page 133: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/133.jpg)
Key Lessons
• Content is the biggest hurdle
• Can’t make everybody happy
• Accessible sometimes feels wrong
![Page 134: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/134.jpg)
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
![Page 135: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/135.jpg)
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
![Page 136: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/136.jpg)
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
![Page 137: Designing for Everybody Workshop](https://reader035.vdocument.in/reader035/viewer/2022062405/5565b94fd8b42a48268b4af4/html5/thumbnails/137.jpg)
Discussion