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
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
Designing for Everybody Workshop
Designing for Everybody WorkshopAccessible, Responsive, UniversalDesign in Drupal1:30 pm – 5:00 pmnight kitchen interactive
UsMatthew Fisher President, Partnermatthew@whatscookin.comMatt Donadio Lead Developermattd@whatscookin.com
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
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?
What does Accessible First mean?• A model of universal design for the web• Inspired by– universal design principles– responsive design– “mobile first”
Typical Approach• Design for a general audience first• Retrofit to be accessible
Accessible First Approach• W3C accessibility guidelines shape thefundamental building blocks of the site• iteratively integrate…– text content– images and media– interface design elements
True Accessibility• everywhere– responsive to the browsing environment– mobile, tablet and screens of all sizes• everyone– simplicity and ease-of-use for all audiences– people of all ages, physical and mental abilities
Accessible First thoughts• Accessible and Usable are not the same• Accessible is not about Graceful Degradation foruser; it is about Progressive Enhancement ofyour features• Accessible is subjective
Universal Design Principles• Equitable• Flexible• Simple & Intuitive• Perceptible• Tolerant• Low Physical Effort• Size and Space for Approach and Use• Consistent
Responsive design• Responsive, liquid, adaptive design– http://mashable.com/2013/01/16/adaptive-design-explanation/– http://liquidapsive.com/• Responsive is good for accessibility– simpler– universal– streamlined– scales well– typography-oriented vs image-oriented– EX: http://bradfrost.github.com/this-is-responsive/patterns.html
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.
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.
AdaptiveAdaptive is characterized by having definedlayouts for different resolutions. Within eachlayout, resizing the window does not changethe layout.
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.
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
mobile first – capabilities• direction: from a digital compass• gyroscope: 360 degrees of motion• audio: input from mic; output to speaker• video & image: capture & input from camera• dual cameras: front & back• device connections: bluetooth• proximity: closeness to physical objects• ambient light: light/dark environment aware• NFC: Near Field Communications RFID
mobile first – organization• focus on content first, navigation second• well-placed navigation allows dive deeper orpivot• reduce navigation for clarity and focus• simplicity is appreciated
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.
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
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
mobile first – conclusion• take advantage of the growth to innovate• embrace mobile constraints• use capabilities to innovate for mobile• build on web knowledge, but focus on mobile• test your designs and code on devices• mobile device stores are good for testing• prototype and iterate
Audience• Accessible first means defining accessible, anddefining accessible means defining disabilities that itaddresses, which means defining audience groups• Defining two sets of audience priorities– Assistive technologies– Content & Messaging
AccessibilityRequirements/StandardsUnderstanding the guidelines
The list of guidelines• WCAG: http://www.w3.org/TR/WCAG/• Compliance with (A, AA, AAA)– In order to meet the needs of different groups 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
How to meet the guidelines– http://www.w3.org/WAI/WCAG20/quickref/– Cross references the spec with the techniques
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.
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.
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.
Typical museum project = A• (as many AA & AAA as possible)• Eg Color contrast important• Eg Media equivalents not always feasible• Live text everywhere• ALT tags
Accessible First = AA• (and AAA when feasible)• Skip links• Access keys/keyboard navigation• “Explicit” headings (verbose)• AAA: color compliance (ratio of contrast)• Robust ALT tags & accessible content
Assistive technologies• Screen readers (e.g. JAWS, HAL)• Screen magnifier software (e.g. Dolphin Lunar)– Physical magnifiers also an option• Browser features (browser zooming, access keys)• Nontraditional input devices (name?)– Voice-based data input systems (e.g. Dragon NaturallySpeaking)– Alternate cursor movement systems (e.g. head wand orbutton input)• Nontraditional output device (braille display)
Using Drupal to meetAccessibility StandardsThe Nuts and Bolts
Base themes to choose• Omega: Responsive and accessible out of the box• or Adaptive Theme: accessible, not as responsive
Modules to use• Less CSS Preprocessor – Lets you use Less CSS in Drupal; 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
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
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
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?
Use as much HTML5 as possible• The hope is that it will improve accessibility in thefuture as browser support becomes more universal.
Visual Design for AccessibilitySometimes accessible is not pretty(…and that’s OK).
Design features to consider• Color• Typography• Images• Styling• Layout
Color• Meet up to AAA standards for all color combinations 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
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
Value• Maximize value contrast– Do not place same-value colors immediately next toeach other• Perform grayscale test to check value variations
Saturation• Use highly saturated colors– For main accent colors, use hues in their “purest”form, i.e. no tints, no shades.
TypographyTypographical design before graphical design
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
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)
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
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
Styling & layout• Use appropriate header nesting.– Check with an outlining tool• Strive to always have an open, uncluttered pagelayout.
Creating Accessible ContentHarder than it sounds…
Content drives accessibility!• Text is accessible• Goldilocks Syndrome• Accessible Content…– comes first– takes time– requires careful consideration– drives design
Write appropriately for audience• Consider the audiences for the site• AAA: crafting content to be comprehensible by peoplewith cognitive disabilities?• Challenges– visual impairments– cognitive disabilities/neuro-diversity
Crafting Content for Readability• Accessibility and readability go hand-in-hand• Use language that can be understood by a 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
Organize content into well-defined chunks• Use Visual breaks• Exhibition design construct applies here too– Streakers– Strollers– Studiers
With a large volume of content• Give ample opportunities for brief review and/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
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
Other Content ConsiderationsThere’s more to content than body copy…
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?
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
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
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
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.
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
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.
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
Case StudyEverybody: An Artifact History of Disability inAmerica
Everybody• Mission– Exceed minimum standards for accessibility• Solution– Accessible First• Audience– Accessibility audience• vision impaired• motor impaired• which disabilities and what priority?– Curatorial audience• typical audience breakdown
Discovery• Accessibility consultant helped us frame the questions– Nancy Massey – long history as an 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
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.
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
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
Design• Navigation• Use of titles, summarizes and header image• Detailed body copy• Image gallery with large thumbs (toenails)• Fonts?– APH font default (if installed)– Crete Regular– Open Sans Bold– Open Sans Regular
Development• Agile/Scrum– Forced client to prioritize– Focused on features and the accessiblerequirements for each feature, instead of anafterthought– Developing iteratively to address wide range ofplatforms, audiences, assistive technologies
User Testing• Test early and often• Identify individuals for your test group early• An ounce of Prevention = Pound of cure
Testing outcomes• Prev/Next navigation– Round 1 moved “next page” navigation from 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
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.
Design sites/tools• Browser add-ons– WAVE tools (http://wave.webaim.org/toolbar/)• Color contrast websites and spreadsheet
Testing sites/tools• Ipad colorblindness app – Hueview or CV Simlulator• http://www.read-able.com/ – Readability testing 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)
People to follow on twitter• Bruce Lawson (@brucel)• Peter Krantz (@peterkz_swe)• A List Apart (@alistapart)• John Foliot @johnfoliot• Mario Parise @marioparise
Tips and Tricks• Vet accessibility info on the web• Review other sites• Visual design tools– HSV color picker, HueVue app• Working language for fonts & styles• KISS
Lessons LearnedFrom our first Accessible First project
Key Lessons• Content is the biggest hurdle• Can’t make everybody happy• Accessible sometimes feels wrong
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
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
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