Latest articles https://simonblackbourn.net Kirby Tue, 10 Jul 2018 00:00:00 +0000 Posts by Simon Blackbourn Highlighting images with missing alt tags https://simonblackbourn.net/blog/highlight-images-missing-alt-attribute blog/highlight-images-missing-alt-attribute Tue, 10 Jul 2018 00:00:00 +0000 Every image on your website should have an alt tag (pedantically speaking, it's actually an alt attribute, but it's widely known as alt tag).

Here's an example:

<img src="sunset.jpg" alt="Sunset over Dartmoor">

Why are alt tags needed?

Alt tags are a crucial accessibility feature used by screen readers to describe images to visually impaired and blind users. Without alt tags, those people will not know what your images are. They will have a substantially degraded experience of using your website, so may not return.

Missing alt tags will cause your website to fail various accessibility standards, such as WCAG (Web Content Accessibility Guidelines). In many countries, if your website is in certain sectors (e.g. government or public sector), meeting accessibility standards is a legal requirement.

What about decorative images?

If an image is purely for decorative purposes, it has no editorial purpose whatsoever, then the alt text is not needed. However, the alt tag must still be present, but you should set it to be empty:

<img src="image.png" alt="">

Using CSS to highlight missing alt tags

Add the following one line of CSS (which utilises the very handy :not selector) to your website's stylesheet. It highlights all images without alt tags by adding a bright red, dashed border to them:

img:not([alt]) {border: 4px red dashed !important;}

Bear in mind that if you use this on your live website all your visitors will see it!

An image with a dashed red border

WordPress plugin

When adding images to posts and pages in WordPress, it's all to easy to forget to add the alt text, so I've written a WordPress plugin to highlight images with no alt tag. The highlight is only shown to logged in administrators, your regular visitors won't see anything, so you can safely use it on your live website.

Download the WordPress plugin

The plugin is on GitHub at the moment, I'll submit it to the WordPress plugin repository and update this post with the link when it's available from there.

Other tools

My favourite tool for accessibility testing is Pa11y. It's a command line tool that gives all sorts of useful information about the accessibility of your website, including missing alt tags, text contrast, missing input field labels, and lots more. You pass in your website URL and it outputs a list of warnings:

pa11y https://example.org

Axe does a very similar job, it's a question of personal preference.

]]>
Setting the title bar colour in VS Code https://simonblackbourn.net/blog/vs-code-title-bar-colour-macos blog/vs-code-title-bar-colour-macos Mon, 25 Jun 2018 00:00:00 +0000 Workspaces are an incredibly useful feature of VS Code, especially if you are working on multiple projects. A workspace can contain one or more root folders that contain your project's code; VS Code will remember the state of the workspace on startup, such as which files you had open, the position of the cursor, etc.; and you can enable and disable extensions on a per-workspace basis.

The problem

It can be difficult to tell at a quick glance which workspace you've currently got open. And if you have multiple windows open, each for a different workspace, it's hard to differentiate them.

In the screenshot below, the only thing that tells us which workspace we're in is the name appended to the filename in the title bar.

Screenshot of a VS Code workspace with the default uncoloured title bar

The solution

Note: Unfortunately this solution is currently only supported in VS Code for MacOS - sorry Windows and Linux users :(

VS Code has a couple of settings that allow you to specify the title bar background and foreground colours on a per-workspace basis, so that each workspace is visually distinct. By using a different colour for each of your workspaces, you can instantly see which one you're currently in.

Here's the same workspace as above, but with a coloured title bar:

Screenshot of a VS Code workspace with a bright red title bar

How-to

The title bar colours are defined in the workspace settings (which override your user settings). Open up the command palette and find Open Workspace Settings (or type ⌘, then click the Workspace Settings tab).

You can see your workspace folder path(s) in the folders option, then a settings option (which may or may not be empty). Within the settings section, add a workbench.colorCustomizations option with four sub-options like this:

{
    "folders": [
        {
            "path": "/path/to/my/workspace/folder"
        }
    ],
    "settings": {
        "workbench.colorCustomizations": {
            "titleBar.activeBackground": "#d12229",
            "titleBar.activeForeground": "#ffffff",
            "titleBar.inactiveBackground": "#811519",
            "titleBar.inactiveForeground": "#cccccc"
        }
    }
}

View on Gist

I tend to use a bold colour taken from the theme of the website I am working on for the active background, with either white or dark grey for the text colour, whichever is most readable. VS Code provides a handy colour picker when you click on a hex colour code, so adusting the colours is easy.

The inactive colours are used when the VS Code window is not currently focused. For these I darken both colours slightly, just enough to show it's unfocused but still recognisable as that workspace. If you are happy with the same colours for active and inactive, you can delete the two inactive options.

]]>