Top 10 Practices to make your app accessible

Early in my career, I thought accessibility was simple. I believed it was only for people with disabilities and that it mostly happened automatically. My understanding was basically:

Add alt text to images <img/> tags and you're done!

But now, as a more experienced software engineer, I see accessibility differently. First of all, accessibility is for everybody. When a user wants to submit a form, they should be able to press the Enter key instead of hunting for the submit button. Accessibility isn’t just about compliance; it’s about creating seamless, enjoyable experiences for everyone.

Accessibility is not just about adding a few lines of code. It's a fundamental part of software development and an architectural decision we must make while developing a simple button or Table on the app.

My Top 10 Accessibility Practices

Here are my top 10 accessibility practices that I implement in every app I build:

1. Use Semantic Elements
Use proper HTML5 semantic elements like <header>, <nav>, <article>, <button>, <footer>. These elements provide context to screen readers and improve navigation for users.

<header>
    <h1>App Title</h1>
</header>
<nav>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>
<article>
    <p>This is the main content.</p>
</article>

2. Add Keyboard Controls
Ensure users can navigate your app using just the keyboard. For example, they should be able to move between pages or features using Tab, Arrow keys, or other intuitive keyboard shortcuts.

document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight') {
        moveToNextTab();
    } else if (event.key === 'ArrowLeft') {
        moveToPreviousTab();
    }
});

function moveToNextTab() {
    // Logic to focus the next tab
}

function moveToPreviousTab() {
    // Logic to focus the previous tab
}

3. Use ARIA Labels Wisely
Add ARIA (aria-label, aria-labelledby, etc.) attributes to elements when necessary, but don’t overuse them. Prefer semantic HTML first.

<button aria-label="Close Modal">X</button>

4. Add alt Attributes to Images
Every <img> element should have an alt attribute that describes the image—or use alt="" for decorative images.

<img src="profile.jpg" alt="User Profile Picture" />
<img src="decorative-line.png" alt="" />

5. Enable Table Navigation with Keyboard
For <table> elements, ensure users can navigate rows and columns using the Arrow keys.

const table = document.querySelector('table');
table.addEventListener('keydown', (event) => {
    const currentCell = document.activeElement;
    if (event.key === 'ArrowDown') {
        moveFocus(currentCell, 'down');
    } else if (event.key === 'ArrowUp') {
        moveFocus(currentCell, 'up');
    }
});

function moveFocus(cell, direction) {
    // Logic to shift focus to the appropriate cell
}

6. Manage Focus Effectively
Decide where the focus should land when a page loads or a modal opens. For example, when you open any editable app the focus first should go to the editor.

function openModal() {
    const modal = document.querySelector('#modal');
    modal.style.display = 'block';
    modal.querySelector('input').focus(); // Focus on the first input field
}

7. Keyboard Controls for Media
Implement keyboard controls for play/pause, volume adjustments, and seeking forward or backward.

const video = document.querySelector('video');
document.addEventListener('keydown', (event) => {
    if (event.key === ' ') {
        video.paused ? video.play() : video.pause();
    } else if (event.key === 'ArrowRight') {
        video.currentTime += 5; // Seek forward 5 seconds
    } else if (event.key === 'ArrowLeft') {
        video.currentTime -= 5; // Seek backward 5 seconds
    }
});

8. Accessible Forms
Ensure labels are associated with their inputs and provide helpful error messages or use autoComplete attribute of input element so that user doesn't have to type everything.

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required />
    <span class="error" id="username-error" aria-live="polite"></span>
</form>

9. Color Contrast Matters
Maintain a high color contrast ratio between text and background.

body {
    background-color: #ffffff;
    color: #000000;
}

.button {
    background-color: #007bff;
    color: #ffffff;
}

10. Create a Design System
When you start working on building an app, every time you can't think every time about accessibility you should build accessible atomic components once and reuse them.

function AccessibleButton({ label, onClick }) {
    return (
        <button onClick={onClick} aria-label={label}>
            {label}
        </button>
    );
}

Final Thoughts

Accessibility is not an afterthought. It’s a mindset that should be embedded in your development process from the start. By making these practices a part of your workflow, you’ll create apps that are not only functional but also inclusive and user-friendly.