Unlocking Accessibility: Frontend developers discuss semantic HTML and accessible code

The Foundation of Inclusive Architecture: Semantic HTML

At the heart of the technical discussion is the concept of semantic HTML—the practice of using web markup that conveys meaning rather than merely defining appearance. Dilwoar Hussain, Lead Frontend Developer at the Ministry of Housing, Communities and Local Government, emphasizes that HTML provides the structural building blocks for the web. While generic elements like <div> and <span> are visually versatile, they provide no information to assistive technologies. In contrast, semantic elements like <nav>, <main>, and <button> inform the browser and screen readers exactly what a piece of content represents.

James Gordon, Senior Frontend Developer at the DWP, highlights a common pitfall in modern web development: the "pseudo-link." Gordon notes that developers often use images or generic text combined with JavaScript click events to mimic the behavior of a link. While this may function for sighted users, it remains invisible or confusing to screen readers. By using the semantic <a> tag, developers ensure that the browser handles focus management and provides the correct role to assistive technology by default.

The consensus among the experts is that semantic HTML provides "accessibility for free." Michael Cheung, Senior Front-end Developer at NHS England, argues that using the right elements for their intended purpose—such as <header> and <footer>—creates a predictable environment for speech recognition software and keyboard-only users. This approach reduces the need for complex, often fragile, custom code and ensures that websites remain functional even as browsers and assistive devices evolve.

A Chronology of Accessibility Standards in the UK Public Sector

The push for enhanced semantic clarity is not merely a stylistic preference but a response to a rigorous regulatory environment. The timeline of web accessibility in the UK public sector has been defined by several key milestones:

  1. 2010: The Equality Act: Established the legal basis for preventing discrimination, requiring service providers to make "reasonable adjustments" for persons with disabilities.
  2. 2018: Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations: Mandated that all public sector websites and mobile apps must meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA standard.
  3. 2023-2024: Transition to WCAG 2.2: The introduction of new criteria focusing on cognitive disabilities and mobile navigation, forcing frontend teams to rethink interactive elements.
  4. 2025: The "Unlocking Accessibility" Series: A cross-departmental effort to move beyond mere compliance toward a "best-practice" culture where accessibility is integrated into the initial lines of code.

This chronology illustrates a shift from reactive fixes to a proactive, design-system-led approach. By utilizing the GOV.UK and NHS Design Systems, developers are now starting with components that have already undergone rigorous accessibility testing, significantly reducing the "accessibility debt" that often plagues large-scale digital transformations.

Data-Driven Justification for Accessible Frontend Development

The importance of these discussions is underscored by global and national data. According to the "WebAIM Million" report—an annual accessibility analysis of the top one million homepages—95.9% of homepages had detectable WCAG 2 failures in 2024. The most common issues included low-contrast text (71.3%), missing alt text for images (54.5%), and empty links (44.6%).

In the UK context, the Cabinet Office reported that nearly one in five people have a disability that limits their daily activities. Furthermore, the "digital divide" is often exacerbated for this demographic; when government services like Universal Credit or NHS appointments move primarily online, any failure in semantic HTML becomes a barrier to essential rights. By adhering to the standards discussed by the DWP and NHS developers, the public sector aims to mitigate the risk of digital exclusion, which can lead to increased costs in offline support channels and potential legal challenges.

Shifting Left: Integrating Accessibility from the Start

A recurring theme among the developers is the rejection of accessibility as a "final check" or a plugin-based solution. Holly Blues, a Front-end Developer at DWP Digital, advocates for a team-wide responsibility model. This involves Product Owners, Designers, and Quality Assurance (QA) specialists considering accessibility before a single line of code is written.

David Biddle, Frontend Developer at Government Digital Services, suggests that thinking about the "accessibility tree"—the internal representation of the web page that browsers provide to screen readers—is essential during the markup phase. By ensuring interactive elements are focusable by default and that the Document Object Model (DOM) follows a logical hierarchy, developers can avoid the need for "ARIALB" (the over-reliance on Accessible Rich Internet Applications attributes to fix broken HTML).

Unlocking Accessibility: Frontend developers discuss semantic HTML and accessible code

The panel emphasizes that while tools like automated scanners (e.g., Axe or Lighthouse) are useful, they can only detect approximately 30-40% of accessibility issues. Manual testing, particularly keyboard navigation and screen reader testing, remains the gold standard. Michael Cheung notes that NHS England utilizes a dedicated Accessibility Lab, featuring a range of devices and assistive technologies, to validate that code works in real-world scenarios.

Technical Management of Dynamic and Interactive Content

The most complex challenge for modern frontend developers is making dynamic content—such as modals, carousels, and accordions—accessible. These elements often change state without a page reload, which can be disorienting for users who cannot see the visual changes.

Dilwoar Hussain explains the use of the aria-expanded attribute for collapsible elements. When a user toggles an accordion, the attribute must programmatically switch between "true" and "false," signaling to the screen reader that content has appeared or vanished. Furthermore, Hussain highlights the principle of "progressive enhancement." This technique ensures that if JavaScript fails to load, the core content of the accordion remains visible, ensuring that the user is never locked out of information due to technical failure.

For modal dialogs, David Biddle points to the native <dialog> element as a superior alternative to custom-built pop-ups. Native elements provide built-in focus trapping—preventing a user from accidentally tabbing to content "behind" the modal—and handle the "Escape" key functionality automatically. This reliance on native browser behavior is a key strategy for reducing the complexity and increasing the reliability of accessible code.

Broader Impact and Policy Implications

The collaborative efforts of these government departments have implications that extend far beyond the public sector. By championing semantic HTML and accessible design patterns, the UK government is setting a benchmark for the private sector and the global tech community. The GOV.UK Design System is frequently cited internationally as a model for inclusive digital architecture.

From a policy perspective, the emphasis on accessible code reduces long-term maintenance costs. Websites built with semantic HTML are easier to update, perform better in search engine rankings (SEO), and are more resilient to the introduction of new browsing technologies, such as voice-activated assistants and AI-driven web parsers.

The "Unlocking Accessibility" initiative also highlights a shift in the labor market. There is an increasing demand for "accessibility-literate" frontend developers. As government departments continue to share their findings and methodologies, they are effectively training a generation of developers who view accessibility not as a burdensome requirement, but as a hallmark of professional excellence.

Conclusion: The Path Forward for Digital Inclusion

The insights provided by Hussain, Gordon, Cheung, Blues, and Biddle underscore a fundamental truth of the digital age: code is never "just code"—it is a gateway to participation in modern society. As the UK government continues to refine its digital services, the focus remains on simplicity, robustness, and the universal power of semantic HTML.

The GDS has encouraged other developers and stakeholders to contribute to this ongoing dialogue. By fostering a community of practice that spans multiple departments, the UK public sector is building a digital infrastructure that is not only technologically advanced but fundamentally human-centric. The move toward a more accessible web is a continuous journey of testing, learning, and refining, ensuring that as technology moves forward, no citizen is left behind.

Leave a Reply

Your email address will not be published. Required fields are marked *