# A guide to troublesome UI components

DevFeed: [A guide to troublesome UI components](<https://devfeed.tech/articles/a-guide-to-troublesome-ui-components-9362.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/a-guide-to-troublesome-ui-components/>)

Author: Martin Lexelius

Published: 2023-02-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code quality](<https://devfeed.tech/topics/code-quality.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [code-quality](<https://devfeed.tech/tags/code-quality.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

A guide to designing and implementing troublesome UI components accessibly. It explains why accessibility should be planned early and highlights keyboard interaction, focus management, screen-reader announcements, correct HTML elements, ARIA attributes, and code quality.

## Source excerpt

A common opinion is that accessibility is expensive, and that if you think accessibility is expensive, you can deal with it later. Here's the twist: it will be expensive if you deal with it later. However, accessibility is not expensive if you discuss it as a team early in the process. It is possible to build just about anything, it comes down to time and money. But no client ever has said, "Hey, we have a lot of time and money!" Accessibility is not expensive if you proactively plan for it. That's why you need to learn how to avoid some of the common pitfalls. Before we start User interface (UI) elements are the parts we use to build apps or websites, such as links, accordions and checkboxes etc. Some UI components are more complicated than other components. And some components are really complicated. All roles that build for the web (product owners, UX designers, art directors, developers, QA engineers) must know this. The challenges The components in this article all have the following challenges in common: Keyboard interaction. Everything that can be done with a mouse, must be possible to do with a keyboard. This includes navigating, opening and closing items, activating, stopping, starting, selecting, etc. Focus appearance and management. Users navigating by keyboard must know where they are. Always show the user's current position in the interface. The focus order should be logical and intuitive. Consistent announcements. All events and interactions should correspond as understandable and relevant audio feedback in screen readers. Buttons should describe themselves as buttons, links as links, etc. Code quality. Using the correct elements and ARIA attributes, as well as valid HTML. The components Following are some UI components that have non-trivial considerations to use in an accessible way: Custom selects Native HTML <select> elements (sometimes referred to as dropdowns, not to be confused with disclosures) has the most understandable and usable experience a