
Scaling web accessibility: Inclusive learning by design
How Resolute built an accessible and scalable learning platform through design systems and thoughtful front-end development.

When design slows you down
- An internal Figma library shaped by years of brand tweaks
- A partially customized theme inside Telerik ThemeBuilder
- A live site with Kendo UI components that didn’t always align with the designs
Fixing the foundation: ThemeBuilder in action
- Consolidating redundant button and form variations
- Fixing visual issues with contrast, spacing, and typography
- Helping the design team understand how to use ThemeBuilder effectively to support long-term accessibility
For a deeper look at how design systems drive efficiency and consistency across products, explore our whitepaper:
From visuals to code: accessibility in the build
- ADA (Americans with Disabilities Act): Particularly Title III, which applies to educational institutions and commercial websites
- Section 508 of the Rehabilitation Act: For platforms receiving federal funding or working with government entities
Global standards snapshot: Why “AA” is a moving target
WCAG 2.2 was released in late 2023 and introduced nine new success criteria, including Focus Appearance, Target Size (Minimum), and Accessible Authentication. These updates are especially relevant for interactive web applications and online learning platforms, where users engage with complex interfaces and controls.
In Europe, the European Accessibility Act (EAA) entered into force on 28 June 2025. It extends accessibility obligations to a wide range of digital products and services. These include e-learning tools and software platforms. The EAA references EN 301 549, a European standard that incorporates WCAG 2.1 and adds further technical requirements for software, electronic documents, and ICT products.
Organizations that operate globally or serve EU-based learners can benefit from aligning their accessibility strategies with WCAG 2.1 or 2.2. They can also map these to EN 301 549. This alignment not only ensures consistency and legal compliance but also reduces remediation costs as standards continue to advance.

What that looked like in code:
- Every interactive element was accessible via keyboard navigation (tab, arrows, etc.)
- Clear, visible focus states were implemented for all buttons, links, and forms.
- We structured the app using semantic HTML and applied ARIA roles for assistive tech (e.g., <button>, <nav>, <form>). Yet, we applied ARIA roles only when necessary for custom components or non-semantic elements, avoiding over-reliance on ARIA. It’s crucial to use ARIA only when native HTML elements can't provide the required functionality.
- For use cases beyond the default configurations of Kendo UI or ThemeBuilder, we wrote custom HTML overrides.
- Duplicate labels or screen reader confusion were avoided using attributes like aria-hidden="true" where needed.
When “out of the box” needs a little help
- Buttons built without the base component didn’t render properly
- Some forms displayed labels twice to screen readers (e.g., “Username Username”)
- Blazor components lacked alt-text bindings, requiring a workaround
When we started testing custom buttons, we realized some overrides had removed their built-in focus indicators. It’s a small detail, but it affects every customer who needs accessibility and keyboard support. My rule now is simple: if you customize a component, always test the change within the customer's full environment before touching anything else.”
Lessons learned: Building accessibility that lasts.
- Accessibility starts in design, not in QA.
- Fixing accessibility late in development is always more expensive and less effective. Embedding it in design systems and component libraries ensures compliance and usability scale together.
- Consistency is the foundation of accessibility.
- By unifying colors, typography, and UI patterns inside ThemeBuilder, we reduced design drift and minimized accessibility regressions across releases.
- Customization needs caution.
- Extending frameworks like Kendo UI can enable flexibility, but every override should be tested for semantic and keyboard behavior. A small deviation can undo much of the built-in accessibility.
- Human testing still matters.
- Automated tools catch a fraction of real issues. Manual checks by designers and QA testers using assistive tech (such as screen readers and keyboards) catch the nuances that automation misses.
- Accessibility is a shared language.
- The most successful outcomes come when UX designers, developers, and compliance officers speak the same language and document their accessibility decisions together.
Accessibility = Structure + Semantics + SEO
The front-end implementation included:
- One <h1> per page, with clean heading hierarchies for structure like <h2> for sections and <h3> inside components
- Alt-text for all meaningful images
- Descriptive link text and accessible navigation
Knowledge transfer matters
- Documenting all accessibility decisions and techniques used
- Providing reusable design patterns in ThemeBuilder
- Running training sessions on WCAG basics and development workflow tips
Final thoughts
Progress Telerik ThemeBuilder helped streamline and standardize the design-to-code process. Resolute helped connect the dots by aligning compliance, usability, and long-term scalability.
Looking to improve your product’s user experience?
Who it’s for
- Product teams that need a clear usability diagnosis before investing in redesign or replatforming.
- Enterprises with legacy systems seeking alignment with modern UX and accessibility standards such as WCAG and Section 508.
- Scale-ups and SaaS companies looking to improve retention and reduce support costs through better UX.
- Healthcare, education, and compliance-driven organizations where clarity, inclusivity, and legal adherence are critical.
How it works
- Define goals and scope during an initial discovery session.
- Conduct qualitative and quantitative user research.
- Analyze patterns and prioritize issues by user impact and business risk.
- Present actionable recommendations and design insights.
What you can expect
Whether you’re planning a redesign or simply want to make smarter product decisions, the UX Assessment is a practical first step.






