I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for accessibility in your products, but more importantly what you can do in your browser to make sure your products truly are accessible.

The course consists of seven lessons and is 36 minutes overall.

1. Introduction (3:59)
2. Accessibility and Why it Matters (4:21)
3. Automated Accessibility Tools (2:32)
4. Testing Color and Text Accessibility (9:34)
5. Testing Interaction Accessibility (8:48)
6. Testing Media and Image Accessibility (6:19)
7. Final Thoughts (0:35)

Here’s what Skillshare said about the class:

Reach more users of your product than ever before with Microsoft principal program manager Christian Heilmann!
Product accessibility is becoming increasingly essential to meet our ever changing needs and varied uses of the internet. Join Christian by putting yourself in the shoes of internet users, enabling you to develop products that are not only compliant with accessibility regulations, but flexible for a spectrum of uses.
Together, with Christian, you’ll learn:

• What it means to make your product accessible and why it matters
• The benefits and restrictions of using accessibility tools
• How to test for color and text accessibility
• How to test and fix issues of interaction accessibility
• How to test and increase media accessibility

Whether you’re a developer who is looking to make your products easier to use or you have an interest in product accessibility in general, this class will get you to think like a user of your product, ultimately meeting the needs of more people.

If you aren’t already a Skillshare member, you can sign up and check the course with a a 14 days Premium Membership Trial.

Given the current situation, I didn’t fly to New York to record the class but had a camera man come to my place, so this course shows you how I work each day, which interestingly enough is the topic of another, upcoming, class on Skillshare.

A few weeks ago Honeypot.io asked me to answer a few questions about my career, and here is the video of my answers.

• 00:00 Introduction
• 00:31 What are your top tips for career advancement?
• 02:03 What strengths are most important for a developer?
• 04:07 Work-life balance: how do you do it?
• 05:11 What mistakes have you made in your career?
• 07:06 What was the proudest moment in your career?

If you got 25 minutes to spare, here’s a great episode of Matt Wojciakowski ’s “Tabs vs. Spaces” show where I talk together with my colleagues Erica Draud and Rachel Simone Weil about Edge Developer tools, accessibility, PWAs and what we’re doing to make it easier for beginners to get started.

One thing that keeps amazing me about Visual Studio Code is how much it helps you automate annoying tasks when you write code. For example, if you add an img tag to the document you need to know the src and find out the width and height to avoid reflow issues when the image was loaded. You also need to add an alt attribute either to provide an alternative text or to prevent assistive technology to read out the src attribute instead.

You can do this by following these steps:

• Start the img tag
• As soon as you write src=” VS Code gives you an autocomplete for local images.
• Close the img tag (this is important)
• Use the Command Palette” (CMD + Shift + P on Mac or Ctrl + Shift + P on Linux / Windows) and type “size” to trigger the Emmet size script that automatically adds width and height.

You can see it in this screencast:

My setup also warns me when I have images without any alt attribute. It puts a wavy line under any element with a problem like the img tag and shows the error right next to it. I am using two extensions for this: webhint for VS Code and Error Lens.

When you want to save a GIF from Twitter, the interface plays a cruel joke on you. If you context-click the GIF you get a menu that states “Copy GIF address”.

All it does though is copy a link to the tweet with the GIF in it, which is pretty pointless. Under the hood Twitter also converts any GIF to MP4 because it is a much more effective file format.

Knowing this, the easiest way to save the GIF is to open DevTools, go to the Console and type/copy:

window.open(document.querySelector('video').src)

This opens the GIF as a video in a new tab and you can save it there as shown in this screencast:

Of course there are a myriad of web services, Twitter bots and other things that do the same for you and also in more advanced fashion, but I think it is always a very good idea to not trust any service that offers to save protected content from the web for you. I’ve seen far too many malware browser extensions in that arena.