The Foundation of Inclusive Architecture: Semantic HTML
At the heart of the discussion is 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 MHCLG, noted that the web is constructed from two primary types of building blocks: generic elements, such as <div> and <span>, and semantic elements, such as <nav>, <main>, and <button>. While generic elements carry no inherent meaning, semantic tags provide a structural roadmap for assistive technologies.
According to the developers, the reliance on semantic HTML is the most effective way to ensure that screen readers and other assistive tools can navigate a page correctly. James Gordon, Senior Frontend Developer at the DWP, pointed out a common pitfall in modern web development: the "faux-link." He described scenarios where developers use images with JavaScript click events to mimic links. While these may appear functional to sighted users, they remain invisible or confusing to screen reader users unless significant additional code is added to describe their role. By contrast, using the native <a> tag ensures that the browser and the assistive device understand the element’s purpose without further intervention.
Supporting data suggests that this is not merely a theoretical concern. According to the 2024 WebAIM Million report, an annual accessibility analysis of the top one million homepages, 95.9% of pages had detectable WCAG 2 failures. The most common issues—low contrast text, missing alt text, and empty links—are frequently the result of ignoring semantic standards in favor of aesthetic or complex scripted solutions.
Chronology of Accessibility Standards in UK Digital Services
The focus on semantic integrity is part of a broader timeline of digital transformation within the UK government. Since the establishment of GDS in 2011, the UK has moved toward a centralized "Design System" that provides pre-tested, accessible components for all departments.
- 2011: Formation of GDS and the launch of the "Digital by Default" service standard.
- 2018: The Public Sector Bodies Accessibility Regulations come into force, requiring all public sector websites to meet WCAG 2.1 AA standards.
- 2021: The launch of the GOV.UK Design System, which institutionalized the use of semantic HTML across central government.
- 2024: The transition to WCAG 2.2 standards, which introduced new criteria regarding focus appearance and target sizes.
- 2025: The current "Unlocking Accessibility" series, focusing on deep-dive technical implementation for specific professional roles.
This progression reflects an evolving understanding of digital rights. Michael Cheung, Senior Front-end Developer at NHS England, emphasized that semantic HTML effectively provides "accessibility for free," leveraging the browser’s built-in capabilities to handle keyboard focus and screen reader announcements.
Methodology: Building for Accessibility from Inception
A recurring theme among the panel was the rejection of "accessibility overlays" or third-party plugins as a primary solution. Instead, the developers advocated for a workflow that integrates accessibility into the earliest stages of the development lifecycle.
Holly Blues, a Front-end Developer at DWP Digital, explained that their team treats accessibility as a shared responsibility involving Product Owners, Quality Assurance, and Developers. By utilizing the GOV.UK Design System, developers start with components that have already undergone rigorous accessibility testing. This reduces the risk of introducing barriers during the coding phase and ensures a consistent user journey across different government services.
The developers also detailed their use of "in-browser" testing tools rather than relying solely on automated checkers. Michael Cheung highlighted the importance of the "accessibility tree" within browser DevTools. The accessibility tree is a subset of the Document Object Model (DOM) that contains the information provided to assistive technologies. By inspecting this tree, developers can verify exactly what a screen reader will announce, ensuring that the visual layout matches the programmatic structure.
Technical Implementation of Dynamic Content
One of the most complex challenges in modern frontend development is making dynamic content—such as modals, carousels, and accordions—accessible to users who do not use a mouse. These elements often change the state of the page without a full reload, which can disorient screen reader users if not handled correctly.
Dilwoar Hussain detailed the use of ARIA (Accessible Rich Internet Applications) attributes to bridge the gap between static HTML and dynamic behavior. For collapsible elements like accordions, Hussain utilizes aria-expanded and aria-controls. The former informs the user whether a section is open or closed, while the latter creates a programmatic link between the toggle button and the content block it affects.
Furthermore, David Biddle of GDS noted the importance of the <dialog> element for modals. Unlike older methods that required complex JavaScript to "trap" keyboard focus within a pop-up window, the native <dialog> element handles much of this behavior automatically. This reduces the amount of custom code required and minimizes the potential for bugs that could lock a user out of a service.
Progressive Enhancement: A Safety Net for Digital Services
The panel also addressed the philosophy of progressive enhancement. This strategy involves building a core, functional version of a website using only HTML and CSS, then adding JavaScript as an "enhancement" for browsers that support it.
This approach is critical for accessibility because it ensures that if a user’s browser fails to load a script, or if they are using an older device, the essential information remains reachable. For example, in an accordion component, the progressive enhancement model ensures that all content is visible by default if JavaScript is disabled. Only when the script successfully loads does the content collapse into an interactive, space-saving toggle.
James Gordon stressed that the only way to verify these implementations is through "prodigious manual testing." This includes navigating the site using only the Tab key and testing with various screen reading software, such as NVDA, JAWS, or VoiceOver.
Broader Impact and Implications for the Digital Economy
The insights provided by the government’s frontend developers have implications that extend beyond the public sector. As the UK population ages, the number of people with age-related impairments—such as reduced vision or motor control—is increasing. According to the Department for Work and Pensions, there are approximately 16 million people in the UK reported as having a disability, representing 24% of the population.
From a commercial perspective, accessible code is also "clean code." Semantic HTML is more easily indexed by search engines, which use similar logic to screen readers to determine the hierarchy and relevance of page content. Therefore, investing in accessibility often results in improved Search Engine Optimization (SEO) and lower long-term maintenance costs.
The "Unlocking Accessibility" series serves as a reminder that digital inclusion is a technical discipline as much as a social one. By prioritizing semantic HTML and native browser features, developers can create services that are not only compliant with the law but are also more robust, performant, and user-friendly for the entire population.
As the series continues, the Government Digital Service intends to expand the conversation to other roles, including designers and content strategists, further cementing the "accessibility-by-design" culture within the UK’s civil service. The consensus among the contributors is clear: accessibility is not a feature to be added at the end of a project; it is the foundation upon which the modern web must be built.
