登录查看更多内容

What are the most effective accessibility patterns for progress indicators and spinners?

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

Progress indicators and spinners are visual cues that inform users about the status of an ongoing process, such as loading, uploading, downloading, or submitting data. They are essential for providing feedback and preventing frustration, especially when the process takes longer than expected. However, not all users can perceive or understand these cues, especially those who have visual, cognitive, or motor impairments. Therefore, it is important to follow some accessibility patterns and best practices to make sure that progress indicators and spinners are accessible to everyone.

在这篇协作文章中查找专家回答

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

1 Use aria attributes

Making progress indicators and spinners accessible can be achieved through the use of aria attributes. Accessible Rich Internet Applications (Aria) is a set of attributes that increase the semantic meaning and role of HTML elements. For progress indicators and spinners, the most pertinent aria attributes are aria-busy, aria-live, and aria-label or aria-labelledby. The aria-busy attribute should be set to true when the process begins and false when it ends, informing users of the activity and that they should wait. The aria-live attribute should be set to polite or assertive depending on the frequency and urgency of updates, so that assistive technologies can announce changes as they happen. Finally, the aria-label or aria-labelledby attributes should provide concise and clear text with percentage or duration of the process if possible, to provide context for users.

添加您的观点

Sri Vaishnava Santosh Samudrala

UX Research Assistant @ Comet Lab | Strategic Product Designer | Business Oriented | HCI Master's Degree
举报内容
While working with front end developers and JS enthusiasts, I've often heard from them that No ARIA is better than bad ARIA. Although ARIA can webpages more accessible, if implemented incorrectly can do more harm than good. So while implementing ARIA make sure that you do it correctly and follow all guidelines.

已翻译

赞
Ayan Hafeez

Senior UI/UX designer and Webflow developer. I help startups and companies with meaningful designs. Additionally, I share my expertise by teaching about these topics.
举报内容
I can use good ways to make progress indicators and spinners accessible for everyone. First, I make sure they're easy to see and stand out from the background. Next, I make them work with keyboards, so people can use them without a mouse. Then, I explain what they mean, so users understand what's happening. Lastly, I test them with tools like screen readers to make sure everyone can use them. By doing these things, I can make sure progress indicators and spinners work well for everyone.

已翻译

赞
Sam Lester

Making Complex Products Simple – Co-Founder at Inktrap
举报内容
ARIA attributes are vital for progress indicators and spinners because they bridge the gap between visual cues and accessibility needs. These attributes convey the status and function of these elements to users who rely on assistive technologies. For instance, a visually-impaired user might not see a spinner, but with the right ARIA attributes, they can be informed that a page or process is loading.

已翻译

赞

2 Use text and icons

Another effective way to make progress indicators and spinners accessible is to use both text and icons to convey the status of the process. Text and icons complement each other and provide multiple ways for users to understand what is going on. For example, a progress bar can have a text label that shows the percentage or the remaining time of the process, and an icon that shows the direction or the shape of the progress. A spinner can have a text label that says "Loading" or "Please wait", and an icon that shows a circular or a linear animation. Text and icons should be consistent, coherent, and visible, and use contrast and color to enhance readability and recognition.

添加您的观点

Sri Vaishnava Santosh Samudrala

UX Research Assistant @ Comet Lab | Strategic Product Designer | Business Oriented | HCI Master's Degree
举报内容
One thing as a user I've always found helpful is the progress percentage being shown or a loader having the text loading or please wait, since this not only re affirms the user that process is working it also psychologically solve's user' need to understand what is going on, there could be a possibility that users might think system is stuck or decide to back out on a form because the progress bar/loader was not clear and it seemed like a long form.

已翻译

赞

3 Use sound and vibration

A third effective way to make progress indicators and spinners accessible is to use sound and vibration to provide additional feedback and confirmation to users. Sound and vibration can be useful for users who have low vision, are blind, or have attention difficulties. They can also enhance the user experience and engagement for all users, as long as they are not intrusive or annoying. For example, a progress indicator or a spinner can have a sound or a vibration that indicates the start, the progress, and the end of the process. The sound or the vibration should be subtle, distinctive, and optional, and respect the user's preferences and settings.

添加您的观点

4 Use responsive and adaptive design

A fourth effective way to make progress indicators and spinners accessible is to use responsive and adaptive design to ensure that they work well on different devices, screen sizes, and orientations. Responsive and adaptive design can help users who have mobility, dexterity, or touch issues, as well as users who use different input methods, such as keyboards, mice, or touchscreens. They can also improve the user experience and satisfaction for all users, as they provide flexibility and consistency. For example, a progress indicator or a spinner can have a responsive and adaptive design that adjusts its size, position, and layout according to the device, the screen size, and the orientation. The design should be fluid, scalable, and responsive, and avoid overlapping or obscuring other elements.

添加您的观点

Siddharth Vij

Co-Founder @Bricx | We help SaaS companies design MVPs, revamp the existing design, or increase design team bandwidth.
举报内容
Ensuring accessibility in UI/UX for progress indicators and spinners is crucial. Responsive and adaptive design stands out as a key approach. It's more than aesthetics—it's about inclusivity. Adapting to various devices and sizes benefits users with mobility and dexterity challenges. A progress bar that adjusts its size and position ensures visibility and interaction for all. This approach enhances user satisfaction and accessibility. Our aim is to create intuitive and considerate experiences for every user. Champion designs that are universally accessible.

已翻译

赞

5 Test and evaluate

A fifth and final effective way to make progress indicators and spinners accessible is to test and evaluate them with real users and tools. Testing and evaluating can help identify and fix any accessibility issues or barriers that might prevent users from perceiving or understanding the status of the process. They can also provide valuable feedback and insights to improve the user experience and performance. For example, a progress indicator or a spinner can be tested and evaluated with real users who have different abilities, needs, and preferences, and with tools such as screen readers, color contrast checkers, or keyboard emulators. The testing and evaluation should be done throughout the design and development process, and follow the Web Content Accessibility Guidelines (WCAG) and other accessibility standards and best practices.

添加您的观点

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?

添加您的观点

User Experience

+ 关注

给文章评分

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

很棒不太好

举报此文章

查看全部

What are the most effective accessibility patterns for progress indicators and spinners?

1

2

3

4

5

6

1 Use aria attributes

2 Use text and icons

3 Use sound and vibration

4 Use responsive and adaptive design

5 Test and evaluate

6 Here’s what else to consider

User Experience

给文章评分

感谢您的反馈

更多User Experience相关文章

更多相关阅读内容

What are the most effective accessibility patterns for progress indicators and spinners?

1

2

3

4

5

6

1 Use aria attributes

2 Use text and icons

3 Use sound and vibration

4 Use responsive and adaptive design

5 Test and evaluate

6 Here’s what else to consider

User Experience

给文章评分

感谢您的反馈

查看其他技能