What is WCAG 2.1?

Web Content Accessibility Guidelines (WCAG) provides clear technical specifications for creating a website that directly benefits users who have accessibility needs due to disabilities.

Examples:

  • Users might be colour blind or have low vision, which makes it harder to distinguish elements on a webpage. Therefore the platform should provide enough contrast for texts and backgrounds.
  • Users might have a disability that prevents them from using a mouse properly. Therefore the platform should be completely navigable by using a keyboard. 
  • Users might have a visual impairment. Therefore the platform should be able to be interacted with via a screenreader.

We find that everybody should be able to make use of our platform. Therefore we are implementing these guidelines in our platform in order to become WCAG 2.1 compliant.
Complying to the WCAG guidelines means that everyone is able to perceive, understand, navigate and interact with our platform and that every user is able to follow a learning journey in our platform. 

WCAG 2.1 categories

First we have divided all the WCAG guidelines in 4 different categories. In this way we can focus on one category at a time instead of doing everything at once.

We divide the following categories:

  1. Contrast
    Texts and non-text elements on the page have a decent contrast ratio.
  2. Keyboard Operability
    Each webpage is navigable and interactable via a keyboard or keyboard alternative.
  3. ScreenReader Accessibility
    Each webpage can be navigated via a screenreader in a meaningful way.
  4. The Uncategorised
    This covers a few guidelines that don't necessarily fit within the mentioned categories above.

Implementation plans

We created an overview of the different implementation plans based on the different categories. It is important to note that the planning is a rough estimation and not a commitment. This is a big project and things will become more clear as we go forward.

Section(s)
Category
Estimated delivery
Entire platform (learner- and backend side)
Contrast
Done
Results pageKeyboardDone
Content parts in activities (in the player)KeyboardDone
Navigation in the playerKeyboardDone
Questions in the playerKeyboardDone
Login & Home screen, Learning Journey
Keyboard
Done
Catalogue, Communication Center, Results overview,

Account settings & Portfolio

KeyboardDone
Player (All activities)KeyboardDone
Assessment flow
Keyboard
Done
First milestone: learner side and assessment flow is now keyboard operable
Non-text content (images, videos and sound fragments) can include alternative text and are accessibile for screenreading services in content parts and questions
ScreenReaderDone
Login & Home screen
ScreenReader
Done
Learning Journey & Player: Buttons, Tabs, Text-fields, Checkboxes and RadiosScreenReader
to be determined
NotesScreenReader
to be determined
Catalogue, Communication Center, Results Overview,

Account Settings & Portfolio

Screenreader
to be determined
Assessment flow
Screenreader
to be determined
Entire learner-side
Uncategorised
to be determined
Assessment flow

Uncategorised
to be determined
Second milestone: learner side and assessment flow is now fully AA compliant
Creating and managing courses
Contrast
& Keyboard
to be determined
Creating a learning journey (building templates)
Contrast
& Keyboard
to be determined
Assessment flow

Screenreader
to be determined
Creating questions & content parts
Contrast
& Keyboard
to be determined
Managing users
Contrast
& Keyboard
to be determined
Creating and managing courses
Screenreader
to be determined
Creating a learning journey
Screenreader
to be determined
Creating questions & content parts
Screenreader
to be determined
Managing users
Screenreader
to be determined
Assessment flow
Uncategorised
to be determined
Creating and managing courses
Uncategorised
to be determined
Creating a learning Journey
Uncategorised
to be determined
Creating questions & content parts
Uncategorised
to be determined
Managing users
Uncategorised
to be determined


To summarise:

  1. We started by making the learner side and the backend side compliant to the contrast related guidelines. This implementation has been finished already.
  2. The next thing we start working on are the keyboard related guidelines. This focuses on the more important pages of the learner side first, for example the login screen, the Home screen and the learning journey.
  3. After implementing the keyboard related guidelines, this will be reflected and documented so we can start with the keyboard related guidelines for the assessment flow for instructors. Reflecting and documenting the efficient implementation of the guidelines will make it easier and quicker for future implementations.

Latest additions to make the platform accessible for all learners

  • Keyboard accessibility: the Activity player is completely keyboard accessible now: within all activities learner can navigate with their keyboard.
  • Screenreader accessibility: Non-textual content like images, videos and sounds can include alternative text. This text can be read by screenreader so all content is accessible for ever learner. Text alternatives can be added by:
    • Authors that make use of files in questions and content parts;
    • Designers that make use of images in the template;
    • Resellers that make use of images for their catalogue products;
    • Tenants that make use of files in the look & feel.