I like that there’s a coffee cup questioning how oddly specific the messages on the coffee cups are, and that there is a coffee cup that answers and dismisses the premise all together.
Surely they had that exact conversation already when deciding what to print on their coffee mugs.
I love that you can see them holding all the mugs in the first panel. They both knew how the whole conversation would go, and just had to step through the “pleasantries” one mug at a time
First to respond to your point, no, I meant like trigger warnings or something so that if someone did not want to see something then they could nope out. Even if they were voluntary, we could choose to use them, except right now they don’t really exist (here I am talking about the OP, like people would see the graphic first & foremost, whereas any associated text is optional - like on the webpage you see that by clicking the plus sign, when viewed from outside of the individual page for the post).
About the text labels: I had no idea what was supposed to go inside the []'s. I just saw the sourcecode button, and looked at someone else showing a picture, then followed suit. None of this is explained anywhere that I have seen so far - like it is not at join-lemmy.org/docs/en/index.html, or join-lemmy.org/docs/users/02-media.html (which itself is somewhat hard to access - e.g. if you start typing, then click it to learn, it will abandon all the text you previously entered; and yet while it is a link, none of the other buttons like B for bold are links, nor is there any visual indicator that the help one is a link that is capable of being opened in another tab by the right-click menu, at least in my dark compact mode), or the latter links to commonmark.org/help/tutorial/08-images.html but after navigating to the appropriate section it seems that it does not appear there either, and again, other people do not seem to use it so I had no idea. Worst of all is that I see no difference at all in my browser when I put something there vs. not - like I would expect the “alternative text” to show up as a tooltip when hovering over the image? Or… something? But, at least in the preview mode, it does not. I will look at the test scenario below after actually posting this reply and see if that somehow makes a difference, but so far in any browser I’ve tried it does not seem to.
Anyway, both issues are explained by the fact that Lemmy is still alpha-version software, 0.19.3 on my instance, and lacks that level of “polish” yet.
Edit: update - nope, not Chrome, Firefox, or Safari all from my Mac. I inspected the HTML source and it does indeed put alt=“Test”, but a little internet surfing seems to suggest that the “alt” text is not widely supported across all browsers - e.g. they could choose to override it and just put their own (like “?”) instead, or it could be rendered so small that unless you override the img height and width that you’ll never see it, etc.
I thank you for bringing this to my attention but unless you have any suggestions for how to make my messages on Lemmy more “accessible”, I am not sure what else to do - I mean that I am not a contributor to the Lemmy sourcecode. In the case of an image that refuses to display, leaving it blank at least doesn’t clutter up the display with weird text, and I would guess that it would be obvious by the broken-image sign that most common browsers choose to insert whenever that happen? e.g.:
Edit 2: Likewise in Safari as well, although it appears that Firefox has once again decided to strike out on their own. Even when you have browser.display.show_image_placeholders set to “true”, according to support.mozilla.org/en-US/questions/1016612 :
You normally only see placeholders for images when there are dimensions (width and height) specified in the page code, so Firefox know what space to reserve. If the natural dimensions of the image are to be used and nothing is specified then you won’t see the placeholder. This may also depend on the DOCTYPE of the web page.
As always there are work-around solutions (stackoverflow.com/…/firefox-show-broken-images), chiefly by “forcing” a specified height and width for all images by default, although that sounds dangerous to me like it would be more likely to break many pages even if it would solve the current issue.
In short, this is yet one more way that Firefox needs to step up its game.:-( I perpetually feel roughly one year away from just abandoning it altogether and finding an open-source solution, but I haven’t investigated yet what that might be (LibreWolf maybe?).
There is a spoiler tag for text, here is an example:
spoilerthis post describes suicide - yay what fun! Test
However I believe that it only applies to text inside of something, not images. So in the OP it describes a scenario where one person kills themselves, and I know of no way to mark an “image” like that with any kind of tag.
Except NSFW. And even that will only blur or filter it out if you check that box in your Settings. So the choices are to label just about everything (“this post contains discussion of religious significance”, “this post may be sensitive for younger viewers”, “this post contains depictions of trauma”) either NSFW, or else just not do anything at all.
Also, I know of no way to mark actual text as NSFW, like in a comment reply?
Alt text is a well-established mechanism for making images accessible – not so much in the case that they don’t load, but for screen readers and other accessibility tools. I agree it would be nice to have some easy way of viewing alt text if I want to (there are probably browser extensions out there?), but just because it doesn’t work like that currently, doesn’t mean you shouldn’t use it. It works fine for its intended purpose (again, screen readers).
Your link describing inconsistent browser support is from 13 years ago, I have to assume it’s gotten better since then.
As for the markdown syntax, any good markdown reference should explain alt text (it’s a widely used standard, nothing to do with Lemmy being in alpha). Your link to the CommonMark tutorial has it right there (granted, behind a nondescript floating button, which is a questionable design choice if you ask me):
<span style="color:#323232;">![Text box containing the text "Alternate (alt) text is displayed when the image can't be shown, or for the visually impaired. It's fine to leave this blank but the `[]` is required".](https://lemmy.ml/pictrs/image/d9fb19c0-5e60-4f96-9225-a36809031ef2.png)
</span>
This is helpful for anyone using a screen reader, who would otherwise have no idea what the image showed.
abandoning it altogether and finding an open-source solution
In my experience, anything browser-related tends to get WORSE over the decades, not better, especially as pertains to cross-platform compatibility. HTML5 was a significant leap forward, but countering a trend with inumerably many other smaller steps backwards. The shift from direct HTML to CSS being one huge leap backwards, and nowadays the shift from CSS to JS - even if you view the html sourcecode, and even if you pair that with all of the relevant CSS files, you often still cannot readily find the link between what the dev wrote vs. what ends up happening - and I don’t just mean end-users, but the actual teams of devs in the first place!!!
Just to pick one recent example for me, if the bright white background used by many websites (including Google Docs, Sheets, etc. that otherwise offer such great tools to collaborate with people on) literally hurts/strains my eyes, then in the past it was difficult but doable to use something like an Extension to change the background and font colors to my own preferred “dark mode” (or at least swap out the white for cream or some such), while later it got MUCH more difficult to do that with CSS but was still do-able with significantly more work, whereas now with HTML+CSS+JS the task becomes well-neigh impossible across a wide variety of sites.
And even in cases where I use dark mode, including Lemmy (mostly using Firefox browser), people will upload text boxes (from Tumblr or Twitter or whatever) containing that bright white background that hurts all the more when it is the only thing blaring forth from admist the sea of darkness.:-P
Which makes me doubt that the description in the CommonMark tutorial (that also uses a bright shining white background I note, among other things about it) is factually correct - although the more I think about it, perhaps it is me who was wrong. In any case, most browsers choose to render a small “broken-image” icon whenever an image cannot be displayed, which makes it obvious that an image was supposed to be there, without having to look at the sourcecode. Except Firefox that chooses not to, for whatever reason, unless someone specified the abolute height and width for their image (and probably did so using direct HTML, rather than CSS and/or JS?). Since I do not use a screen reader myself, that part I cannot comment on.
Btw that CommonMark page itself seems to advocate for putting nothing inside of the brackets? If you click the 3rd circle at the bottom, it says:
I tested and in Preview mode at least, that works on Lemmy. There is a SHOW HINT (IN ALL-CAPS FOR SOME REASON?) button, relatively obscured by differing from all other buttons on that page in being in black and white (and why is the font size so small in all of the active elements!?), especially in relation to the giant sizes of the buttons themselves, but by default the page seems to be suggesting that it is fine to leave the parts between the brackets empty.
So while I do not know anything at all about CommonMark, at a guess I would surmise that perhaps it is itself still in alpha? Or at most beta, b/c that does not look very polished to me, though that’s just imho ofc.
Firefox is open source, but I mean that I would replace it with something else that is open source - as opposed to Chrome, Safari, or Edge that are not - and also better, assuming ofc that something else came close to being better or at least slightly less worse wrt the specific issues that I keep having to deal with when using it.
Anyway, thank you for letting me know about what was supposed to be inside the brackets - I hope I have convinced you that that fact was by no means being made obvious, but with enough community support then as people welcoming noobs into the Fediverse and explain to them one-on-one how things work, hopefully using the accessibility features will catch on more.
I’m a bit too young to really remember a time before CSS, but I wholeheartedly agree with you on the growth of websites needing a mess of convoluted Javascript just to load/construct what is essentially static content. The idea of both CSS and JS is that they should be used for progressive enhancement – take a good starting HTML webpage, make it prettier with CSS, then make it even prettier with JS. But in practice people just build React apps and the like, that show nothing unless you enable Javascript. (Even Lemmy-UI sadly succumbs to this; it should be perfectly possible to enable most forms of interaction on this site with plain old HTML forms.)
Again I agree with you on dark themes, but for screenshots that’s a user problem, I don’t think there’s much Mozilla can do about that. FWIW I’m using Dark Background and Light Text which has an “invert” option that’s generally pretty successful even when style-based approaches fail. (But it goes out of its way to not invert images, so you still get those blaring Twitter screenshots.)
I think I actually remember being frustrated by Firefox’s handling of broken images in the past, so really we agree about pretty much everything haha. I have a user CSS style for Lemmy that sets a min width and a border for images even when they’re broken, but that should absolutely not be necessary of course.
The last part of the CommonMark page is an exercise! It’s giving you a challenge: to add alt text to the image. “SHOW HINT” is giving you a hint. So I definitely don’t think it’s encouraging you to not add the alt text; quite the opposite.
CommonMark is not in alpha. It’s a specification for Markdown, which is a kind of text formatting that’s been around since 2004. There were a bunch of differing implementations of it, so CommonMark was created as a standard. (Variants of) Markdown are used on Reddit, Github, Discord, and in comments in the Rust programming language, among many other places. But alt text itself is not even a Markdown thing – it’s part of HTML, and has been since 1993. It has its own Wikipedia page and everything.
Markdown compiles to HTML, so Markdown has a way to specify alt attributes, and Lemmy uses Markdown for message formatting, so Lemmy transitively also has a way to specify alt attributes. Both of these are good things, because alt text is a web standard that is widelyrecommendedforaccessibilityreasons.
To your point on welcoming people into the Fediverse, sure, there is definitely a lot more that could be done there. I haven’t used Mastodon much, but I believe they have a more user friendly UI for adding alt text to images, that encourages you to do so and explains why. Maybe something similar will eventually come to Lemmy as well.
One problem with using Extensions to forcibly alter webpages - e.g. to convert them into a dark mode - is that they may have unexpected side-effects, which means that you cannot use it in your “main” instance that you use daily, or at the very least then you need to have a “backup” instance that always just works. I think I even have a couple (one was dedicated specifically to things like Google Docs), but I cannot trust them to work reliably so I do not even think of them anymore, plus they keep falling behind and not updating their code and after that do not work whenever the browser updates its own mandatory standards, and then I have to go hunt for another one, or else just find some other way to deal with it (reduce screen brightness and make sure not to work in a darker setting).
In order to really make a difference, one of the big-name browsers would need to integrate a change into its main code, which would then bring large amounts of market share users into the mix, helping to make development of the code a greater ROI. Though these days, almost everyone it seems uses Chrome (at least as reported stats show), and even all Firefox users simply get ignored - like, as long as a webpage runs on Chrome, companies stop testing it. Fuck Safari, Edge, Firefox, and most especially anything even smaller than that like LibreWolf.
All that said, most other browsers besides Firefox insert a small broken-image-looking icon whenever an image cannot be loaded. Though with increased connection reliability these days (inside the continental United States anyway), the number of situations where it would even be needed is vastly reduced compared to the past. And as for other places - like maybe Hawaii - well… fuck them. It is sad, but true: when Google makes e.g. Google Docs (that also lacks a dark mode), they did whatever tinkering they felt that they had to do at the absolute minimum in order to make a profit or indirect profitable impact, then called it a day and stopped.
Though Firefox was supposed to be different - it was supposed to lean heavily into its open-source nature, to provide a level of service to its true customers, the actual people using it, rather than the “customers” being the advertising companies who pay for certain features to be developed and pay far MORE for certain features to ever NOT be developed, if you take my meaning. Case in point: how Chrome now refuses to block ads.:-(
But anyway, none of the big browsers seem to be doing much with the Alt text these days - not showing it as a tooltip, and in the case of Firefox, not even showing it at all in some cases, or if it is, then it is just a weird text out in the middle of nowhere that seems disconnected to literally everything.
For instance, if you are capable of seeing this, compare the first and second renderings of “Test” in the image below:
The top one is how Firefox renders it - just this singular word out in the middle of nowhere, where even though you see it and it is therefore potentially better than leaving the insides of the brackets [] totally blank, it doesn’t really explain or convey much of anything at all. Whereas the rendering below puts the broken-icon image next to the alternative text, that helps convey that this was meant to be an image, but instead you are seeing the alternative text. Otherwise, instead of putting [Test] inside of the brackets, someone would need to go as far as saying like [Test - this was meant to be an image but instead you are seeing this text here.]. That is a lot of work to place onto people who need to consider accessibility options for each and every image, and especially on a social media site like Lemmy that are meant to be fast-paced conversations, it simply will not happen. Therefore, my point is that Firefox is letting people down, by not using the same treatment that all other common browsers choose to do - they should have upped their game, in order to stay competitive. This is just one of many reasons why I continue to use Chrome, despite how ad-blocking is now disabled, unless I specifically need to go to YouTube to play multiple videos in a row (even then I will often just use Chrome to avoid the hassle of switching), or to visit a news website, which are so annoying that trying to read them without ad blocking is not worthwhile at all - i.e. I would rather read nothing at all then have to put up with their nonsense:-(. BTW, on Android I use Firefox, so here I am just talking about desktop browsing.
About that CommonMark page: oh I see, yeah you are right. However, even given your correctness, I still think that I am right: if someone like me who knows all of HTML, CSS (a tiny bit), and JS (an even smaller bit), and cares about accessibility did not realize that fact, then something is VERY wrong with that page. And right away I know what it is: that font is TINY. Those buttons are ENORMOUS in size - the width of the “code” and “previous exericse” is more than a third and approaching half the damn page width (at a glance, as I resize the window, it looks like ~40% of the left-hand size that excludes the right-hand vertical bar area with those square buttons?), and the text inside of the left-hand box and especially the size of that M in the right-hand box is ENORMOUS, but the text of the actual “Add alt text of Logo and title of Creative Commons licensed to this image:” is entirely missable, even given how few elements exist on that page. Normally, a tiny font size is a literal trigger, an indicator that “this item is skippable, of lesser importance, a footnote only for someone who is hunting/rooting/digging deeper into the details, but not for casual inspection”, and sometimes people say the phrase “legal text”, like just ignore it and go on with your day, unless you have a professional reason to care about it. So for this aspect to already be buried on page 8 of not even the help document but the link from the Lemmy help document… I guarantee that something >90% of people on the Fediverse are going to not know this, even given the highly technically skilled nature of our community. Hence why I was saying: if we wanted more people using Lemmy (or Mastodon, Kbin/Mbin, etc.) to know this, then additional work would need to be done.
Likewise I have never done anything at all with Mastodon, but I LOVE hearing how they are trying to increase their accessibility - that’s wonderful:-).
And at least you convinced me to start putting something there here on Lemmy - so far I have been using the short word “img”, that is more or less quick to type and seems to get the job done, at least insofar as an individual can offer, without going further e.g. to offer to do a redesign of that CommonMark page (that seems certain to be refused even if a finished product were offered wholesale with no strings attached).
Add comment