Buttons are the workhorse of the web, but are yours accessible? Discover how to improve the experience for screen reader and keyboard users by mastering button states, icon labels, and proper HTML semantics.

SimpleThread's platform is a resource for software developers and technology enthusiasts, offering insights into software development practices, technology trends, and industry insights. Through articles, tutorials, and case studies, SimpleThread offers insights into software architecture, development tools, and best practices in software engineering. Readers can learn about building scalable and maintainable software applications, adopting agile methodologies, and leveraging emerging technologies to solve complex problems.

Simple Thread

Buttons require careful consideration for accessibility. Use semantic HTML `<button>` elements instead of `<div>` or links to ensure proper keyboard navigation and screen reader support. Add `aria-label` or visually-hidden text for icon-only buttons, use `aria-pressed` to convey toggle states, and choose between `disabled` and `aria-disabled` attributes based on whether users need to know the button exists. Proper button implementation ensures keyboard users and screen reader users can effectively interact with web applications.

Building Better Buttons

The screen reader and keyboard experience

<p>is there no live showcase ? where is the button ?</p>


<p>Interesting read! ARIA is super confusing to me, nice to get a small taste.</p>
<blockquote>
<p>Unlike [disabled], it will not prevent clicks or presses, so you’ll need to check for [aria-pressed] state in your JavaScript and ignore interactions when set to “true.”&lt;</p>
</blockquote>
<p>Can’t you set something like ‘pointer-events: none;’ for the aria-pressed attribute, or would that still allow keypresses 🙂? Any other reason that you’d have to resort to JS?</p>
