Eleviant is to Elevate & Scale. Eleviant Tech symbolizes business transformation and reinforces our mission to help clients elevate and scale their business.
ADA Compliance for Websites: WCAG 2.1 Updates Released. What’s New?
World Wide Web Consortium (W3C) released the next set of guidelines in April 2018 with 17 new success criteria what is considered to be the extension of WCAG 2.0 standards already in use.
Web owners in the United States heaving a sigh of relief on complying to WCAG 2.0 standards levels A and AA now have to look into the latest accessibility updates to escape the penalty, legal threats.
Is complying to WCAG 2.1 changes imperative for websites?
It’s true that fresh litigations are yet to be filed for non-compliance against WCAG 2.1 standards; however, in the future the new standards may be imperative, as the guidelines help web owners ensure a seamless and complete digital accessibility to users. So, understanding and complying to the latest success criteria becomes significant.
WCAG 2.1 Updates: What’s New
These additional guidelines mainly focus on enhancing the accessibility for users with low vision, cognitive disabilities, and users having challenges in using mobile devices.
Let’s explore and find out what the updates exactly are.
1. Low Vision
The guidelines below are exclusively targeted at the users with low vision challenges.
1.4.10 Reflow (AA) – Avoiding the horizontal scrolling
Low vision challenged users generally have to increase the size of content in a web page to at least 200% (it’s the threshold value defined in WCAG 2.0) for looking up to information and this mostly leads to loss of content or functionality. They have to scroll the page horizontally to consume the complete information.
Whereas, WCAG 2.1 guideline not only has increased the content zoom in percentage from 200 to 400 on desktop browsers but also avoids horizontal scrolling on a page to consume the content without any loss. By this way, users with lower vision can digest web information seamlessly.
1.4.11 Non-text contrast (AA) – Ensuring 3:1 contrast ratio to read text clearly
Offer users with a contrast ratio of at least 3:1 against adjacent color(s) for the text in graphics, diagrams and buttons to read information clearly without any difficulty.
1.4.12 Text spacing (AA) – Adjusting line height and spacing without content loss
Help users adjust the line height, letter or paragraph spacing, word spacing etc. and read web content without any loss of content or functionality. Best to avoid setting fixed heights on elements containing text. When text needs more space, it has to be able to adjust vertically and push the contents down below.
In the earlier WCAG 2.0 version, either the increase in height was not available or increase in line heights will hide the content below/above. The latest guideline helps to ensure avoiding data losses.
1.4.13 Content on hover or focus (AA) – Dismissing tool tip during mouse hovers
In the WCAG 2.0 version, whenever a user hovers on the content, a tooltip appears and hides the content beneath and makes it difficult for the users.
The new update enables users to dismiss the content without moving mouse or keyboard focus and view the content on scroll, avoiding any content loss.
1.3.6 Identify purpose (AAA) – Properly program buttons with purpose
Users with low vision or cognitive disabilities often have difficulties in identifying UI components, icons, region information without any purpose or label. This could potentially annoy them.
Using HTML5 regions or ARIA landmarks to identify page regions, the purpose of User Interface Components, icons, and regions through programming will be a viable solution.
With HTML code providing “context, purpose, and meaning of symbols, regions, buttons, links, and fields.” It would be easier for users to perform only the intended action. For example, if a button links back to home, the code should label the button as a “home button,” not just a button.
2. Cognitive
The guidelines below are exclusively targeted at the users facing psychological challenges when accessing a web content.
1.3.5 Identify input purpose (AA) – Identifying input purpose visually
The previous WCAG 2.0 version didn’t account for identifying the input purpose when used by visitors. Ex. Contact form, form fills, and shipping forms. Sometimes the users can’t understand the purpose of the field and this may cause difficulty during form fills.
The updated version supports this scenario. Input fields can be provided with auto complete attribute defined or familiar terms and icons or symbols for the input labels can be added so that assistive technology tools will be able to identify the purpose of the field before entering the data.
4.1.3 Status messages (AA) – Displaying clear status messages to users for actions
Users with low vision or cognitive disabilities will have challenges in identifying the status of an action performed. There should be specific roles assigned to the action to help users perform and understand results of intended actions easily.
Adding status messages for every action will help the users to identify the results of the action easily. Status messages should be visible clearly so that users of assistive technologies can be alerted on the status of the action performed.
2.2.6 Timeouts (AAA) – Alerting the users on timeouts during inactive sessions
Most users intend to forget that session timeout is enabled on the website and being inactive for a long time can result in session timeouts. When they try to access the same page after an interval of time, they may be forced out of the web page.
The latest version recommends web owners to warn users with an alert while performing an activity that there may be a data loss if no activity is performed for a specific time period or if activity is not performed within a stipulated time period.
2.3.3 Animation from interactions (AAA) – Avoiding non-essential movements
Users with low vision and cognitive disabilities often face the problem of distractions from motion pictures or animations when accessing content from a web page. This hinders their visibility and distracts from understanding the information they intend to.
WCAG 2.1 has created a new guideline to benefit people with vestibular disorders who can get dizzy, nauseous, or distracted from non-essential movement. With this approach, the distractions can be avoided completely by enabling the users to focus solely on the content they consume and disable any animations.
3. Mobile
These guidelines are targeted at websites that don’t comply with mobile responsiveness and offer poor user experiences.
1.3.4 Orientation (AA) – Enabling orientations on web and applications
Often times, users face challenges with orientations on either landscape or portrait. This could be due to images/screen layout in portrait mode won’t be eye pleasing in landscape mode and vice versa. Also, consuming content in only one of the two formats can also be daunting for users with disabilities.
The new version ensures not to lock to a specific orientation (Portrait or landscape). The guideline recommends that websites, applications should support both landscape and portrait orientations for consuming all contents better.
2.1.4 Character key shortcuts (A) – Disabling single key shortcuts for defined actions
Sometimes unintentional keyboard hits, mostly because of single key shortcuts, can produce undesired results to the users with physical challenges and such activities distract the users from the original information/action to be performed.
Disabling use of single key shortcuts can prevent or minimize conflicts with assistive technology keyboard actions and help users to access only the intended information.
2.5.1 Pointer gestures (A) – Pinching, zooming, swiping with ease
Performing pinching, zooming options on a web page may not yield the necessary results intended by the users sometimes and this stops the user from consuming the content or performing the actions.
This WCAG 2.1 guideline ensures user can perform touch functions powered by assistive technology or using one finger. Complex actions such as pinching or zooming or swiping should also be able to be performed through simpler actions like taps or long presses. This makes the operations by users simple and seamless when accessing digital content.
2.5.2 Pointer cancellation (A) – Enabling undo for accidental tapping
It’s common that some users may tap accidentally, and this might trigger some unintended action. This causes distraction to users and needs to be addressed.
By enabling an undo feature for accidentally tapping on something which triggers an action, users can avoid triggering on touch down, or on touch up allowing them to move their finger away from the wrong target. This helps users consume information better.
2.5.3 Label in name (A) – Matching visible text with accessible/program label
Users are often baffled over the visible text of a label and the text on the UI developed. There may be difference causing ambiguity in the minds of users when both are different. This needs to be avoided.
The latest update focuses on creating labels for visible text that matches with the accessible name or programmatic label.
2.5.4 Motion actuation (A) – Turning off accidental motions
Any user will tilt or shake the device to perform an action and this might prove difficult.
The new update encourages the users not to tilt or shake device to perform an action but provide alternative mechanisms to accomplish the action. Accidental motions can be turned off unless the motion is essential for functionality or is supported through an accessible interface. This enables users to consume the information without any device movements.
2.5.5 Target size (AAA) – Enabling actionable controls for large “hit” area
Users having challenges with fine motor control may encounter complication when the active area for invoking an action in target area for pointer inputs is minimal. This often leads to undesired results and distracts the users from viewing the intended page.
The WCAG 2.1 update ensures that all actionable controls in web content provide a sufficiently large “hit” area so that even users lacking fine motor control can perform the actions easily.
2.5.6 Concurrent input mechanisms (AAA) – Utilizing different input mechanisms for accessing content
Users should be allowed to access the web page through multiple mechanisms and not stuck with one or two options. Switching between different mechanisms for inputs will help users acquire the information they look for swiftly and seamlessly.
The new update recommends adding, removing, or switching between different input mechanisms like a mouse, keyboard, styles, touch input, or voice input to access the content they are interested in.
To summarize, WCAG 2.1 is an extension of WCAG 2.0 guidelines to ensure equal accessibility to all in the United States. While it’s not mandatory to update your websites to WCAG 2.0 immediately to escape fines and litigation, adhering to the new guidelines may save you in future as these rules will be considered for penalty.
Is your website ADA compliant? Get started today.
