Introduction

Built up your knowledge of accessibility in a step-by-step approach

This portal works like a constructive system for the transfer of accessibility knowledge. Starting at a easy-to-digest level, each category succeeding the other and diving into the matter a bit deeper.

  1. Starting out with the basics for accessibility where you'll find base instruments to use while improving your inclusive designs.
  2. Additional to the basics we're building the guidelines on top as a derivative of the standards.
  3. From this point we provide links to, and encourage you to go and look at, the Advanced part where we provide information that builds upon the baseline.
  4. To complement the advanced information the Good / Bad site is the place to look for live examples.
Still couldn't find your were looking for? Or just want to quickly look something up? Check out the Sitemap

Next you'll find a summary and explanation of the different parts

1 Basics

Essential facts and basic knowledge, indispensable to start with understanding Inclusive Design and Accessibility.

How do I make my work accessible? Where do I start? What is my responsibility? And how do we include accessibility in our designs?

"Basics are easy to digest but essential starters for everyone. The concepts are at the cradle for inclusivity and thus a better and more equal world."

  • Accessibility logo

    Fundamentals

    The starting point for this portal and accessibility in general. Do not continue before checking out these parts.

  • Example of an annotation

    Essentials

    The ingredients that complete the fundamentals.

  • Graphic interpretation of a block of text

    Videos

    Learn about the impact of accessibility and the benefits for everyone in a variety of situations.

    • Inclusive perspectives
    • How A11Y works
    • Real world problems
    • The benefits
  • HTML5 Logo

    Presentations

    Introductions and in-depth sessions on demand and available for download.

    • Beginner
    • Advanced

Page Sections

Page Sections are self-contained regions with their own heading and treating one topic at a time. An overview of all Page Sections can be found, and are links, on the Sitemap pages.

Cards

Each Page Section contains different kind of section related cards and forsee in a specific purpose. Some cards are shared between categories and others are category specific.

Next you'll find all explanations for the Cards.

"General information" Cards

All Page Section start with general information e.g.:

  • Introductions
  • Summaries
  • Informative text
  • Normative text

"Jump To" Cards

Navigating within the Page Sections or to related other Sections of this portal is easy. Go forwards and backwards between the following main categories:

  1. Basics
  2. Guidelines
  3. Advanced

"Resources" Cards

External quality information especially selected for you and divided in e.g.:

  • Specifications
  • Documents
  • Examples
  • Miscellaneous

2 Guidelines

The baseline you should not drop below

The guidelines are best practices that can easily be tested with specific criteria which are not subjective and are technologically possible to achieve with current assistive technology on desktop and mobile devices.

"Not following these guidelines means that some people with disabilities will find it difficult or impossible to use the web or native apps."

  • Woman with glasses and a cane

    Fundamentals

    The basic conditions which the guidelines are based upon and supporting material to help implementation.

    • Based on global conventions
    • Functional Testing features
    • Essential checklists
    • Attributions
  • Woman with glasses and a cane

    The actual Guidelines

    The quality criteria to be followed to implement inclusive design.

    • Design: Visually oriented and structure
    • Content: Editorial recommendations
    • Code: Implementations and dynamics
  • Woman with pony tail

    E-Documents

    Custom solutions for specific document types, e.g.:

    • PDF
    • Word
    • PowerPoint
    • Mail

"Normative Text" Cards

This is a special kind of "General Information Card" only present at the Guidelines.

Derived from the standards or specifications, especially based on global conventions, the normative text is in contrast to the informative text of other categories the foundation from which the examples are created.

This normative text is "The baseline you should not drop below" to prevent inaccessible products.

"Examples" Cards

A simple explanation with accompanying example and failure is provided to show one of the technique sufficient to pass the succes criteria for e.g.:

  • iOS
  • Android
  • HTML

"Testing" Cards

To test the quality of implementations which must result in a "true" are provided for each guideline:

  • Testing procedures
  • Testing results

3 Advanced

Advanced information for Accessibility and Inclusive Design

Based on global conventions and standards, Team A11Y provides advanced information that builds upon the guidelines. The guidelines are the baseline you shouldn't drop below but why stop there? Full usability requires training and quality resources.

"Technical accessibility is like the bronze medal. With training the silver, gold and even the platinum medal is achievable."

  • aXe logo

    Fundamentals

    A browser extension and JS library for automated testing.

    • Dev

"Checklist Deque" Cards

Based on the Deque University courses a section related checklist is provided, the related PDF document and the link to the course.

  • Section Topics
  • Download Summary & Checklist
  • Link to section at Deque University

"Tips & Tricks" Cards

When more usefull tips or tricks are available for the section and not already covered by the Deque Checklist this is the place where you can find them.

"Practice" Cards

Roll up your sleeves and get ready for the dirt. Practical experience makes you a real Accessibility Champ and the practice card provides you with the links to the training material e.g.:

  • WCAG Annotations
  • Design Annotations

4 Good / Bad

Four quality trainings to get you started with accessibility.

  • Screenshot of the Udacity course

    Udacity - Web Accessibility

    The annotations cover a wide range of recommendations for making Web content more accessible. Each page contains 15 examples of a Good and a Bad implementation

    • Dev
    • UX

"WCAG Annotation" Button

Activating the button reveils or hides all 15 annotations on the page and another button for the Table of Contents.

"Annotation" Buttons

Each annotation is numbered and when activated open a modal with the description of the issues.

"Table of Contents" Button

Curious to see what all the annotations are about or just want to go strait to a specific one? The Table of Contents provides an overview of all issues.

"Annotations" Section

When the WCAG Annotations are visible they can also be found at the bottom of the page where they are all shown in the annotation section.