Introduction

Nine easy steps to get started with accessibility

But how do I make my work accessible? Where do I start? These are often the first questions after awareness of accessibility.

It is through this nine step approach to help you kick-start the process for inclusive design. Each step contains focus area's for:

Legend

  • Dev: Developers
  • UX: UX/Designers
  • Editor: Content Writers
  • CJE: Customer Journey Experts

1 Roles and Responsibilities

Helps each role contribute to make products that work for everyone.

  • Accessibility logo

    Work flow

    Include accessibility in your work flow.

    • Dev
    • UX
    • Editor
    • CJE
  • Example of an annotation

    Annotations

    Design annotations should cover all users.

    • UX
    • Editor
  • Graphic interpretation of a block of text

    Text

    Use short clear sentences and paragraphs.

    • UX
    • Editor
    • CJE
  • HTML5 Logo

    Landmarks

    Use containers and landmarks.

    • Dev
    • UX

Developer

  • Follow the guidelines / baseline.
  • Test your application with a keyboard and a screen reader.

UX

  • Talk to colleagues who are involved in the requirement and development phase.
  • Design annotations should cover all users.

Editor

  • Make sure all necessary hidden content is present.
  • Use short clear sentences and paragraphs.

CJE

  • Take accessibility into account from the start till the end.
  • Work closely with design, development and content.

2 Personas

Great design starts by thinking about how to make products work for everyone.

Motor disability

  • Make large clickable actions.
  • Ensure that skip navigation is allowed over lists and menus.

Blind / Low vision

  • Ensure all functions are available via the keyboard.
  • Provide alternative text descriptions.

Cognitive

  • Don't use sarcasm, metaphors and irony.
  • Information should be clear, and easy to understand.

Deaf

  • Provide captioning and transcripts for video.
  • Break up content with sub-headings, images and videos.

3 Tools

An accurate selection of quality tools can help you find a wide range of accessibility issues.

  • aXe logo

    aXe

    A browser extension and JS library for automated testing.

    • Dev
  • Colour Contrast Analyser logo

    Colour Contrast Analyser

    Check contrast ratio's of anything on your screen.

    • Dev
    • UX
    • Editor
    • CJE
  • NoCoffee logo

    NoCoffee

    Simulate visual impairments in the browser.

    • Dev
    • UX
    • Editor
    • CJE
  • WAVE logo

    WAVE

    A browser extension that helps manual checking.

    • Dev
    • UX

Semi-automated

  • Fast and easy way to find low hanging fruit.
  • Shows issues where A11Y guidelines are being violated.

Contrast analysers

  • Simple way to check if the colour has sufficient contrast.
  • Can be used in all applications and browsers.

Visual helpers

  • Simulates a wide variety of vision disabilities.
  • Provides a better understanding of challenges that people face.

Browser extensions

  • Promotes human evaluation and gives A11Y feedback.
  • Easy to use plugin that runs in your browser.

4 Training

Four quality trainings to get you started with accessibility.

A11Y Fundamentals

  • Include people with all kind of disabilities.
  • Follow the guidelines and legislation to improve A11Y.

WAI-ARIA

  • Name, State, Role and Value.
  • Deliver the appropriate semantic information.

Inclusive Design

  • Designing all products to be accessible by everyone.
  • Allow flexibility, be simple, intuitive and minimize errors.

Mobile Web A11Y

  • Responsive design resembles low vision design.
  • Touch targets must be large enough to touch accurately.

5 Best practices

When creating digital content, make sure to consider the following issues.

Specifications

  • Validate and test your work.
  • Follow the W3C standards.

Page structure

  • Use landmarks to structure a page.
  • Create the document outline.

Semantics

  • Use semantic and native elements where possible.
  • Use proper labels and descriptions.

Design

  • Sufficient contrast between text color and background.
  • Information should not be conveyed with color alone.

6 Communication

Team communication skills are critical for ensuring the success of the team effort during the development life cycle.

  • Interaction between Requirements and UX Designer

    Requirements to UX Designer

    Keep all users in mind.

    • UX
    • Editor
    • CJE
  • Interaction between UX Designer and Developer

    UX Designer to Developer

    Agree on all annotations.

    • Dev
    • UX
  • Interaction between Developer and Build

    Developer to Build

    Do automated and manual testing.

    • Dev
  • Movement from Production to Customers

    Production to Customers

    Keep control of quality.

    • Dev
    • Editor
    • CJE

Requirements to UX Designer

  • Does it create value for all users?
  • Is it worthwhile creating?

UX Designer to Developer

  • Discuss annotations.
  • Provide responsive and states of the design.

Developer to Build

  • Do a WAI-ARIA consult.
  • Not sure? Ask Team A11Y.

Production to Customers

  • Interactive customer feedback.
  • Do a root cause analysis.

7 Screen readers

All essential web content presented visually can be converted to synthesised speech.

  • JAWS and Windows logo

    JAWS

    Screen reader for Windows that works best with Internet Explorer.

    • Dev
    • UX
    • Editor
    • CJE
  • Talkback and Android logo

    TalkBack

    Screen reader for Android.

    • Dev
    • UX
    • Editor
    • CJE
  • VoiceOver and Apple logo

    VoiceOver

    Screen reader for iOS and macOS that works best with Safari.

    • Dev
    • UX
    • Editor
    • CJE
  • NVDA and Windows logo

    NVDA

    Screen reader for Windows that works best with Firefox.

    • Dev
    • UX
    • Editor
    • CJE

Devices

  • Test on the desktop.
  • Test on a mobile device.

Keyboard

  • Use the tab and arrow-keys to navigate.
  • Check all interactive elements.

Components

  • All interactive components have a name.
  • Correct pronuncation of values.

Page structure

  • DOM order matches visual order.
  • Multiple ways to locate content.

8 Responsive

Responsive design allows your web content to adapt to the viewport and zoom level.

  • Mobile phone

    Mobile

    Make sure all content is available.

    • Dev
    • UX
    • Editor
    • CJE
  • Tablet in portrait mode

    Tablet (Portrait)

    Consider all screen sizes.

    • Dev
    • UX
    • Editor
    • CJE
  • Tablet in landscape mode

    Tablet (Landscape)

    Don't forget the landscape orientation.

    • Dev
    • UX
    • Editor
    • CJE
  • Desktop computer screen

    Desktop

    You should not drop below the baseline.

    • Dev
    • UX
    • Editor
    • CJE

Mobile first

  • Mobile first is not Mobile only.
  • Content displayed at a minimum 320 CSS pixels.

Zoom

  • Everything can be zoomed up to 400%.
  • No scrolling in the direction of the text.

Available

  • All content must be available.
  • All functionality must be available.

Testing

  • Test portrait as well as landscape mode.
  • Provide feedback when changes occur.

9 Checklist

Always use the easy checklists which are based on the standards and guidelines.

  • PDF file

    PDF

    Create a properly tagged and structured file.

    • UX
    • Editor
    • CJE
  • PowerPoint file

    PowerPoint

    Follow the best practices for an accessible presentation.

    • Dev
    • UX
    • Editor
    • CJE
  • Word file

    Word

    Create files usable by everyone.

    • Dev
    • UX
    • Editor
    • CJE
  • Website and App

    Website/App

    Use a checklist to easily test your product.

    • Dev
    • UX

Developer

  • Follow the baseline.
  • Test your application with a keyboard an a screen reader.

UX

  • Talk to colleagues who are involved in the requirement and development phase.
  • Design annotations should cover all users.

Editor

  • Make sure all necessary hidden content is present.
  • Use short clear sentences and paragraphs.

CJE

  • Take accessibility into account from the start till the end.
  • Work closely with design, development and content.