{"id":7156,"date":"2026-11-05T05:43:44","date_gmt":"2026-11-05T05:43:44","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=7156"},"modified":"2026-11-05T05:43:46","modified_gmt":"2026-11-05T05:43:46","slug":"aria-basics-for-designers-a-practical-guide-for-ux-teams","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/","title":{"rendered":"ARIA Basics for Designers: A Practical Guide for UX Teams"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#What_Is_ARIA\" >What Is ARIA?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Why_Designers_Should_Care\" >Why Designers Should Care<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#The_First_Rule_of_ARIA\" >The First Rule of ARIA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#The_Three_Building_Blocks_of_ARIA\" >The Three Building Blocks of ARIA<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#1_Roles_what_is_it\" >1. Roles: what is it?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#2_Properties_what_are_its_characteristics\" >2. Properties: what are its characteristics?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#3_States_what_is_it_doing_right_now\" >3. States: what is it doing right now?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#ARIA_Attributes_Designers_Should_Know\" >ARIA Attributes Designers Should Know<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Accessible_names_aria-label_and_aria-labelledby\" >Accessible names: aria-label and aria-labelledby<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Landmarks\" >Landmarks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Live_regions\" >Live regions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Hiding_content_aria-hidden\" >Hiding content: aria-hidden<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Examples_ARIA_in_Common_Components\" >Examples: ARIA in Common Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#How_Designers_Can_Help_in_Handoff\" >How Designers Can Help in Handoff<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Common_ARIA_Mistakes\" >Common ARIA Mistakes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#How_to_Test_ARIA\" >How to Test ARIA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#A_Quick_Checklist\" >A Quick Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#Bringing_It_All_Together\" >Bringing It All Together<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">Designers rarely think about ARIA until an accessibility audit lands on their desk with a line like \u201ccustom dropdown missing role and state.\u201d At that point, the fix often means rebuilding a component that looked perfect in the design file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ARIA does not have to be a developer-only mystery. A little knowledge helps designers make better component decisions, write clearer handoff notes and avoid creating patterns that are hard to make accessible. This guide explains what ARIA is, the handful of concepts worth knowing and the mistakes to avoid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_ARIA\"><\/span>What Is ARIA?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">ARIA stands for <strong>Accessible Rich Internet Applications<\/strong>. It is a set of attributes, defined by the W3C\u2019s WAI-ARIA specification, that you add to HTML elements to give assistive technologies extra information about what an element is, what state it is in and how it relates to other elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Screen readers do not see visuals. They read the page\u2019s underlying structure. A standard button tells a screen reader \u201cthis is a button.\u201d A custom control built from generic elements tells it nothing. ARIA fills that gap by adding the missing information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think of ARIA as <strong>labels and annotations for assistive technology.<\/strong> It changes what is announced, but it does not change how an element looks or behaves. It adds no keyboard support and no focus handling. Those still have to be built.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Designers_Should_Care\"><\/span>Why Designers Should Care<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design choices create the need for ARIA.<\/strong> Custom tabs, comboboxes, accordions, tooltips and carousels are the usual places where ARIA is required, and designers decide whether those patterns exist.<\/li>\n\n\n\n<li><strong>Behavior is part of the design.<\/strong> How a menu opens, where focus goes and what is announced are design decisions, not implementation details.<\/li>\n\n\n\n<li><strong>Clear specs prevent rework.<\/strong> When designers describe roles, states and announcements in handoff, developers build the right thing the first time.<\/li>\n\n\n\n<li><strong>It supports inclusion.<\/strong> For the wider context, read our guide to <a href=\"https:\/\/www.originux.com\/resources\/blog\/inclusivity-and-accessibility-differences-in-experience-design\">inclusivity and accessibility in experience design<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_First_Rule_of_ARIA\"><\/span>The First Rule of ARIA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The most important principle is this: <strong>if a native HTML element already does the job, use it instead of ARIA.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A real button element comes with a role, keyboard activation, focus behavior and screen reader announcements built in. A styled div with role=&#8221;button&#8221; needs all of that rebuilt manually, and it is easy to get wrong.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Large-scale analyses of home pages have found that pages using ARIA tend to have more detected accessibility errors than pages without it. This is not because ARIA is bad. It is because incorrect ARIA misleads users with confident but wrong information. <strong>No ARIA is better than bad ARIA.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So the practical order of preference is:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use a native element<\/li>\n\n\n\n<li>Use a native element plus a small amount of ARIA for extra state<\/li>\n\n\n\n<li>Use ARIA on a custom component only when there is truly no alternative<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Three_Building_Blocks_of_ARIA\"><\/span>The Three Building Blocks of ARIA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Roles_what_is_it\"><\/span>1. Roles: what is it?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A role tells assistive technology what type of thing an element is. Examples include button, dialog, tablist, tab, tabpanel, menu, alert and navigation. Many roles map to native elements, which is why you rarely need to add them manually.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Properties_what_are_its_characteristics\"><\/span>2. Properties: what are its characteristics?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Properties describe relationships and features that tend not to change often. Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>aria-label:<\/strong> provides an accessible name when no visible text exists<\/li>\n\n\n\n<li><strong>aria-labelledby:<\/strong> points to another element that contains the name<\/li>\n\n\n\n<li><strong>aria-describedby:<\/strong> points to extra help text or an error message<\/li>\n\n\n\n<li><strong>aria-controls:<\/strong> indicates which element this control affects<\/li>\n\n\n\n<li><strong>aria-required:<\/strong> marks a field as required<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_States_what_is_it_doing_right_now\"><\/span>3. States: what is it doing right now?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">States describe conditions that change as users interact. Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>aria-expanded:<\/strong> whether a collapsible section is open or closed<\/li>\n\n\n\n<li><strong>aria-selected:<\/strong> whether a tab or option is selected<\/li>\n\n\n\n<li><strong>aria-checked:<\/strong> the state of a custom checkbox or toggle<\/li>\n\n\n\n<li><strong>aria-pressed:<\/strong> whether a toggle button is on<\/li>\n\n\n\n<li><strong>aria-current:<\/strong> the current page, step or item<\/li>\n\n\n\n<li><strong>aria-invalid:<\/strong> whether a field has an error<\/li>\n\n\n\n<li><strong>aria-disabled:<\/strong> whether a control is unavailable<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">States must be <strong>updated in real time<\/strong> to match what is shown on screen. A menu that looks open but still announces \u201ccollapsed\u201d is worse than no state at all.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ARIA_Attributes_Designers_Should_Know\"><\/span>ARIA Attributes Designers Should Know<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Accessible_names_aria-label_and_aria-labelledby\"><\/span>Accessible names: aria-label and aria-labelledby<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Every interactive element needs a name that is announced. An icon-only button, such as a magnifying glass, needs a text name like \u201cSearch.\u201d Use visible text where possible, because it helps everyone. When it is not visible, ARIA provides the name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep one rule in mind: the accessible name should <strong>include the visible label text<\/strong>. If a button says \u201cBuy now\u201d on screen, an aria-label of \u201cPurchase\u201d breaks speech-control users who say \u201cclick Buy now.\u201d Clear, consistent <a href=\"https:\/\/www.originux.com\/resources\/blog\/ux-writing-is-fuelling-superior-digital-experiences\">UX writing<\/a> pays off here.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Landmarks\"><\/span>Landmarks<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Roles such as banner, navigation, main, search and contentinfo (and their native elements: header, nav, main, footer) let screen reader users jump between regions. If a page has several navigation regions, give each a distinct label, such as \u201cMain\u201d and \u201cFooter,\u201d so users can tell them apart.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Live_regions\"><\/span>Live regions<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Dynamic updates, such as toasts, form errors, cart changes and search results, often appear without moving focus, so screen reader users miss them. A live region announces changes automatically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>aria-live=&#8221;polite&#8221;<\/strong> waits for a pause before announcing, suitable for most updates<\/li>\n\n\n\n<li><strong>aria-live=&#8221;assertive&#8221;<\/strong> interrupts, so reserve it for urgent messages<\/li>\n\n\n\n<li><strong>role=&#8221;status&#8221;<\/strong> and <strong>role=&#8221;alert&#8221;<\/strong> are shortcuts for polite and assertive behavior<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Overusing live regions floods users with noise, so announce only what matters.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hiding_content_aria-hidden\"><\/span>Hiding content: aria-hidden<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">aria-hidden=&#8221;true&#8221; removes an element from the accessibility tree, which is useful for purely decorative icons. But <strong>never apply it to something focusable<\/strong>, because keyboard users can still land on an element that screen readers pretend does not exist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Examples_ARIA_in_Common_Components\"><\/span>Examples: ARIA in Common Components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Icon button.<\/strong> A hamburger icon with no visible text needs an accessible name such as \u201cOpen menu,\u201d and aria-expanded to show whether the menu is open.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Accordion.<\/strong> Each heading contains a button. The button uses aria-expanded to show open or closed and aria-controls to point to its panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tabs.<\/strong> A tab list contains tabs with aria-selected, and each tab is linked to a tab panel. Arrow keys move between tabs, and the selected tab is announced.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Modal dialog.<\/strong> The dialog has a role, a name from its heading and aria-modal to signal that background content is inert. Focus moves in on open and returns to the trigger on close.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Form error.<\/strong> A field with a problem sets aria-invalid, and its error message is linked with aria-describedby, so the message is announced alongside the field. For more on form patterns, see our guide to <a href=\"https:\/\/www.originux.com\/resources\/blog\/inclusivity-and-accessibility-differences-in-experience-design\">accessible forms<\/a> and related inclusive design principles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Designers_Can_Help_in_Handoff\"><\/span>How Designers Can Help in Handoff<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You do not need to write code to contribute. For each component, document:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose and name:<\/strong> what is it, and what should be announced?<\/li>\n\n\n\n<li><strong>Role or native element:<\/strong> button, link, dialog, tab list?<\/li>\n\n\n\n<li><strong>States and when they change:<\/strong> expanded, selected, disabled, error, loading<\/li>\n\n\n\n<li><strong>Keyboard behavior:<\/strong> which keys do what, and where does focus go?<\/li>\n\n\n\n<li><strong>Focus management:<\/strong> what happens to focus on open, close, delete or route change?<\/li>\n\n\n\n<li><strong>Announcements:<\/strong> what, if anything, should a screen reader say when content updates?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Recording this in your <a href=\"https:\/\/www.originux.com\/services\/design-systems-component-libraries\">design system and component library<\/a> means each accessible pattern is designed, built and tested once, then reused everywhere. Established patterns, such as the WAI-ARIA Authoring Practices Guide, give you proven keyboard and ARIA behavior to reference instead of inventing your own.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_ARIA_Mistakes\"><\/span>Common ARIA Mistakes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using ARIA when a native element would do,<\/strong> such as role=&#8221;button&#8221; on a div<\/li>\n\n\n\n<li><strong>Adding ARIA without keyboard support,<\/strong> since ARIA never adds behavior<\/li>\n\n\n\n<li><strong>Redundant or conflicting roles,<\/strong> such as role=&#8221;button&#8221; on a link that navigates<\/li>\n\n\n\n<li><strong>aria-label that differs from visible text,<\/strong> breaking speech control<\/li>\n\n\n\n<li><strong>aria-hidden on focusable elements<\/strong><\/li>\n\n\n\n<li><strong>States that never update,<\/strong> leaving aria-expanded stuck on \u201cfalse\u201d<\/li>\n\n\n\n<li><strong>Overusing aria-live,<\/strong> creating constant interruptions<\/li>\n\n\n\n<li><strong>Putting aria-label on non-interactive elements,<\/strong> where many screen readers ignore it<\/li>\n\n\n\n<li><strong>Inventing custom patterns<\/strong> instead of following established ones<\/li>\n\n\n\n<li><strong>Treating ARIA as a final-stage patch<\/strong> instead of designing accessible components from the start<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Test_ARIA\"><\/span>How to Test ARIA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Run automated checks<\/strong> with tools such as axe or Lighthouse to catch invalid roles and missing names.<\/li>\n\n\n\n<li><strong>Inspect the accessibility tree<\/strong> in browser developer tools to see what assistive technology actually receives.<\/li>\n\n\n\n<li><strong>Test with real screen readers:<\/strong> NVDA, JAWS, VoiceOver and TalkBack can behave differently.<\/li>\n\n\n\n<li><strong>Navigate with the keyboard only,<\/strong> checking that states and focus match what is announced.<\/li>\n\n\n\n<li><strong>Include assistive technology users<\/strong> in research. A structured approach to <a href=\"https:\/\/www.originux.com\/services\/usability-testing-feedback-loops\">usability testing and feedback loops<\/a> makes this a regular practice.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Quick_Checklist\"><\/span>A Quick Checklist<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is there a native element that could replace the custom component?<\/li>\n\n\n\n<li>Does every interactive element have a clear accessible name?<\/li>\n\n\n\n<li>Do states such as expanded, selected and invalid update in sync with the visuals?<\/li>\n\n\n\n<li>Is keyboard support and focus management designed alongside the ARIA?<\/li>\n\n\n\n<li>Are live regions used sparingly and only for meaningful updates?<\/li>\n\n\n\n<li>Has it been tested with a screen reader and real users?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bringing_It_All_Together\"><\/span>Bringing It All Together<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">ARIA is a powerful tool, but a sharp one. For designers, the essentials are simple: prefer native elements, give every control a name, keep states honest and specify behavior in handoff. You do not need to memorize every attribute. You need to know when a pattern is custom enough to need extra care, and to bring that up early.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pick one custom component in your product this week, such as a dropdown, tab set or modal, and write down its role, states, keyboard behavior and announcements. If you cannot, you have found a spec gap worth closing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want help designing accessible, consistent products, work with a trusted <a href=\"https:\/\/www.originux.com\/\">UI UX design company in Bangalore<\/a> that can help you design, test and refine experiences that work for every user.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Designers rarely think about ARIA until an accessibility audit lands on their desk with a line like \u201ccustom dropdown missing role and state.\u201d At that point, the fix often means rebuilding a component that looked perfect in the design file. ARIA does not have to be a developer-only mystery. A little knowledge helps designers make&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\">Continue reading <span class=\"screen-reader-text\">ARIA Basics for Designers: A Practical Guide for UX Teams<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7156","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ARIA Basics for Designers: A Practical Guide for UX Teams<\/title>\n<meta name=\"description\" content=\"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ARIA Basics for Designers: A Practical Guide for UX Teams\" \/>\n<meta property=\"og:description\" content=\"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-05T05:43:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-05T05:43:46+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"ARIA Basics for Designers: A Practical Guide for UX Teams\",\"datePublished\":\"2026-11-05T05:43:44+00:00\",\"dateModified\":\"2026-11-05T05:43:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\"},\"wordCount\":1614,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\",\"name\":\"ARIA Basics for Designers: A Practical Guide for UX Teams\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-05T05:43:44+00:00\",\"dateModified\":\"2026-11-05T05:43:46+00:00\",\"description\":\"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ARIA Basics for Designers: A Practical Guide for UX Teams\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ARIA Basics for Designers: A Practical Guide for UX Teams","description":"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/","og_locale":"en_US","og_type":"article","og_title":"ARIA Basics for Designers: A Practical Guide for UX Teams","og_description":"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.","og_url":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-05T05:43:44+00:00","article_modified_time":"2026-11-05T05:43:46+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"ARIA Basics for Designers: A Practical Guide for UX Teams","datePublished":"2026-11-05T05:43:44+00:00","dateModified":"2026-11-05T05:43:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/"},"wordCount":1614,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/","url":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/","name":"ARIA Basics for Designers: A Practical Guide for UX Teams","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-05T05:43:44+00:00","dateModified":"2026-11-05T05:43:46+00:00","description":"Learn ARIA basics for designers: what roles, states and properties are, when to use ARIA, how to spec accessible components in handoff, and the most common ARIA mistakes.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/aria-basics-for-designers-a-practical-guide-for-ux-teams\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"ARIA Basics for Designers: A Practical Guide for UX Teams"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=7156"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7156\/revisions"}],"predecessor-version":[{"id":7157,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7156\/revisions\/7157"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=7156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=7156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=7156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}