Accessibility Breakdown | Focusable Indicators
Tags: a11y, accessibledevelopment, webdev
Published: 2024-06-05 17:00:00

Todays mini series of things you can do <mark>**right now**</mark> focuses on enhancing the accessibility (a11y) of focusable indicators in your application. Let's get into it:

## Why it Matters:
- **Accessibility Impact**: Clear focus indicators are crucial for users with disabilities to navigate effectively, ensuring they can identify interactive elements.
- **User Experience**: Proper focus indicators prevent confusion and empower users to interact with your application confidently.

---

## Quick Check:

- **Manual Scan**: Quickly review your application for interactive elements that may lack visible focus indicators using **tab navigation**.  You may use Enter or Spacebar to activate buttons or links.
- **Automated Tools**: Use accessibility testing tools such as [Axe](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero) or [WAVE](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) to identify elements with missing or inadequate focus indicators. 
- **Screen Reader**: Sometimes a screen reader might use different keys to activate focusable elements so ensure you check using both with and without a screen reader.

---

## Quick Fixes:

- **Enhance Focus Styles**: Ensure interactive elements have clear and distinct focus styles, making them visible and easy to identify. Typically this involves adding a solid color outline or changing the background color of the element. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppjljdxi2oww4zoycimg.png)
  - Avoid disabling the default focus ring provided by browsers unless you replace it with an equally visible alternative. This is particularly important for keyboard users.
  - Ensure that all focusable elements have consistent focus styles across the application to maintain a uniform user experience
  - For low vision or color-blind users ensure a **highly** visible focus indicator, such as a thick outline or contrasting color is used so there is no confusion.

- **Focus Management**: Implement proper focus management to ensure that focus moves logically through focusable elements, enhancing keyboard navigation. An example would be when a user clicks a button that opens a modal ensuring that the focus moves into the modal dialog and on close of the modal moves back to the button.

```react
const openModalButton = document.getElementById('openModalButton');
const closeModalButton = document.getElementById('closeModalButton');
const modal = document.getElementById('modal');

openModalButton.addEventListener('click', () => {
    modal.style.display = 'block';
    modal.setAttribute('tabindex', '-1');
    modal.focus();
});

closeModalButton.addEventListener('click', () => {
    modal.style.display = 'none';
    openModalButton.focus();
});
```

---
## Testing
- Thoroughly test your application post-fix, using both keyboard navigation and assistive technologies like screen readers, to ensure focus indicators are visible and functional.
- Consider writing automated tests with Axe to automatically check for focus indicators as a custom rule.

```react
const customRule = `
            axe.configure({
                checks: [
                    {
                        id: 'focus-visible',
                        evaluate: function(node) {
                            const style = window.getComputedStyle(node);
                            return style.outlineStyle !== 'none' || style.boxShadow !== 'none';
                        },
                        metadata: {
                            impact: 'critical',
                            messages: {
                                fail: 'Focusable elements should have visible focus styles.'
                            }
                        }
                    }
                ],
                rules: [
                    {
                        id: 'focus-indicator',
                        selector: ':focus',
                        enabled: true,
                        any: ['focus-visible'],
                        tags: ['focus']
                    }
                ]
            });
        `;

```


By following these quick steps, you can quickly enhance the accessibility of focusable indicators in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today!🌟

---

**Helpful links** 
Free A11y tools:

- [NVDA Screen Reader
](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj7uqDNm_D6AhUiEFkFHfvrB9QQFnoECBYQAQ&url=https%3A%2F%2Fwww.nvaccess.org%2Fdownload%2F&usg=AOvVaw3AAc5nrFrg0lylpULGjjxr)
- [Axe DevTools Chrome Extension](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
- [WAVE Browser Chrome Extension
](https://wave.webaim.org/extension/)
- [Web Developer Chrome Extension](https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
- [ANDI Accessibility Testing Tool
](https://www.ssa.gov/accessibility/andi/help/install.html)

A11y Info:

- [WCAG Standard Guidelines
](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [A11y Project
](https://www.a11yproject.com/)