登录查看更多内容

What are the most common design patterns that cause accessibility issues?

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

Accessibility is not only a legal requirement, but also a moral and ethical responsibility for UX researchers and designers. However, some common design patterns can unintentionally create barriers and frustrations for people with disabilities, impairments, or situational limitations. In this article, you will learn about six of these patterns and how to avoid or improve them.

此文章中的业界达人

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

Siddharth Tewari

UX Designer

1 Color contrast

Color contrast is the difference in brightness and hue between the foreground and the background of a text or an element. Low color contrast can make it hard for people with low vision, color blindness, or glare to read or interact with the content. To ensure adequate color contrast, use tools like WebAIM's Contrast Checker or Chrome's Color Contrast Analyzer to measure and adjust the ratio between the colors. Aim for at least 4.5:1 for normal text and 3:1 for large text or UI components.

添加您的观点

Siddharth Tewari

UX Designer
举报内容
High color contrast not only facilitates readability for users with visual impairments but also enhances overall legibility for all users. It contributes to a clear visual hierarchy, making content more scannable and improving comprehension. Consistent and thoughtful color contrast choices also aid in creating a visually appealing and professional design. Striking the right balance ensures that the design is both accessible and visually engaging, catering to a diverse audience.

已翻译

赞

2 Keyboard navigation

Keyboard navigation is the ability to use only the keyboard to move through and interact with a website or an app. This is essential for people who cannot use a mouse, touch screen, or other pointing devices due to physical, motor, or cognitive impairments. To enable keyboard navigation, make sure that all interactive elements have a visible focus indicator, a logical tab order, and accessible labels. Avoid using keyboard traps, where the focus gets stuck in a modal or a widget, and provide ways to skip repetitive or irrelevant content.

添加您的观点

Siddharth Tewari

UX Designer
举报内容
Many users, even those without disabilities, rely on keyboard shortcuts for efficiency and ease of navigation. By designing an intuitive and logical tab order, including visible focus indicators, and providing skip links, you create a more inclusive and user-friendly experience. Prioritizing keyboard accessibility is not just about compliance with standards but contributes to a seamless and efficient interaction for a diverse user base.

已翻译

赞

3 Forms and inputs

Forms and inputs are common elements that allow users to enter and submit information. However, they can also pose accessibility challenges if they are not designed and coded properly. Some of the issues that can arise are: unclear or missing labels, inconsistent or confusing error messages, lack of instructions or feedback, and incompatible or inaccessible input types. To improve the accessibility of forms and inputs, follow the best practices from W3C's Web Content Accessibility Guidelines (WCAG) and use semantic HTML elements, such as <label>, <fieldset>, and <input>.

添加您的观点

4 Images and icons

Images and icons are visual elements that can enhance the aesthetics and the meaning of a website or an app. However, they can also create accessibility problems if they are not accompanied by alternative text, captions, or descriptions. Alternative text is a short text that conveys the purpose or content of an image or an icon for screen readers and other assistive technologies. Captions are text that provide additional information or context for an image or a video. Descriptions are text that explain complex or detailed images, such as charts or diagrams. To provide accessible images and icons, use the <img> tag with the alt attribute, the <figure> and <figcaption> tags, or the <longdesc> attribute.

添加您的观点

5 Navigation and structure

Navigation and structure are the elements that help users find and access the information and functionality they need. However, they can also create accessibility issues if they are not consistent, clear, or logical. Some of the issues that can arise are: missing or ambiguous headings, unclear or hidden menus, complex or nested layouts, and lack of landmarks or regions. To improve the navigation and structure of a website or an app, use headings to organize the content hierarchically, use menus and breadcrumbs to indicate the location and the options, use grids and columns to arrange the layout, and use landmarks and regions to identify the main sections.

添加您的观点

6 Animation and motion

Animation and motion are the elements that add dynamism and interactivity to a website or an app. However, they can also create accessibility issues if they are not controlled, adjustable, or optional. Some of the issues that can arise are: motion sickness, seizures, distraction, or discomfort. To avoid or reduce the negative effects of animation and motion, use the prefers-reduced-motion media query to detect and respect the user's preference, provide options to pause, stop, or hide the animation or motion, and avoid flashing or flickering effects that can trigger seizures.

添加您的观点

Siddharth Tewari

UX Designer
举报内容
Providing users with the ability to control or disable animations aligns with the principle of user agency, allowing individuals to tailor their experience based on preferences or needs. It's important to strike a balance between creating engaging and dynamic interfaces and respecting users' comfort and well-being. By adhering to best practices and incorporating user preferences, designers can enhance the overall usability and enjoyment of their digital products for everyone.

已翻译

赞

7 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?

添加您的观点

User Research

+ 关注

给文章评分

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

很棒不太好

举报此文章

查看全部

What are the most common design patterns that cause accessibility issues?

1

2

3

4

5

6

7

1 Color contrast

2 Keyboard navigation

3 Forms and inputs

4 Images and icons

5 Navigation and structure

6 Animation and motion

7 Here’s what else to consider

User Research

给文章评分

感谢您的反馈

更多User Research相关文章

更多相关阅读内容

What are the most common design patterns that cause accessibility issues?

1

2

3

4

5

6

7

1 Color contrast

2 Keyboard navigation

3 Forms and inputs

4 Images and icons

5 Navigation and structure

6 Animation and motion

7 Here’s what else to consider

User Research

给文章评分

感谢您的反馈

查看其他技能