I like the work that Gov UK do in terms of accessibility, changes they make, and how they explain it. Not just from a compliance point of view, but a lot of thought goes into their design too. The first time I had to file my taxes (HMRC site), I was terrified, but their site guided me through the process, with clear divisions, sections, guidance along the way. In all of this their design decisions really shines, and it makes a lot of sense; dealing with legalese and paperwork is daunting, the last thing a user should be doing is having to 'navigate' your website.
Have a look at the Home Office part of gov.uk and I think you'll soon change your mind. Pure abomination. At one point, before I kicked up a fuss, they had 2 distinct links - Biometric Residence Permit (BRP) and Biometric Residence Card (BRC) - with apparently different destinations but which, in fact, pointed to the same form. Worse, staff responding to BRP/BRC enquiries were convinced the links pointed to distinct forms and were even including the fictional link distinction in rationales for rejecting applications.
Then there was the form with fields which rejected input with trailing whitespace with no explanation, ie. no trim function. I could go on.
I am happy to see the author mention WCAG and British Dyslexia Association. They seem to have a refreshingly strong focus on accessibility.
I wonder how much of an uphill battle is fought inside the GDS and across the UK government to push for this kind of universal access.
Also, it's amazing how much of a "brand" GOV.UK is for me even in spite of (or perhaps due to?) its accessibility. To me the brand is: big strong blobs of the high-contrast colour palette, GDS Transport (the typeface), and a relatively (but pleasingly) narrow content.
I've worked for a few UK departments and been very impressed with not only their adherence to WCAG 2.1 AAA on user-facing tools, but also on internal administration tools. Accessibility is strictly required and your project will not be allowed to be released without it.
In a previous job I worked on a site which had to meet gov UK guidelines despite not strictly being directly hosted on gov.uk, and early in production every video was re-recorded / re-produced with sign language interpretation included to meet guidelines.
They specifically try to steer clear of video content. It's less accessible, worse for people scanning for information, worse for people on slow connections or mobile data connections, and can become outdated whilst also being much harder to update.
They try to avoid video because it's data heavy and difficult to update. Though when I applied for a Civil Service job the videos had a signed version and a transcript.
Love GOV.UK design guidelines. Working for a government department at the moment as a contractor building some internal frontends and the design system is used internally as well. Really helps keep things consistent across all areas of government.
> smaller font sizes (14px and below) are bad for accessibility and should not be included as options in the typography scale
When improving our accessibility I noticed that in iOS any font size less than 16px on form inputs will zoom in if selected, which is really annoying as you have to zoom back out to see the page layout normally.
We actually had our :root set to 14px so this happened on every form input across the app. Definitely font sizes below the browser defaults (16px) can cause unexpected issues.
Yeah it was a janky setup. I think the root was 14px which was converted to rem and then multiplied by a scaleMultiplier depending on user settings.
As you pointed out the obvious solution was to increase the root size, but that would have significantly changed the UI for a lot of users… so I just targeted all form inputs for webkit only and set the default size in rem using !important to 16px.
I don’t usually resort to snarky comments but I feel it’s warranted here. It’s a bit odd that so much effort has been put into font sizes and yet there is a permanent cookie icon taking up 10% of my screen on mobile even after rejecting all cookies.
That webpage's fonts simply renders poorly on my older Mac and on my Linux systems. Is it the AA that is wrong for the main font? The only system I have here where it renders kinda okay (I still find that font way too bold for paragraphs) is on Windows.
I just don't think it's a good font. I don't think it looks good. I don't think a font that renders poorly on many systems is good from a UI / legibility / accessibility perspective.
They may have "solved" the scaling issue but I don't see
very careful thoughts about "typography" here.
A font which doesn't render well on several systems is simply broken.
Makes zero sense to resize screenshots like that, messing the font, when the whole point is to talk about typography (and if they're not resized, then there's something deeply broken with the fonts not just for me).
I don't know what font they're using but it looks like some serious case of NIH syndrome and I do believe there are way better fonts out there.
I give 5 out of 10 at the very most.
P.S: it's also one of the rare website which renders with the center column so narrow and I don't like it either.
There's still plenty to criticize in the gov.uk web design, and I have. That allows me to say amongst other things, one thing you cannot criticize is their reaction: I got a response, it was timely and it valued my input according to its utility, and I felt respected as a user. They didn't over commit to adopting anything I proposed either so there's no false hope here.
(I complained about the difficulty finding and understanding overseas payment methods for UK citizens entitled to make national insurance contributions while not working in the UK, towards the UK state pension)
Many people misunderstand the use of colour in material design. What is a "clickable" is often unclear. I think in the gov.uk space its always reasonably clear what is, and is not a clickable element, and what is stylistic markup only.
47 comments
[ 3.5 ms ] story [ 112 ms ] threadMarvel at our road signage!
Travel across London with significantly fewer missteps than in other cities of equivalent complexity of metropolitan area transit networks!
Apply to change ownership of a vehicle!
...let me have this. We don't have much to be proud of from the last ten years.
As a foreigner, I always found public signs very pleasant and easy to read.
Gill Sans, which has a really nice modernist aesthetics, was developed for London Underground: https://en.wikipedia.org/wiki/Gill_Sans
They're generally OK, but the fractions missing a bar, and using m as an abbreviation for miles are absolutely horrible.
Then there was the form with fields which rejected input with trailing whitespace with no explanation, ie. no trim function. I could go on.
I wonder how much of an uphill battle is fought inside the GDS and across the UK government to push for this kind of universal access.
Also, it's amazing how much of a "brand" GOV.UK is for me even in spite of (or perhaps due to?) its accessibility. To me the brand is: big strong blobs of the high-contrast colour palette, GDS Transport (the typeface), and a relatively (but pleasingly) narrow content.
Or do they actually have a sign language interpreter on each video on every site?
[0] https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-...
They took accessibility incredibly seriously.
> Credit. Guidance, original HTML and CSS derived from GOV.UK Design System.
https://design-system-alpha.digital.govt.nz/components/Butto...
UK
– 10 Downing Street https://www.gov.uk/government/organisations/prime-ministers-...
– HM Treasury https://www.gov.uk/government/organisations/hm-treasury
– Department for Education https://www.gov.uk/government/organisations/department-for-e...
US
– White House https://www.whitehouse.gov/
– Department of the Treasury https://home.treasury.gov/
– Department of Education https://www.ed.gov/
https://designsystem.digital.gov/
When improving our accessibility I noticed that in iOS any font size less than 16px on form inputs will zoom in if selected, which is really annoying as you have to zoom back out to see the page layout normally.
We actually had our :root set to 14px so this happened on every form input across the app. Definitely font sizes below the browser defaults (16px) can cause unexpected issues.
As you pointed out the obvious solution was to increase the root size, but that would have significantly changed the UI for a lot of users… so I just targeted all form inputs for webkit only and set the default size in rem using !important to 16px.
Or is the annoying banner really absolutely required by legislation?
I just don't think it's a good font. I don't think it looks good. I don't think a font that renders poorly on many systems is good from a UI / legibility / accessibility perspective.
They may have "solved" the scaling issue but I don't see very careful thoughts about "typography" here.
A font which doesn't render well on several systems is simply broken.
Then the screenshots here are just badly resized:
Makes zero sense to resize screenshots like that, messing the font, when the whole point is to talk about typography (and if they're not resized, then there's something deeply broken with the fonts not just for me).I don't know what font they're using but it looks like some serious case of NIH syndrome and I do believe there are way better fonts out there.
I give 5 out of 10 at the very most.
P.S: it's also one of the rare website which renders with the center column so narrow and I don't like it either.
And the screenshots look perfectly normal.
I'm not sure what your particular issue is but maybe make a bug report?
The center column is a bit narrow but that's a minor, easily fixed problem.
You should file a bug report.
(I complained about the difficulty finding and understanding overseas payment methods for UK citizens entitled to make national insurance contributions while not working in the UK, towards the UK state pension)
Many people misunderstand the use of colour in material design. What is a "clickable" is often unclear. I think in the gov.uk space its always reasonably clear what is, and is not a clickable element, and what is stylistic markup only.
HN please take a note and get rid of the tiny `font-size`s on this site please. Some text gets down to 9 or 10px.