登录查看更多内容

What are some best practices for testing web content for keyboard accessibility?

由人工智能和领英社区提供技术支持

Keyboard accessibility is a crucial aspect of web content accessibility, as it ensures that users who rely on keyboards or alternative input devices can navigate and interact with your website. However, testing your web content for keyboard accessibility can be challenging, as there are many potential issues and pitfalls that can affect the user experience. In this article, we will share some best practices for testing web content for keyboard accessibility, based on the Web Content Accessibility Guidelines (WCAG) standards.

此文章中的业界达人

由社区从 8 条内容中精选。了解更多

1 Use a keyboard-only approach

One of the best ways to test your web content for keyboard accessibility is to use a keyboard-only approach, meaning that you use only the tab, arrow, enter, and escape keys to navigate and operate your website. This will help you identify any keyboard traps, where the focus gets stuck in a certain element or region and cannot be moved out using the keyboard. Keyboard traps are a serious violation of the WCAG 2.1 success criterion 2.1.2 No Keyboard Trap, and can prevent users from accessing other parts of your website or exiting it. To avoid keyboard traps, you should ensure that every focusable element has a clear and logical tab order, and that there is a way to move the focus out of any modal dialogs, menus, or other interactive components.

添加您的观点

Jesse Sookne

I help SaaS companies stop turning away disabled customers by making their products accessible.
举报内容
Start with the Tab key. Open your website or web app. Press Tab. See what happens. Tabbing through web content teaches you fundamental concepts of web accessibility: * the concept of focus * the need for a visual focus style * the sequential order of items in the page * keyboard interactions (hints: Shift + Tab to go backward, Spacebar or Enter to activate a button, Enter to activate a link) Try tabbing through your UI and notice: * can you reach all the interactive controls -- everything that responds to a click or tap, e.g. buttons, links, etc.? * can you use all these controls with the keyboard? * does focus ever disappear? * does focus get stuck in one place? These are all common keyboard accessibility problems to look out for.

已翻译

赞
Michael Gower

Senior Consultant in Accessibility at IBM
举报内容
I'm going to humbly suggest that IBM's verification procedure is more succinct than this, and is offered in the context of other verification tests besides keyboard https://www.ibm.com/able/toolkit/verify/manual#test-with-a-keyboard

已翻译

赞
Karl Bernoth

Test Analyst at Informatech Pty Ltd | WCAG Compliance Expert
举报内容
Testing web content for keyboard accessibility is crucial for ensuring that users can navigate and interact with your website using only keyboard input, which is essential for individuals with motor disabilities and those who rely on assistive technologies. Familiarise yourself with how keyboard navigation works on websites. Understand tabbing order, focus management, and keyboard shortcuts commonly used by screen reader users and individuals with motor disabilities.

已翻译

赞

2 Check the focus indicators

Another important aspect of testing your web content for keyboard accessibility is to check the focus indicators, which are visual cues that show which element is currently focused by the keyboard. Focus indicators are essential for users to know where they are on the page and what they can do next. Without focus indicators, users may lose track of their location or miss important information or functionality. Focus indicators are required by the WCAG 2.1 success criterion 2.4.7 Focus Visible, and should be clear, consistent, and contrast well with the background. To check the focus indicators, you should verify that every focusable element has a visible focus indicator, and that it does not overlap or obscure other elements or content.

添加您的观点

Karl Bernoth

Test Analyst at Informatech Pty Ltd | WCAG Compliance Expert
举报内容
Pay attention to the visual indication of keyboard focus as you navigate through elements. Ensure that focused elements are clearly visible and distinguishable from surrounding content. Use CSS to style focus states appropriately.

已翻译

赞

3 Test the keyboard shortcuts

Some web content may provide keyboard shortcuts, which are combinations of keys that perform a specific action or function. Keyboard shortcuts can enhance the user experience and efficiency, especially for users who prefer or need to use the keyboard. However, keyboard shortcuts can also pose some accessibility issues, such as conflicts with browser or assistive technology commands, or accidental activation by users who are not aware of them. Therefore, testing the keyboard shortcuts is another best practice for testing web content for keyboard accessibility. According to the WCAG 2.1 success criterion 2.1.4 Character Key Shortcuts, keyboard shortcuts should be either remappable, turn-offable, or only active when the relevant element is focused. To test the keyboard shortcuts, you should try to use them and see if they work as expected, and if they have any of these options available.

添加您的观点

4 Evaluate the keyboard support

Besides testing the basic keyboard functionality and features, you should also evaluate the keyboard support of your web content, which refers to how well your website responds to and communicates with the keyboard input. Keyboard support is related to several WCAG 2.1 success criteria, such as 1.3.2 Meaningful Sequence, 2.4.3 Focus Order, 3.2.1 On Focus, and 4.1.2 Name, Role, Value. To evaluate the keyboard support, you should check if your web content has a logical and intuitive structure and order, if it provides clear and relevant feedback and instructions to the keyboard users, and if it exposes the correct information and states to the assistive technologies.

添加您的观点

Anisat A., CPACC

Digital Accessibility Specialist | Technical Writer | AWS Community Builder (Frontend Web & Mobile)
举报内容
- Ensure all interactive elements like the buttons, links, menus, etc. are accessible in a logical order using the "tab" key. - Ensure that focus indicators highlight the currently focused element for keyboard navigation.

已翻译

赞

5 Use accessibility testing tools

Finally, one of the best practices for testing web content for keyboard accessibility is to use accessibility testing tools, which are software applications or extensions that can help you identify and fix accessibility issues on your website. Accessibility testing tools can automate some of the testing processes, such as checking the code quality, the contrast ratio, or the WCAG compliance. However, accessibility testing tools cannot replace manual testing, as they may not detect all the potential problems or nuances that affect the keyboard accessibility. Therefore, you should use accessibility testing tools as a complement to your manual testing, and not as a substitute.

添加您的观点

Karl Bernoth

Test Analyst at Informatech Pty Ltd | WCAG Compliance Expert
举报内容
Utilize accessibility testing tools like Axe, WAVE, or browser developer tools to identify keyboard accessibility issues. These tools can help automate the testing process and provide actionable insights for improving accessibility.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Lillie Mazitova

E-commerce & E-commerce Compliance Expert ?? | Web & Technical Project Manager in Retail and Luxury Industries | Forbes France 2024 ?? | LinkedIn Top E-commerce Voice ?? | Brevo Expert Partner
举报内容
Here are a few things to pay attention to when implementing keyboard navigation: - Consider the order of elements when visitors use the 'Tab' key. If you have a mega-menu and several columns, make sure the 'Tab' navigation follows common sense. The same goes for navigating between input fields in forms. - Don't forget to provide an exit from the element currently in focus. For example, this is very useful if you have a mega-menu. This can be implemented using the 'Esc' key. - Remember that visible focus indicators have to also respect the color contrast ratio requirements. You may end up having different focus indicators depending on the element in question. - Always include "Skip to Main Content" and "Skip to Footer" links. #accessibility

已翻译

赞
Karl Bernoth

Test Analyst at Informatech Pty Ltd | WCAG Compliance Expert
举报内容
- Conduct User Testing Involve users with disabilities in your testing process to gather first-hand feedback on keyboard accessibility. Observing how real users interact with your website using only the keyboard can uncover usability issues that may not be apparent through automated testing alone. - Document and Address Issues Document any keyboard accessibility issues you encounter during testing and prioritize them for remediation. Work with developers to implement fixes and conduct regression testing to ensure that issues are resolved effectively.

已翻译

赞

Web Content Accessibility Guidelines (WCAG)

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are some best practices for testing web content for keyboard accessibility?

1

2

3

4

5

6

1 Use a keyboard-only approach

2 Check the focus indicators

3 Test the keyboard shortcuts

4 Evaluate the keyboard support

5 Use accessibility testing tools

6 Here’s what else to consider

Web Content Accessibility Guidelines (WCAG)

给文章评分

感谢您的反馈

更多Web Content Accessibility Guidelines (WCAG)相关文章

更多相关阅读内容