With this ongoing pandemic across the globe, we are now much more dependent on the internet. Most of us will sooner or later face some kind of disability to access the web world, which makes it imperative that our websites are accessible to everyone.

What is web accessibility and why does it matter to me? 

Web accessibility is a practice where websites are designed and developed considering all the users in mind including those with visual, auditory, cognitive, and motor disabilities. Web accessibility helps us to achieve our goal of making websites accessible to all.

In most countries, there are laws governing accessibility. If you own a website or are planning to get one, do remember to have a look into the standard called Web Content Accessibility Guidelines (WCAG) and the laws that your state follows. In Norway and the EU, you run the risk of getting penalties if your website is not following WCAG. 

Check your website

In Norway, all websites must follow WCAG version 2.0. While your website might have followed all rules by the time it was launched, content, code, and structure change over time. So a good rule of thumb is to do an accessibility audit annually. Many of the requirements, must be checked manually but others can also be checked automatically, and there are several free tools you can use.
Check how accessible your website is on wave.webaim.org

The new EU directive from 2022

A new EU directive was admitted as Norwegian law by Stortinget on May 28th, 2021. The law is in effect from 2022 with a year of implementation time, and from the year 2023, all public sector websites and apps in the EU must follow the Web Accessibility Directive (WAD) and WCAG version 2.1. In addition, it requires the publication of an accessibility statement for websites and mobile apps and calls for a feedback mechanism for users to flag accessibility problems. 

While non-public sector websites still can follow WCAG 2.0, it doesn’t hurt to help people with disabilities more by also following the new rule sets. 
So if your website is not updated as per the WCAG 2.1 guidelines, now is the time to get it upgraded.

What is new in WCAG 2.1

WCAG 2.1 doesn’t replace version 2.0 but it’s an extension of WCAG 2.0. This section is for those who are a bit more into the technical definition, you might want to skip this part. Let’s have a look into the new guidelines that were introduced in WCAG 2.1 in order of their success criteria.

Level A

• Character Key Shortcuts: As per success criterion 2.1.4, in the web pages, where keyboard shortcuts can be enabled using a single key,  there must be a way to turn off or reconfigure it.
• Pointer Gestures: As per the success criterion 2.5.1, the user should be able to operate all the functionality with a single pointer. Multipoint or path-based gestures could be too complex for some users to interact
• Pointer Cancellation: As per the success criterion 2.5.2, sometimes the users may trigger a touch or mouse event accidentally, for such situations pointer actions must be configured to cancel the event triggered.
• Label in Name: As per the success criterion 2.5.3, ensure that the labels that you use for your elements such as input fields match the text that’s presented to the user visually.

Motion Actuation: According to the success criteria 2.5.4, if a function is triggered by device motion, there should also be an option to activate it using the User interface components.

Level AA

• Orientation: According to the success criterion 1.3.4, your website should be accessible to all users regardless of the device orientation. This applies to most users that access the websites on mobile or tablet devices.
• Identify Input Purpose: According to the success criterion 1.3.5, the form fields that collect the information should be able to gather information programmatically.
• Reflow: According to the success criterion 1.4.10, when the width of the user’s screen changes, your content should be able to adjust itself that it doesn’t require any horizontal scrolling, someone with low vision can greatly benefit from it.
• Non-text Contrast: According to the success criterion 1.4.11, the non-text element on a website like User Interface Components and graphical components that conveys information should have a minimum contrast ratio of 3:1.
• Text Spacing: According to the success criterion 1.4.12, ensuring that the user can change the spacing between characters, lines, words, or paragraphs for better readability.
• Content on Hover or Focus: According to the success criterion 1.4.13, if there is additional content on the screen like navigation dropdowns, you should ensure that this additional content is
  • Dismissable: There is a way to escape the content without moving the pointer hover or keyboard focus.
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
• Status Messages: According to the success criterion 1.4.3, when status content appears on the screen without changing the user’s focus, ensure that the status message can be programmatically determined by assistive technologies.

Level AAA

• Identify Purpose: According to the success criterion 1.3.6, the purpose of the links, buttons, navigation controls, icons, and other user interface elements can be programmatically determined, which can be extracted by any assistive technology that a user selects.
• Timeouts: According to the success criterion 2.2.6, you need to inform users of the duration of inactivity that can cause loss of data. Some users with disabilities may require more time to read in comparison to others, so informing the user about the timeouts would help them utilize their time in a better way.
• Animation from Interactions: According to the success criterion 2.3.3, users should have an option to disable the animations unless it is required for the functionality or conveys some information.
• Target Size: According to the success criteria 2.5.5, pointer inputs (like buttons) should be at least 44px by 44px in size to make sure users can easily touch them. The pointer input can be smaller if anyone of the following is true.
  • There is an equivalent link of size 44 x 44 on the same page.
  • The target is in a sentence or a block of text.
  • The size of the target is controlled by the user agent.
  • The size is essential for the information being conveyed.
• Concurrent Input Mechanisms: According to the success criterion 2.5.6, users should be able to use the input method of their choice, some may want to use a keyboard while others might prefer voice commands.

Need help with web accessibility?

At Ramsalt, we strongly believe that everyone should get an equal opportunity. If you are looking to get an accessible website or just need accessibility improvements for your website, we’d be happy to help you.