Web Accessibility

Web Accessibility

Is about making apps and websites that are inclusive to all users regardless of web browsing experience or their physical or mental capabilities

Challenges with Computer Use

  • Reading Difficulties
  • Difficulty Hearing
  • Difficulty Seeing / Colour Blindness
  • Issues with Dexterity
  • Reduced Motor Skills
  • Declined Cognitive Abilities

Assistive Technologies

Hardware and Software to aid people's computer use

Why Accessibility Matters

  • So many of us with disabilities
  • Social Inclusion - "no gets left behind"
  • Equal access to information and equal opportunity
  • It's the Law! (depending on jurisdiction and company size)

Additional considerations:

  • Search Engine Optimization
  • Accessibility and usability go hand in hand
  • Entire world is moving to an accessible web, this decade!

Canadian Accessibility Standards

Ontario Accessibility Laws

Ontario has been early leader in accessibility

Legal Enforcement?

Failure to comply to AODA could result in fines of:

Web Accessible Initiatives

Web Content Accessibility Guidelines (WCAG)

WCAG 2.0 is an internationally accepted standard for web accessibility developed by the World Wide Web Consortium (W3C), an international team of experts

Principles of Accessibility

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust

Perceivable

Information and user interface must be presented to users in ways they can perceive.

  • Text Alternatives
    Provide alternatives for non-text content.

  • Time-based Media
    Provide alternatives for time-based media (audio/video).

  • Adaptable
    Create content that can be presented in different ways without losing information.

  • Distinguishable
    Make it easier for users to see and hear content.

Operable

Users must be able to use the interface. It cannot require interaction that a user cannot perform.

  • Keyboard Accessible
    Make all functionality available from a keyboard.

  • Enough Time
    Provide users enough time to read and use content.

  • Seizures
    Do not design content in a way that is known to cause seizures.

  • Navigable
    Provide ways to help users navigate, find content, and determine where they are.

Understandable

Users must be able to understand the information as well as how to use the interface

  • Readable
    Make text content readable and understandable.

  • Predictable
    Make Web pages appear and operate in predictable ways.

  • Input Assistance
    Help users avoid and correct mistakes.

Robust

Content must be interpreted reliably by a wide variety of user agents

  • Compatible
    Maximize compatibility with current and future user agents, including assistive technologies.

Making Websites Accessible

Accessibility Techniques

Provide alternative text to describe images:

<img src="logo.png" alt="Ekomodi Enterprises: Vehicles your way." >

Provide alternative text to describe photos:

<img src="lottery_winners.gif" alt="Husband and wife jumping for joy holding a winning lottery ticket" >

For purely decorative images use empty alt:

<img src="snowflake.png" alt="" >

Highlight links when in focus:

Example of Focus 
a:focus { 
    border: 1px solid #ffa500; 
}

Adding skip to links:

<div class="skip">
    <a href="#navigation">Skip to navigation</a> |
    <a href="#main-content">Skip to main content</a>
</div>

<nav id="navigation">
    <ul>
    ...
    </ul>
</nav>

<a name="main-content"></a>
<p>Main content</p>

Using ARIA Landmark Roles:

<header role="banner">
  <h1>Title of your document</h1>
  <nav role="navigation">
    <ul>
        <li><a href="#">Link 1</a></li>
        ...
    </ul>
  </nav>
</header>

<main role="main">
  <h2>Main Content</h2>
  <p>Juicy content</p>
</main>

<aside role="complementary">
  <h2>Sidebar</h2>
  <p>Complementary content</p>
</aside>

<footer role="contentinfo">
  <h2>Footer</h2>
  <p>Information about the document</p>
</footer>

Testing Web Accessibility

When testing your websites:

Examples of Accessible Sites

Good sites:

Bad sites:

Thank You

← →

/