A few days ago Amelia Bellamy-Royds asked on Twitter for a way to right-click any image and see its alternative text as a means to test web sites for accessibility problems. There are a lot of solutions already out there that do similar things. Accessibility Insights is one I keep using, but it feels like a tank where you want a scooter.

I’ve written a bookmarklet to achieve that functionality but this one doesn’t work on many web sites because of Content Security Policy reasons – which is a good thing.

So I packaged the bookmarklet functionality into a browser extension, and now it works everywhere – including Twitter and Facebook. You can see what it does in this video.

You can get the browser extension from the Microsoft Edge Extension store or you can side-load the extension from your local hard drive. That way you can also play with the code. The extension is also currently reviewed by Google and should show up in the Chrome store soon.

The code and instructions how to do that are on Github.

The main reason I did this

As you may know, I am a product manager on the Developer Tools of the Microsoft Edge browser. One of my main areas is accessibility tooling and how we can improve it. So I’m wondering if that functionality shown here could be something to be added to the browser out-of-the box.

What do you think?

A few days ago my colleague Patrick Brosset tweeted that he has a fix for Chromium Devtools to allow for horizontal scrolling in the DOM view which sparked a response by Amelia Bellamy-Royds asking for a simpler way to display alternative text of images on the page.

Now, there is already an improved way to do that in Chromium as of Version 85 – when you select an image in the DOM tree you get an “accessibility overlay” which shows all kind of a11y info and the alternative text as the “image name”. Sadly though, it isn’t multi-line.

I played with the idea a bit and created a bookmarklet to easily test which images have alternative text and what it is. I’ve put it up on GitHub and you can test and add the Alt Text Rollover bookmarklet to your browser.

You can see it in action in this screencast.

Now, the only problem I am facing now is that Amelia’s original request to apply this to twitter isn’t possible because of their CSP policy (which, of course, makes sense to have):

What do you think? What would be a good place to show the alternative text? How can Developer tools help with this?

This morning I released the Shakespeare Insult Generator based on a JPG I got sent by a friend on Facebook.

There is no magic here, just a fun little project.

This was the original:

One interesting bit is that I made it easier on myself by pasting the image into OneNote. After waiting a bit you can then inspect the image and OneNote (via Azure Cognitive Services) will have created an alternative text from the image by detecting text in it. It wasn’t 100% correct – of course – but it saved me a lot of time.

On the 10th of July up and coming happy person of the web Stephanie Eckles released Style Stage, which she describes as “A modern CSS showcase styled by community contributions”. It is – in essence – a well written HTML document and she asks for contributors to show what they can do with CSS to style it. She specifically also points out that people should use “modern” CSS and go out of their comfort zone to play with it.

To many people who’ve been around for quite a while in this space, this seemed like a no-news item, as we got all bleary eyed and pointed out the Dave Shea’s CSS Zen Garden pulled exactly the same stunt in 2003.

I came across it from a retweet and retweeted it with a snarky Breaking News – CSS can style HTML comment as I was baffled that this is considered a new and cool thing to do.

That was a dick move and I want to apologise to Stephanie, as there is nothing wrong at all with what she did. On the contrary, I love the focus on newer CSS and that the HTML she provides is bare-bones without any aids that would allow for extra styling. To make something cool with Style Stage, you need to dig deeper into your CSS tricks box.I love that it uses version control to contribute, so people can even get familiar with that along the way without the pressure of contributing to a project with lots of rules and dependencies.

I especially like that it is bare-bones, that she credits CSS Zen Garden and that it is not an ad-ladden cash grab piggy-backing on an educational resource. There was no shortage of horrible sites in the past that scraped CSS Zen Garden and offered similar things. My very own CSS Table Gallery that I released in 2005 to show how to style data tables in CSS died in a heap of spam and security attacks about 4 years ago. I just couldn’t keep up with the people scraping and re-using my content without consent. I had a job to keep me busy.

There are a few things that ail me about my initial response and this is also reflected in a lot of the answers and the responses to Stephanie’s announcement of Style Stage.

• That it can be a “wow” moment for people now that CSS is enough to style a static HTML document isn’t the fault of new people who are excited about it. It is the fault of the old guard of web developers banging on about the beauty of CSS without considering the needs of new audiences. We failed keeping the excitement of 2003/2004. Instead we sat on our laurels declaring that anyone professional would find our output from back then.
• The choice of what technology to use has become much harder. We can stomp our little feet and shake our fist at JavaScript overload and people not understanding the power of CSS or not even taking it serious. Or we can listen to why they think it, where they get stuck and make CSS and the tooling around it better. Those who fought the good fight in 2003 probably are too old and busy now. That’s why it is great that people like Stephanie take it on.
• I wasn’t a big fan of CSS Zen Garden when it came out. Gasp! Why, Chris, why? Well, back then I worked on CMS driven projects. Huge Enterprise web sites, B2B portals, government web sites. The HTML shown in CSS Zen Garden was something I could only dream of. I had to deal with table layouts created by Java or classic ASP. I did a lot with CSS and I managed to cut down immensely on the amount of templates needed by using it to its strengths. But the awesome experimental techniques shown in CSS Zen Garden were impossible to use for me and it felt contrived. That even went as far as me setting up CSS Tool Shed, a similar page to Zen Garden rendering out a full web site with content you couldn’t control – you know, the likes I had to work with. Nobody came and contributed. In retrospect, I shouldn’t be surprised as it felt more like spec work than contributing to a cool gallery. I also was disappointed by the contributions to CSS Zen Garden that got all the accolades. Most of them used image replacement creating gorgeous designs that were inaccessible and – back then – couldn’t even be zoomed by changing the font size. That, to me, was plain design, not web design.
• CSS Zen Garden removed a lot of old examples lately and even – again, gasp! – changed the HTML some time ago. Last time I met with Dave he told me this was based on feedback he got from teachers who used CSS Zen Garden but complained that it lacked some HTML5 features they’d love to teach their students. So he changed it. Violating the main principle of the project. And – to me – for good reason. We need to move on and help educate people on the changes of the web.

Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh god, not again” in our heads as that is our baggage and not the one of the web community. We’ve dropped the ball somewhere along the line talking exclusively to a receptive audience instead of moving on with our advocacy into academia, enterprise and education. When I see “web development” courses by the German government in 2020 that talk about “building a DHTML carousel” I see that there was a lot we missed out on.

So, thank you, Stephanie for doing this and I hope you get a lot of great contributions. I think a lot of people can learn from this and see CSS as a valuable skill to have.

I like mailto: links. They worked forever and they kind of make sense. Lately there was a discussion around their usability and what can be improved, which is great. I got some good feedback on Twitter and dug a bit into our design research if there’s something in the making to make things more obvious. There is. But for now, here is how to make sure that mailto: links in Microsoft Edge open in Gmail in the browser instead of trying to open an app you don’t use. (By default, my Mac opens mail every time, which I never used).

• Step 1: Go to gmail.com in the browser
• Step 2: Click the handler icon in the URL bar:
  
• Step 3: Select “allow”
  

That’s it. From now on each mailto: link on the web you click on will open in Gmail and not leave the browser. Of course this works for any other webmail client that exposes an handler (Yahoo, Office 365’s Outlook…).

The context menu on any mailto: link also allows you to copy just the email (without the mailto: pseudo) and to reset the handling of emails to the OS default.

You can also do so in the browser settings under Site Permissions -> Handlers.