Web accessibility has made headlines in recent months with a number of senators calling for additional clarification of website accessibility requirements from the DOJ. While the future around web accessibility regulation remains uncertain, it’s important that business owners understand prevailing standards. We’re exploring these considerations in a series of blog posts where we tackle the four key principles of the WCAG 2.0.
In the first blog post of this four-part series, we shared an overview of the perceivable principle. For part two, we’re exploring the second principle of the WCAG 2.0: operable.
*It’s important to note that when we discuss those with auditory or visual disabilities throughout this series, we are not only speaking of those with the most commonly known disabilities, such as deafness and blindness. Other auditory and visual disabilities include colorblindness, and partial hearing and vision loss. Other factors that may impact one’s ability to access content on your website may include reading disabilities, a language barrier, a slow internet connection and limited access to small screens on handheld devices.
The list below is not intended to be an all-inclusive guide for website developers. Instead, it simply explores how some common website elements can be modified for greater accessibility.
Principle 2: Operable
According to the WCAG 2.0, under this principle, “user interface components and navigation must be operable to users.” In other words, visitors should be able to navigate through your website without any limitations around functionality or time. The content on your site should operate using alternate methods for those that rely on assistive technologies. Below are the guidelines that website developers and designers must keep in mind when creating an accessible website.
Guideline 2.1: Keyboard Accessible
Under this guideline, you should “make all functionality available from a keyboard.”
A website should function with the use of a keyboard for those that are unable to navigate through a website using a mouse.
- In addition to giving visitors the option to close an application or pop-up that appear on a webpage by clicking on the “X” symbol with the mouse, users should also be able to close these by using a button on a keyboard.
- Visitors should be able to enter and exit sections of a webpage using only a keyboard.
- Drag and drop features should also support cut and paste functionality via a keyboard in order to move objects on a page.
Guideline 2.2: Enough Time
Under this guideline, you should “provide users enough time to read and use content.”
Websites should eliminate time constraints so that users can complete tasks at their own pace. Users should have control over website content that moves or scrolls throughout the page in order to read and understand the information at their leisure.
- Animations and scrolling headlines and images on your website should have a pause and restart button so the user has time to view the entirety of the content.
- Side panel advertisements that blink content for longer than five seconds can be paused, stopped or hidden.
- If a form must be completed in a specific amount of time, the user should be allowed to adjust, extend or turn off the time limit.
- For websites that become inactive after a specific amount of time, users should be warned that their session will expire and asked to extend the time limit on the webpage.
Guideline 2.3: Seizures and Physical Reactions
Under this guideline, “do not design content in a way that is known to cause seizures or physical reactions.”
Websites must omit any content elements that may cause seizures or other physical reactions.
- Images or videos must limit flashes to three or less within a second.
- Animations from interactions can be disabled by the user.
- Keep the flashing area small on a webpage.
Guideline 2.4: Navigable
Under this guideline, you should “provide ways to help users navigate, find content, and determine where they are.”
Users should be able to easily locate where they are on the site, navigate through the site and find the information they are searching for.
- Page titles and headings should clearly identify the purpose of the webpage’s contents.
- A link’s text should clearly identify the purpose of the link on your site.
- Users should have multiple ways of accessing a webpage (navigation menu, breadcrumbs, search bar, etc.).
- Users may skip over duplicate content areas and head straight to the main content on the page. For example, if your site has a logo or header graphic at the top of every page, you can add a link above this content that will allow users to jump straight to the main content area.
- For users navigating your site with a keyboard, it should be clear which element has the keyboard’s focus, whether it’s through highlighting text or adding borders around the content element.
Guideline 2.5: Input Modalities
Under this guideline, “make it easier for users to operate functionality through various inputs beyond keyboard.”
Users should be able to interact with a website using additional input methods, such as touchscreen, voice or device motion.
- Users must be able to switch between different modes of input when interacting with content on a webpage.
- Target sizes (items on a page that a user clicks on) must be at least 44 by 44 CSS pixels so that users can easily identify and activate targets whether they are using a laptop/desktop with a mouse or a tablet/mobile device with a touch screen.
You can check your website’s accessibility here. Next up, we’ll dive deeper into Principle 3: Understandable.