The annual HTML conformance analysis, validating 200 home pages of the most popular websites. Despite improvements, there is no signal of commitment to valid output as a quality baseline to benefit end users as well as web development as a profession…
Not so short note on aria-label usage – Big Table Edition
“aria-label is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skoolterm that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics.”
Provides you with dozens of recipes to help you build common components on the web, such as navigation, forms, filters, tables, and dialogs, in an accessible manner.
People on StackOverflow telling people to screw up #accessibility with the HTML dialog element defeats the purpose of using that element in the first place IMO. Please upvote my answer that corrects the numerous wrong answers, including the accepted answer, to this question if you have an SO account.
"Like the rest of the web platform, interoperability is key to accessibility support. It is safe to say at this time (September 2024) that the display of title attribute content on keyboard focus is not implemented interoperably."
Semantic code in HTML is still important in modern web development. It can improve accessibility, SEO, maintainability, cross-device compatibility, future-proofing, collaboration, and page load times.
so, here's an interesting question that I'd love some input on.
right now, the static site generator I use (getzola.org) has an optional "line numbers" mode for code blocks which is meant to display line numbers alongside a section of code. right now, this switches from outputting the code as a raw block of text to a table, where the line numbers are on the left and the lines are on the right.
my gut feeling is that the correct way to do this is to not use a table, and just find some other way of styling the code so that each line is prefixed with a number, and maybe you can toggle that on and off. but I don't actually know if this would be better for screen reader users or worse.
and this also occurred to me: I don't actually have any idea what the most common ways screen reader users interact with line numbers are. I personally would prefer to avoid adding extra javascript to this, so, that sets aside the option to do things like custom key combinations for revealing the line number, although I could do those instead and have some kind of fallback. although this wouldn't work nearly as well for mobile viewers, since that has much more limited support for key combinations. (maybe long press for line number?)
like, would it be obnoxious to just say the line number before every line, as if they were formatted as text? would it be helpful? I genuinely don't know since I don't develop this way, and would love to know what people think is best. this is a case where simply testing it out with a screen reader isn't enough: I know what the result would sound like, but I don't know if that's the result people would like to hear.
and it is worth saying, all of these options should ensure that you can just copy-paste the code into whatever editor you want and read it there. this is pretty doable with a table or any other method, and I'm not super worried about that aspect. mostly just what people who are browsing the site on their device would like as far as navigation goes.
Vytvořil jsem si svůj "profesní" web (spíš je to jen landingpage), jelikož letos pravděpodobně skončím u dosavadního zaměstnavatele po dlouhých 18 letech 😮 (což zní až neuvěřitelně, ale fakt jsem tam tak dlouho vydržel, vystřídal jsem tam několik pozic). Budu hledat opět práci #fullstack #webdev #homeoffice, ale se zaměřením na #Wordpress. (Kdyby to tu četl někdo, kdo hledá někoho do týmu, tak uvítám nabídky, klidně i částečný úvazek.) 🏠 system64.eu
'Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.'
Images without text alternatives is a huge problem. The issue is magnified when the image is a link. Realize that screen reader users receive no valuable information when the image wrapped with a link is missing a text alternative.
Ensure that all images, including those that act as link, provide appropriate text alternatives.
aria-label is one of a number of secondary methods to label native HTML UI elements. It works in some scenarios, less well or not at all on others. Get the details on it's proper and effective usage.
“React and the component model standardises the software developer and reduces their individual bargaining power excluding them from a proportional share in the gains”. An amazing write-up by @baldur about the de-skilling of developers to reduce their ability to fight back against their employers.
