Do not build your Gov.uk service as a single-page application
The GOV.UK Service Manual promotes progressive enhancement for government services, emphasizing HTML first, followed by CSS and JavaScript, to ensure accessibility and functionality across devices and browsers.
Read original articleThe GOV.UK Service Manual outlines the principles of building a robust frontend using progressive enhancement. This approach emphasizes starting with HTML to ensure basic functionality, followed by the addition of CSS and JavaScript. All government services are required to adhere to this methodology to enhance accessibility and ensure that services function across various browsers and devices. The HTML layer is designed to be fault-tolerant, allowing older browsers to load content even if there are errors. CSS can be used for styling, but care must be taken to avoid techniques that could lead to failures in rendering. JavaScript adds interactivity but is not fault-tolerant, meaning that if it fails, the service may become unusable. Developers are encouraged to consider alternatives to JavaScript for interactive features and to avoid single-page applications due to accessibility concerns. Testing is crucial to ensure that services work across different devices and assistive technologies. The manual also advises against relying heavily on client-side JavaScript frameworks unless absolutely necessary, as they can complicate maintenance and performance. Overall, the guidance aims to create services that are resilient, accessible, and user-friendly.
- Progressive enhancement starts with HTML, followed by CSS and JavaScript.
- All government services must ensure basic functionality without JavaScript.
- JavaScript should enhance, not replace, core HTML and CSS functionality.
- Single-page applications are discouraged due to accessibility issues.
- Regular testing is essential for compatibility across devices and assistive technologies.
Related
Don't Use JavaScript for That: Moving Features to CSS and HTML [video]
The video discusses the benefits of using HTML and CSS over JavaScript in web development, focusing on efficiency and inclusivity. It demonstrates creating custom switches with HTML checkboxes and CSS, emphasizing accessibility and styling techniques like "appearance: none".
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
A 4 part series on how JavaScript broke Us public services
Alex Russell's series "Reckoning" critiques excessive JavaScript use in frontend development, highlighting accessibility issues and urging a shift towards mobile-first design and user experience to improve public service performance.
How Chrome Accessibility Works
The document details Chrome's accessibility features, emphasizing platform-specific APIs, the automatic provision of accessibility in standard UI toolkits, and challenges with custom controls and multi-process browser adaptations.
The unreasonable effectiveness of simple HTML
Terence Eden emphasizes the importance of simple HTML in web design for public services, advocating for accessibility and usability to ensure vital information is available to users with limited technology.
Steady on, guys.
This way, the biggest downsides (moving between pages & requiring an internet connection) are eliminated.
But if your app requires an internet connection and multiple pages, it's better to let the browser handle navigation in a fault-tolerant way.
After almost 6 years away I came back around 2015 when I realised a web server would be useful for whatever I was doing. I was shocked to find the world had forgotten about so much regarding HTML and CSS. We used to build multiple stylesheets for our sites. That was forgotten. We used to make stuff work without JS first, then add JS as a nice-to-have afterwards. That was forgotten. I saw web devs just doing all their form validation in js and the server doing none. Shockingly, this is still common today. I'm not aware of a common pattern where you get the server to do validation and just display it in js. Everyone seems to either duplicate or not even do it on the server at all!
When I saw this I was no longer impressed by what people were doing on the web because it wasn't the web I knew, it was just "applications" built in JS. Trying to argue for "web first" was a losing battle.
> - users of assistive technology would be unaware of changes in context, for example when moving to a new page
> - it would fail to handle focus when moving between pages
> - the user would be unable to navigate using the back or forward buttons in their browser
> - users would be unable to recover from an error, for example if there is an interruption to their network connection
These aren’t strictly true, are they? You can achieve these things in an SPA, even if many (most?) don’t bother
Maybe we should prioritize the simplest possible solution rather than what’s trendy today.
https://www.gov.uk/service-manual/technology/designing-for-d...
> If you do choose to use client-side JavaScript frameworks, be aware that although they can be helpful when building a service with a complex user interface, they can introduce problems.
> Using a client-side JavaScript framework can:
> - increase the overall size of your code base and push processing to the client-side, causing performance issues for users with a slower network connection or lower powered device
> - create a reliance on third-party code that your developers do not have control over, requiring you to make major changes to your service in order to stay up to date with changes in the framework
> - make it difficult to find people with the skills required to maintain the code, if the framework’s loses popularity over time
> If you use a JavaScript framework you should:
> - be able to justify with evidence, how using JavaScript would benefit users
> - be aware of any negative impacts and be able to mitigate them
> - consider whether the benefits of using it outweigh the potential problems
> - only use the framework for parts of the user interface that cannot be built using HTML and CSS alone
> - design each part of the user interface as a separate component
> Having separate components means that if the JavaScript fails to load, it will only be that single component that fails. The rest of the page will load as normal.
On another note a lot of the UK Gov Web services runs on Ruby Rails.
It is partially the fault of developers because they do their best to make this field what Alan Kay calls "pop culture and not really a field". I spent recently a lot of time questioning certain tools we use that I consider useless for us, but it's "standard" because someone else uses it and it spreads around because again you don't want to be left behind in your CV. For a lot of people the most important is to check all the tech boxes (spa, docker, kubernetes, cloud), but that the actual product is poor is less relevant. The outcomes are poor because a lot of this stuff is actually really hard, but if you take that approach it will take you forever to really master all the details of your craft. So instead you make it barely work on the happiest path and you've shipped your app as a full stack developer.
I don't know the solution, but articles like these are a good start.
So, I see those website below as examples and ask myself: What's wrong with those:
Both are SPAs. Fast, small, working very well.
Ok, they need JS to work. But honestly, how many people are not using JS because they can't (as opposed to because they don't want to). And how many have so low end devices that running the JS is a problem? People watching videos all day on their smartphones. So, the days where processing JS for creating the DOM is a problem are over. Esp. if using fast frameworks like Solid, Preact, Vue or Svelte.
Of course there're website that load 20 MB JS of analytics and spyware. Those are slow not because they're SPAs but because they do all this additional (of course unwanted) stuff. Also accessibility issues are not caused by using SPAs or not. Svelte even has accessibility warnings built-in.
If the website is simple then definitely no SPA is needed, either htmx or alpinejs or vanilla can get the job done.
JavaScript has appeared in 1995, it's now technically impossible to use a browser that doesn't support JS, because it will fail to load the website due to its old SSL/TLS stack, worrying about JS support is just insane.
Not using JavaScript doesn't give you accessibility by default, see: <a href="/121/"><img src="abcd.jpeg"></a>
The whole article feels like it was written my someone stuck in the early 2000s, you can make a well designed and accessible SPA. Using stone age technology should not be the goal, accessibility should be the goal.
The tax section of the gov.uk domain follows these guidelines and it's a mess, other pages can also be very difficult to use.
Providing good UX with HTML/CSS/Progressive enhancement usually means less-than-ideal DX. And good DX with JS frameworks tends to end up with less-than-ideal UX.
Poor DX usually results in slower development, thus devs are usually incentivized to prefer DX over UX.
The holy grail of good UX/DX requires exceptional developers whatever path you choose.
I despise React, ended up with Svelte+Typescript and now I realise that could do it all mostly with HTMX + templating with bit of alpine.js if at all.
That said, however, there is a list of four inaccessibilities in the article, and I was thinking that spas have work around for these.
In the US, tech you can deploy varies significantly agency to agency. In my case they were using a dated PHP CMS and we’d have to go through significant efforts and sign offs to get our own simple RDBMs in place on their services. Deploying to cloud infrastructure also was filled with red tape, especially for small applications. Internally they had little experience so forget just spinning up and hosting some AWS service. Then there’s costs, it’s not that such services might be too costly so to speak but money has color in the government and money to build the application is often a different color, maybe entirely different group, than those who will maintain it. So deployment/transfer for handoff is pretty much a nightmare, yet agencies often want (for good reason I’d say) full ownership of the application and surrounding infrastructure.
Stakeholders pop up from the agency your working with and any sort of collaborations between other agencies they’re trying to leverage, then if you have your own organization you end up with a superset of “idea makers” from a couple agencies and your own coming up with “wouldn’t it be nice” features from what otherwise should be a simple application.
Ultimately for deployment to arbitrary infrastructure and maintenance, SPAs simplify a lot if you absolutely need dynamic content and absolutely struggle to get real server side service infrastructure (eg most government organizations from my experience). So you pack as much complexity as you can into JS because it can somewhat take it, and you rely on user browsers to pickup the slack. This only goes so far of course, as there’s only so much you can do in an SPA that actually runs on a lot of devices but needs some real application functionality, so think small desktop applications, wizards, small computational models (a lot of what I do), etc.
So SPAs are the land I’ve been pushing in this space, no matter how much I loathe them in general, they’re one of the best fits for the constraints in these environments (which is why they get them a lot).
But, when you were writing one you do take on all of those responsibilities as the author. You are substituting the browser's standard behaviors with behaviors of your own choice.
Pet peeve: when did “to error” become a verb?
Otherwise, I wish the rest of the web were designed this way.
I don't know why many HN users don't like SPAs but I don't know any sites where I have a problem with it from a user perspective. IMHO there are far more badly designed sites. From a developer side it is a completely different story, due to the added complexity and I get it if someone doesn't want to build an SPA/PWA.
However, I would take any SPA any day, compared to what the German government offers...
Related
Don't Use JavaScript for That: Moving Features to CSS and HTML [video]
The video discusses the benefits of using HTML and CSS over JavaScript in web development, focusing on efficiency and inclusivity. It demonstrates creating custom switches with HTML checkboxes and CSS, emphasizing accessibility and styling techniques like "appearance: none".
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
A 4 part series on how JavaScript broke Us public services
Alex Russell's series "Reckoning" critiques excessive JavaScript use in frontend development, highlighting accessibility issues and urging a shift towards mobile-first design and user experience to improve public service performance.
How Chrome Accessibility Works
The document details Chrome's accessibility features, emphasizing platform-specific APIs, the automatic provision of accessibility in standard UI toolkits, and challenges with custom controls and multi-process browser adaptations.
The unreasonable effectiveness of simple HTML
Terence Eden emphasizes the importance of simple HTML in web design for public services, advocating for accessibility and usability to ensure vital information is available to users with limited technology.