{"id":11119,"date":"2025-11-13T19:45:28","date_gmt":"2025-11-13T19:45:28","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=11119"},"modified":"2025-11-13T19:45:28","modified_gmt":"2025-11-13T19:45:28","slug":"building-accessible-components-with-vanilla-javascript-2","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/building-accessible-components-with-vanilla-javascript-2\/","title":{"rendered":"Building Accessible Components with Vanilla JavaScript"},"content":{"rendered":"

Building Accessible Components with Vanilla JavaScript<\/h1>\n

Accessibility is a cornerstone of modern web development. Every user deserves equitable access to online content, regardless of their abilities or disabilities. In this blog post, we’ll explore how to build accessible components using vanilla JavaScript<\/strong>. We’ll cover essential practices, techniques, and examples to ensure your web applications are inclusive for all users.<\/p>\n

Why Accessibility Matters<\/h2>\n

According to the World Health Organization, over 1 billion people experience some form of disability. Web accessibility ensures that the digital world is navigable for everyone, including those with disabilities such as visual impairments, hearing loss, and motor challenges. Building accessible web components not only fulfills legal requirements in many regions but also enhances your project’s reach and usability.<\/p>\n

Understanding ARIA Roles and Attributes<\/h2>\n

Accessible Rich Internet Applications (ARIA)<\/strong> provides a set of attributes that can be added to HTML to improve accessibility. While semantic HTML elements like <button><\/code> and <form><\/code> already convey their purpose to assistive technologies, ARIA roles and attributes help clarify more complex components.<\/p>\n

For instance, if you’re creating a custom dropdown menu, you can use ARIA attributes to convey its structure and behavior:<\/p>\n

<div role=\"combobox\" aria-expanded=\"false\">\n  <input type=\"text\" aria-autocomplete=\"list\" aria-haspopup=\"true\" \/>\n  <div role=\"listbox\">\n    <div role=\"option\">Option 1<\/div>\n    <div role=\"option\">Option 2<\/div>\n    <div role=\"option\">Option 3<\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n
Creating an Accessible Button Component<\/h2>\n
Let’s start with a simple yet essential UI component: a button. While we could use the <button><\/code> element directly, we can create a stylized button using a <div><\/code> or <a><\/code> element while maintaining accessibility via JavaScript.<\/p>\n
HTML Structure<\/h3>\n
<div id=\"myButton\" tabindex=\"0\" role=\"button\" aria-pressed=\"false\">\n  Click Me!\n<\/div><\/code><\/pre>\n
JavaScript Implementation<\/h3>\n
const button = document.getElementById('myButton');\n\nbutton.addEventListener('click', () => {\n  const pressed = button.getAttribute('aria-pressed') === 'true';\n  button.setAttribute('aria-pressed', !pressed);\n});\n\nbutton.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    button.click();\n    e.preventDefault();\n  }\n});<\/code><\/pre>\n
In this example, we’ve created a non-button element that behaves like a button. We’ve set attributes to convey its role and state. The use of tabindex=\"0\"<\/code> allows it to be focusable, which is essential for keyboard navigation.<\/p>\n
Building an Accessible Modal<\/h2>\n
Modals are another common component in web applications. It’s crucial to ensure they are accessible to users who rely on keyboard navigation and screen readers.<\/p>\n
HTML Structure<\/h3>\n
<div id=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\" style=\"display:none\">\n  <h2 id=\"modalTitle\">Modal Title<\/h2>\n  <p>This is an accessible modal window.<\/p>\n  <button id=\"closeModal\">Close<\/button>\n<\/div><\/code><\/pre>\n
JavaScript to Control the Modal<\/h3>\n
const modal = document.getElementById('modal');\nconst closeModal = document.getElementById('closeModal');\n\nfunction openModal() {\n  modal.style.display = 'block';\n  modal.setAttribute('aria-hidden', 'false');\n  closeModal.focus(); \/\/ Move focus to close button\n}\n\nfunction closeModalFunction() {\n  modal.style.display = 'none';\n  modal.setAttribute('aria-hidden', 'true');\n  document.getElementById('openModalButton').focus(); \/\/ Return focus to the trigger\n}\n\ncloseModal.addEventListener('click', closeModalFunction);\n\n\/\/ Close modal on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && modal.style.display === 'block') {\n    closeModalFunction();\n  }\n});<\/code><\/pre>\n
Focus Management<\/h2>\n
One crucial aspect of accessible components is managing focus. When a modal opens, focus should be shifted to an element inside the modal. Conversely, when the modal closes, focus should return to the element that triggered it. This is essential for keyboard users, as it allows them to continue navigating the application intuitively.<\/p>\n
Creating an Accessible Tab Component<\/h2>\n
Tab navigation is a common interface pattern, allowing users to navigate through sections of content without leaving the page. Here\u2019s how to implement an accessible tab component using vanilla JavaScript.<\/p>\n
HTML Structure<\/h3>\n
<div role=\"tablist\">\n  <div role=\"tab\" aria-selected=\"true\" tabindex=\"0\">Tab 1<\/div>\n  <div role=\"tab\" tabindex=\"0\">Tab 2<\/div>\n  <div role=\"tab\" tabindex=\"0\">Tab 3<\/div>\n<\/div>\n<div role=\"tabpanel\">\n  <p>Content for Tab 1<\/p>\n<\/div><\/code><\/pre>\n
JavaScript Implementation<\/h3>\n
const tabs = document.querySelectorAll('[role=\"tab\"]');\nconst panels = document.querySelectorAll('[role=\"tabpanel\"]');\n\ntabs.forEach(tab => {\n  tab.addEventListener('click', (e) => {\n    tabs.forEach(t => t.setAttribute('aria-selected', 'false'));\n    tab.setAttribute('aria-selected', 'true');\n    \n    panels.forEach(panel => panel.hidden = true);\n    const index = Array.from(tabs).indexOf(tab);\n    panels[index].hidden = false;\n  });\n\n  tab.addEventListener('keydown', (e) => {\n    if (e.key === 'ArrowRight') {\n      const nextTab = tab.nextElementSibling || tabs[0];\n      nextTab.focus();\n      nextTab.click();\n    } else if (e.key === 'ArrowLeft') {\n      const prevTab = tab.previousElementSibling || tabs[tabs.length - 1];\n      prevTab.focus();\n      prevTab.click();\n    }\n  });\n});<\/code><\/pre>\n
Form Elements and Accessibility<\/h2>\n
Forms are critical in web applications, and properly labeling elements is vital for screen readers. Always include explicit labels and announcements for input states.<\/p>\n
Example Form Component<\/h3>\n
<form aria-labelledby=\"formTitle\">\n  <h2 id=\"formTitle\">Contact Us<\/h2>\n  <label for=\"name\">Name:<\/label>\n  <input type=\"text\" id=\"name\" required \/>\n\n  <label for=\"email\">Email:<\/label>\n  <input type=\"email\" id=\"email\" required \/>\n\n  <button type=\"submit\">Send<\/button>\n<\/form><\/code><\/pre>\n
Live Feedback<\/h3>\n
Providing real-time feedback for form inputs is also vital. Here\u2019s how to do it:<\/p>\n
const form = document.querySelector('form');\nconst emailInput = document.getElementById('email');\n\nemailInput.addEventListener('input', () => {\n  const message = emailInput.validity.valid ? 'Valid email!' : 'Invalid email, please correct it.';\n  emailInput.setAttribute('aria-describedby', 'emailFeedback');\n  document.getElementById('emailFeedback').textContent = message;\n});<\/code><\/pre>\n
Best Practices for Building Accessible Components<\/h2>\n