Accessibility Breakdown | Focusable Indicators

Todays mini series of things you can do right now 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 or WAVE 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.
  

  • 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.
  
  

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.

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
• Axe DevTools Chrome Extension
• WAVE Browser Chrome Extension
• Web Developer Chrome Extension
• ANDI Accessibility Testing Tool

A11y Info:

• WCAG Standard Guidelines
• A11y Project