#dev 2024-12-17
2024-12-17 UTC
# 
[tantek]2 That's a mistaken view of the purpose of the 'alt' attribute and web accessibility in general
# [tantek]2 The point is to make the experience more accessible, not pure textual replacement. That can work for some uses (e.g. if an image is purely used for a piece of text), but is in general incorrect.
# [tantek]2 A logo which is clearly a logo to a visual user should be spoken as a logo to someone using a screenreader.
# [tantek]2 Similarly, you don't replace a photo with the words in the photo
bterry joined the channel
# [tantek]2 The point about the share icon and using the word "share" as the alt is correct though, because that is the full purpose / functionality / meaning of that icon.
# carrvo btrem my understanding of "describe" might be a bit different than yours. I learned that it could either be referring to qualitative statements or to connotations. I would assume that the most helpful alt would not be qualitative, but to describe the connotation (which is what the picture is included for).
[tw2113] and Kupietz joined the channel
# 
Kupietz Is there a reference to all this somewhere, or is this just thinking you guys are kicking around? I've felt before it would be nice to have some sort of clarity on these sorts of things, especially in wordpress, where a single image has an alt tag, a caption, a description, and a title. Not to mention the filename.
# Kupietz mattl++ Thanks. That's really interesting. Found this as well https://html.spec.whatwg.org/multipage/images.html#alt as I was researching how strict validators are about empty alt tags (you may or may not know I had recently nearly lost my life in a tragic HTML validation accident.)
# Kupietz In other news: minor update today. Interactive css holiday lights now compatible with webkit browsers. It was bothering me that they weren't working on my phone. https://codepen.io/kupietz/pen/dPbNywN
gRegor, srijan and [jgarber] joined the channel
# Kupietz Thanks all. It depends strongly on the original CSS lights demo that I gave the link to, but, I did think of a couple of neat improvements. [jgarber] I'd give it even odds that it's a wordpress plugin by the time I'm done with it. So, yeah, a shortcode [light-rope blink wiggle broken="5, 8, 10"] might happen.
# carrvo Why not just an iframe or something? Then it can stay HTML+CSS and be embedded onto multiple sites? Maybe have some JavaScript layered on top to provide further modifications?
# carrvo kupirtz++ it is quite neat. Makes me want to reinvigorate my project to migrate my first game to HTML+CSS+JavaScript.
# carrvo kupietz++ sorry, messed up the spelling.
# Kupietz Could do, anything's possible... for me the fun thing was trying to do it without javascript. Also, I'm circumspect about iframes, IIRC Content Security Policy headers make your site look better to google... or something... at any rate there was a reason to have them... but it makes iframes higher maintenance. (CSP is a complicated subject, if you're not familiar best to try googling it. It's a way of controlling where your resources will
carrvo[d], adele, peterkaminski and gRegor joined the channel
# carrvo[d] C++ then Python3. https://github.com/carrvo/Comatose
# carrvo[d] [edit] C++ then Python3. https://github.com/carrvo/Comatose
GuestZero, Tiffany and Kupietz joined the channel
# 
Loqi It was a dark and stormy night https://indieweb.org/It
# 
capjamesg[d] [Joe_Crawford] Am I using the most appropriate units for the images on https://jamesg.blog/2024/12/17/diffs/
# capjamesg[d] [edit] [Joe_Crawford] Am I using the most appropriate units for the images on https://jamesg.blog/2024/12/17/diffs/
# capjamesg[d] At some breakpoints part of the image is hidden on the screen.
# capjamesg[d] And a scrollbar appears.
# capjamesg[d] I would like the image to scale down to the minimum size (the width of the article container).
Kupietz joined the channel
# capjamesg[d] I suppose the calc is redundant.
# capjamesg[d] I had a different unit in there but percent felt more appropriate?
Guest6 joined the channel
# capjamesg[d] I want it to be wider.
# capjamesg[d] The images are often too hard to read at their default size.
# capjamesg[d] If the screen is too small, I want it to be 100%.
# capjamesg[d] That also makes the text wider 😦
# capjamesg[d] Oh but I can do a max width on the text.
# capjamesg[d] This should work!
# capjamesg[d] kupietz++
# capjamesg[d] Thank you!!!
# capjamesg[d] I'm rolling out a change. One sec.
# capjamesg[d] Do a hard refresh and take a look at the page.
# capjamesg[d] I think the scaling works!
# capjamesg[d] kupietz++
# capjamesg[d] The BBC uses this layout:
# capjamesg[d] Images are allowed to go off to the right, to a maximum amount.
GuestZero_, gRegor and [Joe_Crawford] joined the channel
# [Joe_Crawford] capjamesg[d] I think what you have is fine. I see one breakpoint at 40em where it's triggered. the width is effectively clamp(65vw,130%,100%) which when I put it like that is weird, but it works. You're overcoming the grid, right? You have a grid which constrains the layout and you want images sometimes to exceed it. You want images to flow outside the grid, which 130% does.
# [Joe_Crawford] And when the breakpoint is smaller you want to override the padding that's on main, which you could also do with something like main article p:has(img) img {
# [Joe_Crawford] `main article p:has(img) img
{ margin: 0 -20px }`# [Joe_Crawford] I do think you'd benefit from making the images `display: block;` - that way if you add framing elements you don't get excess. But in Firefox I'm not seeing what you're describing. Maybe you already made a change.
# [Joe_Crawford] I'd want to test your code that is narrow and doesn't look resized, how much you have to alter to make it not be that wider look.
barnaby, JadedBlueEyes, gRegor, gRegorLove_, [snarfed], [manton], sebbu2, [KevinMarks] and [schmarty] joined the channel
# capjamesg[d] Omg https://www.w3.org/Style/Examples/007/leaders.en.html is amazing!
# [Joe_Crawford] That example capjamesg[d] is rather clos to what we came up with in FrESH
# [Joe_Crawford] _close_
Xe, [fluffy], [slack_sp], [jamietanna] and OptimumKnightXL joined the channel