Making Icons Accessible

I’ve been using the excellent Font Awesome for a few years and it’s become part of almost every new design that I do. For a long time I’ve just slapped my icon down on the page, styled it and added a click event where needed. Job done.

Having spent some time looking a bit more deeply into accessibility, I can now see that this is not a great approach. There’s more to consider. If you can’t see it what is it actually doing?

Here’s how I approach using icons now. It may not be the perfect solution but it’s certainly a lot closer than most use cases I see. The way I use HTML depends on the use case.

If the icon is purely decorative – there in addition to text, e.g. a floppy disk icon next to the word “Save” on a button, then I think we can reasonably just forget about it and hide it for non screen users. A simple aria-hidden=”true” attribute should do.

<button><i class="fa fa-save" aria-hidden="true"></i> Save</button>

If it is there as an indicator, in place of a label, like where a hotel might have icons for TV, bath, etc. then we can use an <span> to wrap it. Inside the span we add our icon and another span with a text alternative. We show the icon and hide the inner span for screens, show the text only for other media.

Finally, if the icon is interactive and acts like a link or button, let’s make it a link or button. Like the previous example, use the <button> or <a> tag to wrap the icon and a span text alternative and show/hide for the appropriate media. This has the added bonus of making it possible to tab to the icon and so use just the keyboard to navigate the page. It also handles the icon’s active state and visited in the case of a link.

Alternatively, if you didn’t want to add a span with text inside your button or link, you could use the aria-label attribute to provide a text alternative.

One little tip. If you use an icon inside a link or button, do not leave whitespace between the outer wrapper element and the inner icon as you may get unwanted effects in the styling, such as underlined spaces either side of your icon. Keep it tight.

A New Found Appreciation for Images on the Web

I’ve been putting images in web pages for years. Nearly 2 decades now. For most of that time it has been quite easy. Add your source and the dimensions and BOOM, there you go. There was always some work around optimising images outside of your page but once in there, easy.

Then, with higher pixel densities it started getting a bit harder and we had to work it out with media queries and srcset. Now SVG is widely supported, all this fussing around with different versions for different resolutions has gone away, at least for simple graphics.

I’ve recently been doing some design work on an Android app and it’s a very different way of doing things with images. For example, I’ve created a splash screen for while the app is loading. It’s a full page, wide logo in the centre, coloured background.

On the web, I’d just set the background colour and then centre the SVG logo, probably with flexbox, and use a flex-basis of 80% or some margin to give it a flexible width.

On Android, I’ve had to provide the splash screen image as a series of PNG files. 5 different resolutions, varying from 480×320 up to 1920×1280, and then in both orientations, 10 files in all. The clever part is that at the point of installing the app the Android device will only get the files appropriate for its size and pixel density but it means a lot of messing around with assets.

It’s been a similar story for icons too. Multiple resolutions. You want a different colour? That’s a separate PNG.

I’m making it sound worse than it actually is. Luckily there are great tools that let you import a single image and export all the variations you could need.

But it does make you think about the differences between platforms. To me, the web browser, with it’s ability to resize on the fly, use SVG, recolour, apply filters, transform and animate in CSS makes Android image support feel very primitive.

Opera Neon – First Impressions

Opera Neon is the new concept browser from Opera. What’s a “concept browser”? I’ve no idea but I like new shiny things to play with so have been playing. The Opera Neon webpage will explain it much better than I can but here are a few first impressions.

Opera Neon screenshot

It uses your desktop background as its background. Very clever. All it’s really doing is copying an image but it changes the whole feel. Rather than looking at a start screen with a white background you’re in a familiar environment of your own choosing.

The search bar is for keywords or a URL, which is pretty standard, and the way it’s presented is nice and minimal with just an underline yet obvious.

For your favourite or most recent sites it uses circles with icons rather than screen thumbnails. This makes it feel more like an app start screen, which is quite nice, but I’d probably prefer it to be clearer that they’re shortcuts for the websites. There’s no URL displayed in a tooltip or taskbar when you hover them, which I always like to see as confirmation of where I’m navigating. Maybe I’ve just got that switched off somewhere?

The layout is very interesting. Open tabs are shown down the right hand side as icons. Key actions and areas like open a new tab or show downloads are shown down the left hand side. It’s almost like a typical mobile or tablet view but rotated 90 degrees. This is refreshing and makes a lot of sense. Most websites viewed on a large desktop screen have content within a central column and there’s a load of margin on either side, wasted space. By using these areas for the browser it retains the full height meaning we get to see more content on screen. Big thumbs up from me.

Opera Neon has a built-in snap tool for taking and storing screenshots. It’s a camera icon and a gallery icon. Very easy.

There’s a media player built-in too, so you can listen to music as you browse, which is a neat feature.

The page title seems to be repeated. There’s one at the very top of the chrome but another internal one at the top of the open tab. As these always seem to be the same it feels a bit redundant.

It has dev tools. As it’s blink under the hood these are the same as in Chrome though possibly not quite as fully featured to begin with.

All in all, I’m very impressed. It’ll be interesting to see if it gains market share.

Just for future reference, I’ve been looking at version 1.0.2459.0.

Amazon – design a 4 year old can use was recently using Amazon at home and my 4 year old son joined me. After I’d completed my ordering he asked me if he could have a go. To put this in context he’s at the stage where he can recognise brands (e.g. Tesco, M&S, etc.), his own name and a few letters but can’t actually read other words.

I found it fascinating to observe how he managed to use the site easily despite not being able to read.

Add to Shopping BasketHe clicked the logo taking him back to the home page. On there he saw a product image he liked (Star Wars video game), clicked it. On this page he clicked a play icon to watch a video preview of the game. When that ended he clicked the yellow button with a shopping basket icon to buy it. He then looked further down the screen where Amazon displays other related products – items other customers bought or viewed – and found some Star Wars toys. By following this process of clicking on related products and adding them to the basket he soon had over £300 of toys and video games in the basket. He even seemed to understand the product star rating system.

This speaks volumes about how good the design of this site is.

It can be navigated without any need for reading text. Amazon‘s use of images and dynamically generating related images is superb. The human brain processes and recognises images and icons much faster than it can read text.

It’s obvious how to buy something even to someone with almost no previous internet experience. A clear button which stands out from the rest of the page bearing a shopping basket icon leaves no doubt about how you proceed to buy the product.

One final tip – if you’ve got young children make sure you don’t leave yourself logged in to Amazon or Father Christmas might be back sooner than you’d expect.