Designing for Everybody Workshop

1,312 views
1,236 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,312
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Top-left: Braille Display Top-right: Head Wand Botom-left: Screen Magnification Bottom-right: Screen Magnifier
  • Less CSS
  • Contrast color check using Snook
  • Font sizes used in Everybody
  • 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
  • Sample page illustrating our design choices: - Image gallery with thumbnails
  • 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
  • Designing for Everybody Workshop

    1. 1. Designing for Everybody WorkshopAccessible, Responsive, UniversalDesign in Drupal1:30 pm – 5:00 pmnight kitchen interactive
    2. 2. AgendaPart 1 (1:30pm – 3:00pm)•Introductions•Accessible First•Standards & Requirements•Using Drupal•Visual Design•Creating ContentBreak (3:00pm – 3:15pm)Part 2 (3:15pm – 5:00pm)•Case Study: Everybody•Resources•Tips and Tricks•Lessons Learned•Discussion
    3. 3. Part 1
    4. 4. Introductions
    5. 5. UsMatthew Fisher President, Partnermatthew@whatscookin.comMatt Donadio Lead Developermattd@whatscookin.com
    6. 6. Your Priorities• Accessible First (universal, responsive, accessible webdesign)• Using Drupal to meet Accessibility Standards• Resources for accessible design• Tips and Tricks• Accessibility Requirements/Standards• Lessons Learned from EveryBody: An Artifact History ofDisability in America• Case Study: EveryBody: An Artifact History of Disabilityin America
    7. 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 highlevel across the board?• If deep dive, which areas to focus on?
    8. 8. Accessible First
    9. 9. What does Accessible First mean?• A model of universal design for the web• Inspired by– universal design principles– responsive design– “mobile first”
    10. 10. Typical Approach• Design for a general audience first• Retrofit to be accessible
    11. 11. Accessible First Approach• W3C accessibility guidelines shape thefundamental building blocks of the site• iteratively integrate…– text content– images and media– interface design elements
    12. 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. 13. Accessible First thoughts• Accessible and Usable are not the same• Accessible is not about Graceful Degradation foruser; it is about Progressive Enhancement ofyour features• Accessible is subjective
    14. 14. Universal Design Principles• Equitable• Flexible• Simple & Intuitive• Perceptible• Tolerant• Low Physical Effort• Size and Space for Approach and Use• Consistent
    15. 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. 16. StaticStatic layouts are the traditional web: onedesign that sits in the center of the page andrequires horizontal scrolling if the window is toosmall for it. M dot sites are the traditionalanswer to this, providing a wholly separate sitefor a lower resolution - and all the work ofcreating a separate site.
    17. 17. LiquidLiquid (also called "Fluid") is characterized byscaling the width of parts of the design relativeto the window. It tends to fail when the windowis much smaller or much larger than it wasoriginally designed for.
    18. 18. AdaptiveAdaptive is characterized by having definedlayouts for different resolutions. Within eachlayout, resizing the window does not changethe layout.
    19. 19. ResponsiveResponsive is characterized by having definedlayouts for different resolutions. Within eachlayout, the design is liquid and resizes the widthof elements relative to the changing windowsize.
    20. 20. 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 ortime of day
    21. 21. 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
    22. 22. mobile first – organization• focus on content first, navigation second• well-placed navigation allows dive deeper orpivot• reduce navigation for clarity and focus• simplicity is appreciated
    23. 23. mobile first – actions
    24. 24. 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 aswell.
    25. 25. mobile first – inputs• embrace mobile for contributors wheneverand wherever inspiration strikes• use input types, attributes and masks tomake mobile input easier• choose the right layouts for sequential, non-linear and in-context forms
    26. 26. mobile first – layouts• mobile will continue to change at a breakneckpace for foreseeable future• let mobile browsers know you are designing forthem• account for differences in screen resolution withhigher resolution images• be flexible, fluid and responsive in your layouts• know the lines between device experiences• reduce to minimum amount necessary
    27. 27. 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
    28. 28. Audience• Accessible first means defining accessible, anddefining accessible means defining disabilities that itaddresses, which means defining audience groups• Defining two sets of audience priorities– Assistive technologies– Content & Messaging
    29. 29. AccessibilityRequirements/StandardsUnderstanding the guidelines
    30. 30. 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 anddifferent situations, three levels of conformance aredefined: 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 toWCAG 2.0 Level A and AA conformance
    31. 31. How to meet the guidelines– http://www.w3.org/WAI/WCAG20/quickref/– Cross references the spec with the techniques
    32. 32. Key considerationsTop level topics
    33. 33. Content Considerations• Text Alternatives: Provide text alternatives forany non-text content so that it can be changedinto other forms people need, such as largeprint, braille, speech, symbols or simplerlanguage.• Time-based Media: Provide alternatives such ascaptions, transcripts and sign-language videos.• Adaptable: Create content that can be presentedin different ways (for example simpler layout)without losing information or structure.
    34. 34. Content Considerations• Distinguishable: Make it easier for users to seeand hear content including separatingforeground from background.• Readable: Make text content readable andunderstandable (more later)• Sufficient Time: Provide users enough time toread and use content.• Seizures: Do not design content in a way that isknown to cause seizures.
    35. 35. Functional Considerations• Navigable: Provide ways to help users navigate, findcontent, and determine where they are.• Keyboard Accessible: Make all functionality availablefrom a keyboard.• Predictable: Make Web pages appear and operate inpredictable ways.• Input Assistance: Help users avoid and correctmistakes (e.g. web forms)• Compatible: Maximize compatibility with current andfuture user agents, including assistive technologies.
    36. 36. 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
    37. 37. 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
    38. 38. 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 NaturallySpeaking)– Alternate cursor movement systems (e.g. head wand orbutton input)• Nontraditional output device (braille display)
    39. 39. Using Drupal to meetAccessibility StandardsThe Nuts and Bolts
    40. 40. Base themes to choose• Omega: Responsive and accessible out of the box• or Adaptive Theme: accessible, not as responsive
    41. 41. Modules to use• Less CSS Preprocessor – Lets you use Less CSS in Drupal; playsnicely with Omega• Menu Attributes – Allows you to add access keys and link titles tomenus• 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 renderedso you know what to customize.• WYSIWYG + CKEditor – Give you a better environment for addingaccesskeys and titles to links.• Entity View Modes – Give you better control for rendering from theViews module• Fences or Display Suite – Gives you better control of how fields getrendered if you don’t want to use code
    42. 42. Less CSS
    43. 43. Menu Attributes
    44. 44. Media Fields
    45. 45. Theme Developer
    46. 46. CKEditor
    47. 47. Entity View Modes
    48. 48. Display Suite
    49. 49. Theming Techniques• Copy the base .tpl.php files into your theme so you knowexactly what is being rendered• Customize your .tpl.php files to remove extraneousmarkup• Custom theme_field() functions for your fields to removeextraneous markup and add in any markup you need foraccessibility.• Leverage the API as much as possible– Eg, use l() to make links instead of manually buildingup <a> elements.• Leverage view modes for rendering entity references,views, and media
    50. 50. Skip Link
    51. 51. Field Formatter
    52. 52. Menu Formatter
    53. 53. Content fields• Separate content into fields to help make an accessiblelayout• Flow - Think about how the content in these fields willsound as it’s read by a screenreader scanning down thepage.– 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-levelpages in navigation, helps range of visitors find contentmore easily
    54. 54. Image FieldsField out your images with the Media modulePopulate these fields with text that describes theimages for visually-impaired users.• Image Title – what is the image?• Image Caption – how does the image reflect the pagecontent?• Alt tag – what are the most important details in theimage?
    55. 55. Performance optimization• Minimizing latency for accessing pages improvesexperience for everyone• Apache output compression and cache rules fromHTML5 Boilerplate• Drupal page caching• Drupal CSS/JS aggregation• CDN Module• Advanced modules (Varnish, Memcache, etc)
    56. 56. Use as much HTML5 as possible• The hope is that it will improve accessibility in thefuture as browser support becomes more universal.
    57. 57. Visual Design for AccessibilitySometimes accessible is not pretty(…and that’s OK).
    58. 58. Design features to consider• Color• Typography• Images• Styling• Layout
    59. 59. Color• Meet up to AAA standards for all color combinations inthe design.(http://snook.ca/technical/colour_contrast/colour.html)• Avoid using color alone to convey information.• Develop a proper color scheme and arrangement ofcolors.• Goal: Create differentiation among the colors used, nomatter how they are perceived by a visually-impairedindividual.• How: Work with hue, value, and saturation
    60. 60. Hue• Limit color palette to a maximum of three or four hues• Maximize contrast between hues– Avoid placing analogous colors immediately next toeach other• Considering the most common type of color blindness– Avoid the use of green and greenish hues with red andreddish hues
    61. 61. Value• Maximize value contrast– Do not place same-value colors immediately next toeach other• Perform grayscale test to check value variations
    62. 62. Saturation• Use highly saturated colors– For main accent colors, use hues in their “purest”form, i.e. no tints, no shades.
    63. 63. TypographyTypographical design before graphical design
    64. 64. Typefaces• Limit use of serif fonts. Use sans-serif fonts for bodytext.• Helpful font features:– Even spacing between letters– Wide letters– Heavy letters– Large punctuation marks– Openness
    65. 65. Font Size• Absolute Minimum = 12px• Body copy = 15px• Titles = 16px+• If body copy is 15px then titles (H1s) should be larger than16px. Determining a minimum size is tricky because therecould be many headings (like up to H6), so their sizes wouldhave to work in relation to this number.• To distinguish Title fields and Header fields consider both sizeand color.• Body fields: Recommended to use black text on a whitebackground or white text on a black background. (BIG debatehere)
    66. 66. APHont• http://www.aph.org/products/aphont/• Typeface for low vision readers - Available for free totarget audiences or those designing for thoseaudiences.• Not available as a web-font• Use in stylesheets along with standard fonts– If users have it installed, it will be used is specified inthe CSS
    67. 67. Use of Images• Using rotating image carousels with caution• Don’t use text-based images when live text can do thejob– Use CSS image replacement when needed
    68. 68. Styling & layout• Use appropriate header nesting.– Check with an outlining tool• Strive to always have an open, uncluttered pagelayout.
    69. 69. JavaScript• Design the site to work well without Javascript, andthen enhance it for your users that have Javascript• Think about how your Javascript will work for userswith alternate input and output devices– Eg, how will your JS rollover work with keyboard-only users?• Image carousels with auto advance are problematicfor screenreader users and those with Javascriptdisabled.
    70. 70. Creating Accessible ContentHarder than it sounds…
    71. 71. Content drives accessibility!• Text is accessible• Goldilocks Syndrome• Accessible Content…– comes first– takes time– requires careful consideration– drives design
    72. 72. Write appropriately for audience• Consider the audiences for the site• AAA: crafting content to be comprehensible by peoplewith cognitive disabilities?• Challenges– visual impairments– cognitive disabilities/neuro-diversity
    73. 73. Crafting Content for Readability• Accessibility and readability go hand-in-hand• Use language that can be understood by a largenumber of people, even if you are discussing complexideas.• Don’t use metaphors, idioms or jargon unless yourintent is to explicate that language on the page• Be aware of ESL readers, when appropriate
    74. 74. Organize content into well-defined chunks• Use Visual breaks• Exhibition design construct applies here too– Streakers– Strollers– Studiers
    75. 75. With a large volume of content• Give ample opportunities for brief review and/orpractice• Repeat important ideas, give multiple examples• Highlight or foreground main ideas• Consider including dense content in a drill down linkthat is not in the primary flow or arch of the narrative• Read more and show/hide links do not resolve theproblem
    76. 76. Use concise and clearlydescriptive language• Short sentences with just enough descriptive detail forthose who can’t see accompanying visuals• Use active voice• Expand acronyms and abbreviations• You do NOT need to dumb it down
    77. 77. Other Content ConsiderationsThere’s more to content than body copy…
    78. 78. Non-visual displays (Screenreaders, braille readers)• How will text sound to people using screen readers?• How will it be perceived by people using otherassistive technologies?
    79. 79. Link Language• Meaningful and descriptive language for links– Use active voice– Expand acronyms and abbreviations• Ensure that color alone is not used to convey contentor direction• Pair icons/graphics with text to address multiple userneeds
    80. 80. Images• Use high-quality images with rich visualdetails• Describe image and its relevance to yournarrative within body copy• Use descriptive language with enough detail– Short titles– Descriptive captions– Alt-text
    81. 81. Man on MoonUsing the ultimate in assistive technology: A moonwalker could not survive in thehostile space environment without significant support, including a pressurized suitwith oxygen supply, customized boots, gloves, helmet, and face shield.An astronaut in his spacesuit stands on the moon surface. Beside him are theUnited States flag, the lunar lander and a lunar rover.TitleCaptionALT Text
    82. 82. Audio & Video• How to degrade A/V assets to make them as accessible aspossible– Transcripts– Audio reader• Using A/V to provide supplemental information targeted to aspecific accessibility group of users• For all video:– Provide captions– If no captions, provide a transcript either on the page or asa download.• For all audio:– Provide a transcript either on the page or as a download.
    83. 83. WebForms• CAPTCHA is a barrier to accessibility – use honeypotor use CAPTCHA for a second chance– Need audio versions of CAPTCHAS• Each field should have descriptive label visible toscreenreaders• Submission errors are not just visual; must beavailable to screenreaders and keyboard users
    84. 84. Sitemap• Break the site map up into discreet organized sectionsand provide brief descriptors of each to help withcomprehension and navigation. See Drupal section forinfo about using the Summary field to provide thesedescriptors.
    85. 85. Include an AccessibilityStatement• Identify the level of web accessibility the website aimsto achieve. With which level of standards have youcomplied? Are there any special features to be madeaware of?• Ex. Drupal http://drupal.org/about/accessibility• Browser Aids• Provide guidelines for how to access and use built-inbrowser aids (Explorer, Chrome, Firefox,…)• Encourage feedback if people encounter problem
    86. 86. Part 2
    87. 87. Case StudyEverybody: An Artifact History of Disability inAmerica
    88. 88. 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
    89. 89. Discovery• Accessibility consultant helped us frame the questions– Nancy Massey – long history as an accessibilityadvocate; specializes in websites– Made sure we asked the right questions; made surewe received appropriate answers– Provided a sounding board along the way andreviewed the site at critical points to help with QA
    90. 90. Content• Artifact history = Images of objects primary content• Question: How do we make an object / image-basedexhibit accessible to everyone, including the visuallyimpaired?• Meta-data is key– captions and alt-text for all images– image-related text had to be as powerful a conveyorof the content themes as the images themselves,whenever possible.
    91. 91. Thematic structure• How to help users stay oriented to their location withinthe site, within the story arc of the content—usingdesign elements to aid this effort
    92. 92. Number of images and variety ofimage sizes• To handle the large number of images, weprovided an Image Gallery on most pages• We made images viewable in small and largesizes for the greatest accessibility
    93. 93. 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
    94. 94. Development• Agile/Scrum– Forced client to prioritize– Focused on features and the accessiblerequirements for each feature, instead of anafterthought– Developing iteratively to address wide range ofplatforms, audiences, assistive technologies
    95. 95. User Testing• Test early and often• Identify individuals for your test group early• An ounce of Prevention = Pound of cure
    96. 96. Testing outcomes• Prev/Next navigation– Round 1 moved “next page” navigation from abovethe image gallery to below the image gallery– Round 2 duplicated navigation above and belowimage gallery; also added the previous page link• Move Accessibility Statement to first position inthe header• Move caption above photos on image overlays
    97. 97. Resources for Accessibility
    98. 98. Resources• WCAG page– how to meet the guidelines (mentioned above)• Section508.gov– governmental agency compliance standards and assistivetechnology information• Accesskeys.org– rating sites according to disability• http://yaccessibilityblog.com/– Stories about accessibility in media and the web from peoplewith disabilities.
    99. 99. Design sites/tools• Browser add-ons– WAVE tools (http://wave.webaim.org/toolbar/)• Color contrast websites and spreadsheet
    100. 100. Testing sites/tools• Ipad colorblindness app – Hueview or CV Simlulator• http://www.read-able.com/ – Readability testing toolfor any website• JAWS for testing ($$$, 45 min at a time if you don’twant to buy it)• Keyboard only (no mouse)• Use only non-dominant hand (limited motor skills)
    101. 101. People to follow on twitter• Bruce Lawson (@brucel)• Peter Krantz (@peterkz_swe)• A List Apart (@alistapart)• John Foliot @johnfoliot• Mario Parise @marioparise
    102. 102. Tips and TricksTools and practices
    103. 103. 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
    104. 104. Lessons LearnedFrom our first Accessible First project
    105. 105. Key Lessons• Content is the biggest hurdle• Can’t make everybody happy• Accessible sometimes feels wrong
    106. 106. What we wouldve 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
    107. 107. What we would’ve done withmore time/budget• Outsourced accessibility testing toprofessional organizations• More into content development– writing for accessibility rather than aboutaccessibility• Translation to different languages
    108. 108. Accessible is NOT just aboutstandards and assistivetechnologies, its about people• Audience includes cognitive disabilities, limited motorfunction• Testing with assistive technologies helpful but notenough, as non-disabled dont use them• Test with people representing a diverse pool ofdisabilities
    109. 109. Discussion

    ×