Readit NewsI live in a Central European country.
Also, the image optimization on the default Next.js server, for example deployed to a $4 VPS, also works without Vercel.
.icon:not(:hover) {
filter: grayscale(1);
}<svg><path d=“” fill=“currentColor” /></svg>
element { color: hsl(0 0% 0%) }
One advantage is that you can target the parent element and the SVG will change automatically.
You can also create multiple “shades” by having currentColor on multiple paths with different opacity.
Accessible Name and Description Computation is complicated, some elements can get their name from their contents and some can't; frankly, I can't keep it all straight in my head.
https://www.w3.org/TR/accname-1.2/
Additionally, there's what the specs say and what browsers and screen readers actually do.
VoiceOver doesn't support the `aria-description` attribute yet. The `title` attribute is often computed as an element's description, when it's not computed as its name (it's not a good choice for naming elements, except <iframe>).
https://a11ysupport.io/tech/aria/aria-description_attribute
`role="application"` isn't a good role for static content and should only be used when letting a screen reader used its keyboard shortcuts would interfere with the user operating interactive controls (which should rarely be the case).
Ultimately in my case I’m leaning to either replacing the production year, parental guidance and IMDb rating with a dl or prepending sr-only titles to the individual tags.
I tested the page with VO on Safari and got the same results as on Chrome. So the good thing is that in practice the current setup appears to be accessible, but it’s frustrating that the theory seems to be different and just not clearly defined.
Also, aria-label and aria-labelledby replace the contents of an element when the contents would otherwise be the name; if the <span> elements where <p> instead (which has an implicit role), screen readers would only read "IMDb rating" and not "IMDb 8.2."
What might be happening is the aria-label attributes are ignored but the title attributes are used as a description after the contents. For some elements `title` can be used as an element description; I think descriptions are also invalid without a role but they may get used anyway.
I think it's best for a visualizing tool to not display attribute information that won't be used by screen readers.
I was interested about how it would change if I replaced those `span` with `p` and it still reads the entire block for me with VoiceOver.
- Parental guidance, group
- [arrow right]
- end of, Parental guidance, group
- [arrow right]
- 14+
- [arrow right]
- Production Year, group
- …
When I look at the Chrome Accessibility Tree it shows
heading "Tags"
paragraph "Parental guidance"
StaticText "14+"
paragraph "Production year"
StaticText "2016"
I do believe you're right that this shouldn't be a `aria-label` and I will replace it with `aria-description`, but I don't think that we can say that `aria-label` should only be used to fully replace the contents, as a landmark container would also be named by aria-label: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/...
Edit: I just tested this but `aria-description` is not read at all. And https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... seems to indicate that aria-label should still be ok, but the div does have a `role="application"`
`<div><div><span aria-label="IMDb rating" title="IMDb rating">IMDb 8.2</span></div><div><span aria-label="Parental guidance" title="Parental guidance">12+</span></div><div><span aria-label="Production year" title="Production year">2007</span></div><ul aria-label="Genre"><li><div><span>Romance</span></div><li><div><span>Comedy</span></div></ul></div><section><div><h2 id=":r1j:-cast">Cast:</h2><ul aria-labelledby=":r1j:-cast"><li><span>ABC</span><li><span>DEF</span><li><span>GHI</span></ul></div></section>`
`section ul { margin: 0; padding: 0; list-style: none; li { display: inline; &:not(:first-child)::before { content: ", " / ""; } } }`
I tested it out on a page I'm developing that has some meta data on a TV show. One of the elements is a set of divs each containing span with an `aria-label` describing the contents. With MacOs' VO this gets called out correctly, and Chrome's Accessibility Tree also picks this up, but this tool doesn't show the `aria-label`, it just shows the separate values as strings one after another.
It also picked up a `::before { content: ", " / ""; }` as `, value`, but that's not supported very well in general.
That's beyond bizarre.
I started around 2000, when people were still using tables for layout and CSS was pretty new. If you wanted interactivity you relied on the built-in tools on the web because there was no other choice (apart from something more extreme like Java applets or Flash).
Today’s web developer starts with something like React, learns JSX instead of HTML and doesn’t need the form tag or checkboxes/radiobuttions/select because they have useState, onClick and className to highlight whatever they think is active. I’ve been working as a React consultant for +6 years now, and every PR I see has the same issues.
I wish I was lying about the onClick on anchor tags, and for primary navigation it’s usually done right. But once they see a block link that contains multiple components (a “card”) the mind always seems to jump to onClicks that call navigate.
A more advanced error is when something is an anchor, they correctly implement the a tag with an onClick and preventDedault, but they forget to check if the user is holding down shift, hyper or control or if they pressed any other than the primary mouse button to try and open the link in a different tab/window.
Semantics in general is a lost art as well. A Text component that only returns p or spans is used for titles, they don’t consider hierarchy at all.
To be fair, there is so much logic in the client now that I understand that people with different ambitions have taken an interest in it. The only problem is that companies just blindly hire for front end developers without considering the different expertises.
I think this is the root cause for a lot of the complaints HN has about JS. I want to build good UI and UX, but there’s so much other work and configuration that I’m expected to work on, in a limited timeframe to not ruin my velocity that I just never get to it.
Can’t tell you how many times I’ve had to tell experienced developers they should use anchors to link to other pages and not an onClick. Those same people are much better in architecting then I will ever be, yet technically we have the same job description.
Been driving a Polestar 2 for nearly 4 years now and while it’s not a disastrous experience it could be a lot better. Things have improved over the years, but still pretty disappointed.
The infotainment system runs on a very outdated atom chip that’s too slow for Android Automotive. Constant frame drops, crashes or stuff just generally not working.
In a recent software update they disabled the cockpit view if you put it in reverse, just to save on resources.
The whole Android Automotive thing is worthless. There are barely any apps and when they finally released YouTube after 2 years it was just a buggy wrapper around the mobile web view. Most videos will just display a green screen due to lack of codec support, so I just pull out my phone now when I’m charging. But even the radio or Spotify fail to play half of the time.
The 360 degree camera sometimes will just not work. I still have a tiny back window, unlike the Polestar 4, but the reverse lights are so tiny and dim that it’s impossible to see anything when reversing at night.
Digital Key works, but also have to regularly pull out my phone to trigger it or manually press the button in the app. If you’re in a parking garage without internet you’re simply not getting into the car. And that’s without the random logouts.
Lane assist works relatively well, if it weren’t for the constant nagging to put your hands on the wheel even if you’re lightly tugging it. I need to really jerk it a bit before it stops beeping at me, making it completely useless.
Maintenance happens at the Volvo dealership where they made sure to make me feel like a second class citizen for not leasing a Volvo. They didn’t read my reservation mentioning the broken rain sensor, ensuring I had to return a week later for them to replace it because they didn’t have the part in stock.
I was between a model 3 and this car initially. Mainly because of the software, and for that reason I still regret not going for the M3, but given the current situation I’m happier driving the PS2.
Nearly 4 years in the chipset is still the same for the newer model.