Live data from Hacker News

USWDS: The United States Web Design System

designsystem.digital.gov

51–60 of 151 posts

Re: USWDS: The United States Web Design System

#51
post #15

Developers are an interesting bunch "Why does anyone use Bootstrap anymore?" and then goes and creates basically the exact same components again by hand. Seems like that same trend repeats every couple of years "[Popular library] is now outdated, let me just create an in-house clone or move to identical but trendy [Popular library]." To be clear I very much like the USWDS components, but they are mostly 1:1 with Boot…

Nope, you're not missing anything really, but I'm sure glad that not every website looks like a Bootstrap 3. I think these government ones are more about keeping a consistent style and look across departmental websites, than advertising a product for general use. In fact, I think the government would not take very kindly to hobbyists making official-looking websites serving a non-government agenda. Front-end isn't th…

Honestly, in my experience, the drive for bespoke styles isn't from developers, but from product folks and stakeholders. For instance, I once had to build a CMS UI with a dropdown where users could pick how they wanted to sort their search results. The product folks also asked me to add a "Show Translations" option in the dropdown, which wasn't a sort order, and could be toggled separately. They insisted that it needed to be in this dropdown and not a separate UI control, and since they generally know what the users want better than I do, I went with it.

I've semi-frequently had to build custom tree views and tree selectors with multiple modes of operation and various amenities. And sometimes the way those complicated widgets are built requires that we customize more basic components like split-buttons or dropdowns to match so that users aren't thrown off.

Sometimes all of this can be accomplished by taking a library like Bootstrap and applying a theme. But sometimes the theme gets so intense that we realize we're basically just building Material UI on top of Bootstrap's code, and it makes more sense to use that library instead. And as mentioned before, sometimes there are just things that we can't get from Bootstrap or Material, but that we're going to use fairly often (last I checked, Bootstrap didn't have a 5-star rating widget).

The "It's Fashion!" narrative seems very appealing to people on HN, to the point that I'd advise people to double check that they're not falling for confirmation bias before proffering it as an explanation.

Re: USWDS: The United States Web Design System

#54

I haven't used them myself, but the GOV.UK components look and function great. https://govuk-components.netlify.app/

Wait why is the UK gov using a netlify.app link? I'm not a web dev so I'm not sure if that's common or more convenient

They're not, dunno where that other link came from but it's not the official. Sneaky

https://design-system.service.gov.uk/components/

Re: USWDS: The United States Web Design System

#57
post #13
post #3

Earlier quoted context omitted.

Icon fonts aren't accessible.

I’m not sure I follow. Are icons accessible at all? Whether they’re fonts or SVGs or bitmap images shouldn’t really matter.

In HTML when used as images with the IMG tag, SVGs and bitmap images have a direct concept of ALT attribute for accessibility to screen reading. Font glyphs do not. You can add aria- tags around font glyphs but you can't add/set those in just pure CSS and so most icon font libraries don't bother. It also doesn't help that the most common tag for adding icons from icon fonts is the I tag (from ancient HTML for Italic, though EM is the preferred tag) which not only doesn't naturally support things like ALT tags it is even worse for accessibility by implying the wrong semantic meaning ("there are italics near here"? But there aren't).

Re: USWDS: The United States Web Design System

#58
post #31
post #29

Earlier quoted context omitted.

Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E". Of course you could just put `aria-label="edit"` on its container the same way you would an SVG. The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well. Some…

I would expect modern icon fonts to exclusively use the Unicode Private Use Area. Fallback fonts would then not have glyphs for these code points. Screen readers would hopefully ignore them.

Screen readers ignoring them is a problem when it is UI the user needs to interact with. How does the use know that U+E9AF is the Edit icon they are looking for versus say maybe U+E9AE is the Delete icon?

Re: USWDS: The United States Web Design System

#59
post #29

Earlier quoted context omitted.

Can you expand on your pithy comment? :) I'm genuinely interested.

Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E". Of course you could just put `aria-label="edit"` on its container the same way you would an SVG. The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well. Some…

Font Awesome 5+ supports ligatures in that way, though my understanding is that it was intended for ease of use in design apps like InDesign more than for accessibility, but I suppose it can help accessibility too. (Though Font Awesome suggests SVGs over icon fonts for actual usage on the web.)

Re: USWDS: The United States Web Design System

#60

Earlier quoted context omitted.

I know everyone has their own workflow, but I'm still surprised anyone actually goes to Google's home page anymore what with their search bar being accessible from practically anywhere (browser address bar for example). I don't remember the last time I actually went to the Google home page. What leads you there these days?

My default address bar search is DDG, but need to fallback to google at times, and I keep my iPhone relatively google-free (Other than google voice).

Use !g at start or end of your query to query google https://duckduckgo.com/bang
Post reply on HN