Making the Web Inclusive: Improving Accessibility in PPS-GrupoB

Building accessible web interfaces is often treated as an afterthought, but in the PPS-GrupoB project, we decided that making our components usable for everyone was a core requirement. Accessibility isn't just about compliance; it is about ensuring that every user, regardless of their physical or situational ability, can interact with our application effectively.

The Accessibility Gap

We realized that our existing UI components were lacking the semantic structure and focus indicators necessary for keyboard navigation and screen reader support. Navigating through our forms and interactive elements felt disjointed, which is a significant barrier for users relying on assistive technologies.

Implementing Accessible CSS

To bridge this gap, we focused on refining our CSS to better support standard interaction patterns. One of the most impactful changes involved strengthening our focus states and ensuring high-contrast visibility for interactive elements.

By replacing default, often invisible browser focus rings with clear, accessible indicators, we significantly improved navigation flow. Here is a generic example of how we standardized focus interactions across our components:

/* Standardizing accessible focus states */
button:focus, 
a:focus, 
input:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

/* Removing default outline only when focus is visible */
:focus:not(:focus-visible) {
  outline: none;
}

Why Semantics Matter

Beyond visual indicators, we audited our components to ensure that visual hierarchy matched our DOM structure. Accessibility is not just about colors; it is about ensuring the browser correctly communicates the role of each element to assistive software. When CSS is used to override native component behaviors, we inadvertently break the experience for users who depend on browser-native accessibility features.

The Takeaway

Accessibility is an ongoing process of refining how we style and structure our interfaces. To start improving your own project today, perform a keyboard-only audit: unplug your mouse and try to complete your app's core user journey. If you find yourself lost or unable to trigger an action, that is your primary focus area for the next sprint.

Generated with Gitvlg.com