Visual Information

How It Affects People

• People with learning disabilities

• People with low vision
• People who are colorblind
• Blind people

It hurts:

It helps:

Color as Information

Help users learn by:

Using color as an additional form of information

Don't forget:

Provide the same information in a non-visual format!

What Not To Do (and why!)

Red outline for error

Colorblind view

Good Example

Testing for color blindness

Photoshop / Illustrator - Proof Setup

View > Proof Setup > Colorblindness

Nothing for Sketch yet

Testing for color blindness

Colblinder Color Blindness Simulator

Link to: Colblindor Color Blindness Simulator

Testing for color blindness

NoCoffee plugin for Chrome

Link to: NoCoffee in the Chrome Web Store

Links

How do users know what is and isn't a link?

Old School

Blue = link

 Purple = visited

Nowadays

CSS = link designs to infinity

• Color
• Bold / Italic
• Underline
• Borders
• Background images
• Hover states
• And more!

Keys to identifying links:

Affordances

Does it look like a link?

Differences

What does it look like compared to body text?

Link Text

Can you tell where it goes?

Visual Focus

What is it?

Visual Focus Indicator:

A visual marker which calls attention to the element on a web page which the keyboard currently has in focus.

Visual Focus Tips

• Visible for all interactive elements
• Different from surroundings
• Can be same as hover!
• Don't obscure element
• Define in designs / pattern library

A good example: WebAIM

Visual Characteristics

How are elements described?

Visual Characteristics

• Color
• Size
• (Shape)
• Location

"Click the big green button in the upper right to sign up"

How do you convey visual features to blind users?

"Click the green sign up button to get started"

• Type of element
• Descriptive name

Using Pattern Libraries

• Consistent link design
• Visible focus
• Guidelines: use of color, language

Exercise

Evaluate use of visual information in 2 examples

In WCAG

• 1.3.3: Sensory Characteristics
• 1.4.1: Use of Color
• 2.4.7: Focus Visible

Images

How It Affects People

• Blind users cannot see an image
• Visually impaired users have trouble seeing an image
• Users' cognitive ability
  • on-screen alt text may benefit users who prefer text (over chart, infographic)

Provide Alternative Text

• Required when needed
• For web, use alt "attribute" for inline images
• Easy principle to learn; difficult to master

Other Benefits

• Low-band users / images off
• Text browsers
• Broken image link
• Search engine optimization

In the WCAG Specification

• 1.1 Text Alternatives
• Related:
  • 1.3.3 Sensory Characteristics
  • 1.4.5 Images of Text

Informative Images

• Photographs
• Icons
• Screen shots
• Logos
• Simple diagrams

Linked Images

• Alt text required
• Focus on purpose of link

Complex Images

• Charts and graphs
• Infographics
• Comic strips

When Alt Text is Not Needed

• Captcha—use alternative output mode
• Redundant/duplicate content
• Decorative imagery

Flowcharts

• http://bit.ly/alttreewai (by W3C WAI)
• http://bit.ly/alttree4 (by 4 Syllables)

Writing Alt Text

• Present the CONTENT and FUNCTION of the image
• Be accurate and succinct
• Avoid phrases such as “image of…”
  

Exercise

Color Contrast

How it Affects People

Insufficient color contrast hurts:

• People with low vision
• People with colorblindness
• Elderly people

What WCAG says:

What WCAG doesn't say

...but is good to do anyway

• Contrast above 3:1 for icons
• Contrast above 3:1 for focus indicators

What is a contrast ratio?

Contrast ratio = a measurement of the difference in luminance between the background color and foreground color

How to test the contrast ratio of a design

Plug color hex codes into a tool:

• WebAIM Color Contrast Checker (web)
• Colour Contrast Analyser (Mac and PC)
• Tanaguru Contrast-Finder (web, provides color recommendations) 

Watch out for...

Text on top of images... and videos!

Watch out for...

Hover / focus states

Watch out for...

Placeholder text

...which you should try to avoid anyway

Watch out for...

Charts and Graphs

Exercise

Test the color contrast for a style guide

In WCAG

• 1.4.3: Contrast (Minimum)

Page Structure

How It Affects People

• Enables screen reader users to navigate more easily
• Allows sighted keyboard users to navigate more easily
  • Skipping blocks of links & repetitive content
  • Skipping to desired content

Other Benefits

• Readability
• Graceful degredation
• Search engine optimization

In the WCAG Specification

• 1.3.1 Info and Relationships (markup)
• 2.4.1 Bypass Blocks
• 2.4.6 Headings and Labels
• 4.1.2 Name, Role, Value

Techniques

• Headings
• Landmarks
• Skip links
• Titles on frames

Headings

Describe sections of content

Headings

• Use one H1 per page
• Brief, succinct text
• Properly nested
  • H1 > H2 > H3 etc.
  • meaning, visual, programmatic
• Use semantic markup (H elements)

H1

H2

H2

H2

Landmarks

Define the main portions of a webpage

(such as header, main, footer)

Landmarks

• HTML5 structural elements
• ARIA landmark roles
• They work in tandem (for the most part)

Skip-Links

a mechanism to bypass blocks of content/links

assists the keyboard user in navigating to areas of the page without numerous tab presses

Skip-Links

• provide for large blocks of links
• may be visually hidden until focused
• important for sighted keyboard users

Titles on Frames

• Short text description of "framed" content
  on web page
• <iframe> <frame>

Exercise

Navigation

How it Affects People

• Difficult for users to understand content
• Users may not find the feature they're looking for
• Taxing to user memory

When navigational elements aren't clear and consistent...

What are navigational elements?

Anything that gets you from one place to another.

(on the web: menus, links, buttons)

Examples from: Goodreads website, Goodreads Android app

Consistent Navigation
=
Consistent Language

When designing navigation, think about:

• Labels
• Order is important
• Multiple means
• Descriptive link text

Labels

• Consistent in multiple places
• Clear and concise
• Consistent icons

Example from: Facebook Lite

Order is important

• Keyboards
• Recognition

Human memory = bad

Multiple means

Aside from the menu, does the site have at least one of these things?

• Search (preferably global)
• Site map
• Table of contents
• Links to related pages
• All pages linked from home (small site / app)

Descriptive link text

Using descriptive text means:

• Better call to action
• Knowing where you're going
• Better searchability (i.e. SEO)

Smashing Magazine: "Links should never say Click Here"

Exercise

In WCAG

• 2.4.4: Link Purpose (In Context)
• 2.4.5: Multiple Ways
• 3.2.3: Consistent Navigation
• 3.2.4: Consistent Identification

Content Order

How It Affects People

• The meaning of the page can change dramatically, or become incomprehensible, when using assistive technology
• It can be very difficult to reach a desired location using the keyboard

If reading order isn't properly defined...

Reading Order

Multi-Column Text Content

http://s.codepen.io/isnerms/debug/RKYqBr/XxrVwvonNOvA

Navigation/Focus Order

• Specify focus order in your designs
• Try to match focus order to visual order, unless an exception is intentional

Focus Order vs Visual Order

Content order should match visual order whenever possible.

Exceptions are sometimes ok.

Responsive Layouts

• Specify reading and focus order for each layout in a responsive progression
• Double-check that layout changes don't alter the page's overall meaning

Templates and Style Guides

• Utilize layout templates and style guides as often as possible
• When using templates, follow their conventions - don't bend them to your will
• Once you've solved a reading order problem, consider adding the pattern to your style guide

Whitespace

Don't use whitespace characters for visual formatting

Exercise

In WCAG

• 1.3.2 Meaningful Sequence
  • Reading Order
  • Finding Added Content
• 2.4.3 Focus Order
• 3.2.3 Consistent Navigation
  (already discussed)

Forms

How it Affects People

Forms can be dangerous for users when:

• Labels and instructions aren't clear or visible
• Error messages are vague and hard to find
• There's no chance to review information before submitting

Labels

• Close to the field
• Descriptive
• Visible all the time!

Group Labels

When to use:

• Radio buttons
• Checkboxes
• Segmented information
• Related fields

Required Fields

How do you know?

Required field indicators

• Asterisks
• Part of the label
• High-level message
• Error message (not recommended)

Use one or more of the following:

...Or mark optional fields!

Keys:

• Be consistent across fields
• Define symbols
• Be obvious

Help!

• Clear, simple language
• Examples of correct input
• Close to field

(I need somebody)

Use when the label is not enough.

Drupal image upload

Error Messages

• Clear, simple language
• Error state obvious
• Help user fix it!

Last line of defense

Ideally, give user as much info as possible BEFORE validation

Drupal image upload

Review Before Submission

Allow users to review inputted data before they submit the form when the form:

• Starts a financial transaction
• Creates a legal commitment
• Ends a student test or exam

But... why?

Because you can't easily recover from some mistakes!

Pattern libraries help!

• Placement of labels, help text, error messages
• Describe when and how to use
• Define conditions for data review

Salesforce Lightning Design System

Exercise

In WCAG

• 1.3.1: Info and Relationships
• 2.4.6: Headings and Labels
• 3.3.1: Error Identification
• 3.3.2: Labels or Instructions
• 3.3.4: Error Prevention (Legal, Financial, Data)

Data Tables

About Name-Value Pairs

name: John Doe

age: 37

gender: male

About Name-Value Pairs

Technically is accessible via multiple paradigms:

• data table
• list
• definition list
• paragraphs

What's a data table?

organized data with logical relationships using grids

How It Affects People

• Blind users cannot see the relationship of data
• Users with cognitive disability may have difficulty [visually] interpreting the data

In the WCAG Specification

• 1.3.1 Info and Relationships (markup)
• 4.1.2 Name, Role, Value

?

Meal Schedule

Techniques

• Provide a title (<caption>)
• Provide row & column headers (<th>)
• Design visually distinct headers
• Provide a summary of the data in preceding text

Techniques (cont.)

• Never nest data tables
• Avoid complex data tables
  • Multiple header rows
  • Merged cells
• Markup semantically

Code Example

<p id="tableDesc">The following table displays the number of employees 
and the foundation year of some imaginary companies.</p>

<table aria-describedby="tableDesc” tabindex="0">
    <caption>Company Data</caption>
    <tr>
        <th scope="col" abbr="Company">Company Name</th>
        <th scope="col" abbr="Employees">Number of Employees</th>
        <th scope="col" abbr="Founded">Year Founded</th>
    </tr>
    <tr>
        <th scope="row">ACME Inc</th>
        <td>1000</td>
        <td>1947</td></tr>
    <tr>
        <th scope="row">XYZ Corp</th>
        <td>3000</td>
        <td>1973</td>
    </tr>
</table>

Exercise

Dynamic Content

How It Affects People

• Newly inserted content can easily go unnoticed
• Modal interactions can become very confusing
• Client-side form validation can be rendered useless
• Automated widgets can run amok

If dynamic content isn't handled properly...

Remote Updates

Dynamic updates in remote parts of the page generally fall into two categories:

1. Those that require immediate user action
2. Those that provide general information

1) User's focus

2) Text appears

Text

Text

"Remote" Doesn't Always Mean "Far Away"

Modals

• While open, hide background page from AT
• Constrain focus within the modal
• When dismissed return focus to the trigger

http://mattisner.com/a11y-examples/dialog-modal/index.html

Client-Side Form Validation

• Don't validate input fields on "blur"
• Specify the corresponding input field for each validation message

Widgets That Keep Moving

• Provide a mechanism to pause, stop, or hide

Exercise

In WCAG

• 1.3.2 Meaningful Sequence
  • Finding Added Content
• 2.2.2 Pause, Stop, Hide
  • Pause, Stop, or Hide Content
  • Automatically Updating Content
• 2.4.3 Focus Order

Custom Controls

How It Affects People

Poorly designed and implemented custom controls...

• Are often impossible for assistive technology users to use
• Are often very difficult, if not impossible, for keyboard users to use

Role

• what it is
• Indicates how the control will function

Name

• what to call it
• Provides a unique identity that distinguishes the control from other controls with similar functionality

State

• temporary
• "expanded", "selected", "pressed", etc.

Value

• what data it contains
• May be entered by the user, or inherent to the control

Under the Hood

role: "combobox"

name: "T-SHIRT SIZE"

value: ""

state: "collapsed"

value: "Medium"

state: "expanded"

role: "option"

value: "Medium"

state: "selected"

Exercise

In WCAG

• 4.1.2 Name, Role, Value
  • Name, Role, Value
  • Custom Controls

Wrap-Up

Wrap Up

• Review items on white board
• Discuss secondary topics
  • multimedia, page title, personas, etc.
• Questions
• Distribute hand-outs

Questions from beginning

• how to design for big data

• specification of requirements from design to front-end

• universal design and learning

• interaction design

• what’s new in design - new tech, new interactions