Unlocking Accessibility Frontend Developers Discuss Semantic HTML and Accessible Code

The UK Government Digital Service (GDS) has released the latest installment of its "Unlocking Accessibility" series, providing an in-depth look at how frontend developers across various departments prioritize inclusive design. In an era where digital services are the primary point of contact between the state and its citizens, the technical implementation of web standards has moved from a niche concern to a central pillar of public service delivery. The discussion, featuring experts from the Ministry of Housing, Communities and Local Government (MHCLG), the Department for Work and Pensions (DWP), and NHS England, highlights a growing consensus: accessibility is not an "add-on" feature but a fundamental requirement of modern software engineering.

The primary focus of this technical exchange centered on three critical areas: the structural integrity of semantic HTML, the methodology of integrating accessibility into the earliest stages of development, and the complex engineering required to make dynamic, interactive content—such as modals and accordions—usable for those relying on assistive technologies.

The Strategic Role of Semantic HTML in Digital Infrastructure

At the heart of the discussion was the concept of "semantic HTML," the practice of using web elements according to their intended meaning rather than their visual appearance. Dilwoar Hussain, Lead Frontend Developer at the Ministry of Housing, Communities and Local Government, explained that HTML provides specific building blocks that act as signals for computers and screen readers. While generic elements like <div> and <span> offer no information about their content, semantic tags such as <nav>, <button>, and <main> provide a roadmap for assistive software.

James Gordon, a Senior Frontend Developer at the Department for Work and Pensions, illustrated the risks of ignoring these standards. He noted that developers often create "pseudo-links" by attaching JavaScript click events to images. While these may look and act like links for sighted users, they remain invisible or confusing to screen reader users unless significant ARIA (Accessible Rich Internet Applications) attributes are manually added. "The issue with not using semantic HTML is you can’t be 100% sure the assistive tech… is going to interpret your code as intended," Gordon stated.

This perspective is supported by broader industry data. According to the 2024 "WebAIM Million" report, which analyzes the accessibility of the top one million websites, 95.9% of home pages had detectable WCAG 2 failures. A significant portion of these errors stems from improper heading structures and button labeling—issues that are natively resolved through the diligent use of semantic HTML.

Chronology of Accessibility Standards in the UK Public Sector

The emphasis on accessible code is not a recent trend but the result of a multi-year shift in legislative and technical frameworks. The timeline of this evolution provides context for the current standards discussed by the developers:

  • 2011: The launch of the GOV.UK alpha, which pioneered the "Design Principles" that prioritize user needs over institutional requirements.
  • 2018: The introduction of the "Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations," which mandated that all public sector websites meet WCAG 2.1 AA standards.
  • 2021: The widespread adoption of the GOV.UK Design System across central and local government, providing a library of pre-tested, accessible components.
  • 2023-2024: The transition toward WCAG 2.2 standards, which include new criteria for focus appearance, target size, and redundant entry.

Michael Cheung, Senior Front-end Developer at NHS England, emphasized that using semantic HTML provides "accessibility for free." By adhering to the specifications laid out by the World Wide Web Consortium (W3C), developers ensure that the browser handles much of the heavy lifting regarding keyboard focus and screen reader announcements.

Shifting Left: Integrating Accessibility into the Development Lifecycle

A recurring theme among the developers was the "shift-left" approach—a strategy in software development where testing and quality assurance occur earlier in the lifecycle. Rather than building a feature and then auditing it for accessibility, the experts argued for a process where inclusivity is considered during the initial design phase.

Holly Blues, a Front-end Developer at DWP Digital, noted that accessibility is a shared responsibility across the entire team, from Product Owners to Quality Assurance testers. This collaborative environment ensures that potential barriers are identified before a single line of code is written. The team relies heavily on the Government Design System, which provides a consistent user journey across services.

To ensure code remains accessible without an over-reliance on third-party plugins, David Biddle of GDS suggested focusing on the "accessibility tree"—the subset of the browser’s DOM (Document Object Model) that is exposed to assistive technologies. By checking how a page is rendered in the accessibility tree via browser DevTools, developers can see exactly what a screen reader user will experience. This method, combined with manual keyboard testing and zooming (up to 400%), allows for a robust internal audit without the need for expensive proprietary software.

Unlocking Accessibility: Frontend developers discuss semantic HTML and accessible code

Technical Analysis of Dynamic Content and Interactivity

As web applications become more complex, the challenge of maintaining accessibility in dynamic environments grows. Features like modals, carousels, and live-updating forms often "wrestle control" away from the user, as James Gordon described it.

Dilwoar Hussain highlighted the use of "progressive enhancement" as a solution. This development technique ensures that the core functionality of a website works for everyone, regardless of their browser’s capabilities or whether JavaScript is enabled. For example, a collapsible accordion should display all its content by default; JavaScript then enhances this by hiding the content and adding a toggle button for users whose browsers support it. This ensures that if a script fails to load, the information remains reachable.

For more complex interactive elements, David Biddle recommended the use of the native HTML <dialog> element for modals. Unlike custom-built "pop-ups," the <dialog> element includes built-in focus management, meaning the user’s keyboard focus is automatically trapped within the modal until it is closed—a critical requirement for WCAG compliance.

The use of ARIA attributes remains a vital tool for dynamic content. Hussain explained the importance of aria-expanded="true/false" for dropdowns and accordions. These attributes provide real-time feedback to screen readers, announcing whether a section is open or closed. Without these signals, a non-sighted user might click a button and have no way of knowing that new content has appeared elsewhere on the page.

Data-Driven Impact and Broader Implications

The commitment to accessible code in the public sector has profound implications for the UK population. According to the Department for Work and Pensions, there are approximately 16 million people in the UK living with a disability. As government services—from tax filing to health records—become "digital by default," any lack of accessibility constitutes a barrier to essential rights and services.

The economic argument for built-in accessibility is equally compelling. Research by the Nielsen Norman Group suggests that fixing an accessibility bug during the design phase is up to 100 times cheaper than fixing it after the product has been launched. By utilizing the semantic standards discussed by the frontend developers, government departments reduce the long-term "technical debt" associated with retrofitting inaccessible systems.

Furthermore, the influence of the UK’s government accessibility standards extends beyond its borders. The GOV.UK Design System is frequently cited as a global gold standard, with its components being adapted by other nations and private sector organizations. Michael Cheung noted that when a component is not available in the NHS design system, he often looks to other government departments or the WAI-ARIA Authoring Practices Guide for inspiration, illustrating a culture of cross-departmental knowledge sharing.

Institutional Responses and Future Outlook

The consensus among the developers suggests that the future of frontend engineering in the public sector will be defined by a "back-to-basics" movement—prioritizing lean, semantic code over bloated, JavaScript-heavy frameworks. This approach not only aids those with permanent disabilities but also improves the experience for users with temporary impairments (such as a broken arm) or situational limitations (such as using a screen in bright sunlight).

Official responses from the participating departments underscore a commitment to continuous improvement. The NHS Accessibility Lab, managed in part by Michael Cheung, serves as a testing ground where developers can observe how their code interacts with a wide range of assistive devices in real-world scenarios. This empirical approach ensures that "accessible code" is not just a theoretical checkbox but a functional reality for the user.

As the "Unlocking Accessibility" series continues, the focus remains on demystifying the technical requirements of the law and fostering a community of practice. By centering the conversation on semantic HTML and early-stage testing, the UK government aims to maintain its position as a leader in inclusive digital service delivery, ensuring that the digital state remains open to every citizen, regardless of how they access the web.

Leave a Reply

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