SVG images have two main benefits over traditional raster or bitmap images: they can scale to any size without a loss of quality, and they allow for more control over their appearance, such as changing the colour of parts of the image in response to a particular user action.
The Two Types of SVG Background Image
There are two ways to set an SVG background image via CSS, and only one allows any…
Since the initial blog post about my accessibility checklist tool, I've made further improvements which make the tool easier to use and more useful.
Navigating to Previous Steps
The first version was extremely linear, only allowing you to start from the beginning and progress to the next step. Now, you can move back to any previous step by using the link in the main steps outline.
Accessibility testing can be hard and time consuming, especially if you are new to it. The mix of browsers, operating systems, and user-space tools is vast and ever-changing. The WCAG guidelines are the de facto standards for accessibility requirements across the world wide web, but they're not exactly light reading, and they can be difficult for newcomers to fully understand and take in.
If you have a lot of data that you need to convey to your audience you could use a table, but a graph or chart can help convey the same information much more simply and quickly to your readers. However, we need to be careful that the graphs that we create are still available to our whole audience. There are some simple ways that we can ensure this.
If you're developing for the front end, then it's important to understand how to test that what you produce is accessible. Testing across multiple browsers has been part of front end development since the beginning; browsers would always interpret your code in slightly different ways, both small and large. Accessibility testing is no different really, you're just approaching things from a slightly…
With more and more web usage being performed on mobile devices, increasing every year the, now common, hamburger menu is here to stay. One of the main problems that needs addressing is the usability and accessibility of the menu.
A Typical Example
Improving for the Screen Reader
Setting the Expanded State
In a similar theme to last years single div Halloween spooks and ghouls I wanted to create a more detailed and more animated piece for this October: a man who turns into a werewolf at night.
The Base HTML
Adding Animated Transitions
Styling the Labels and the Checkbox
Sky, Sun, and Moon
The Final Result
The Base HTML
The basic concept…
I'm often asked for a list of "quick wins" to make websites more accessible. While I don't always agree with that mindset as it can lead to a lazy approach to accessibility that's tacked on as an afterthought, I do understand that there is a real need for simple solutions that can fix the majority of problems.
Imagine the situation (and I really do believe this is a typical scenario from my experience…
One of the basic rules of accessibility is to not convey information through colour alone. The WCAG lists use of colour as a Level A issue, specifically saying:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
This criterion is aimed at those people with visual disabilities, or problems that have…
I was recently talking with a former colleague about testing for accessibility, and specifically being able to run an automated test over a website to reduce the time needed to test. My answer then was that there is no way to fully automate testing for accessibility; there's no test that exists which can rubber stamp your website and give it passing marks.
But it did give me an idea. Right now,…
Playing around with CSS to create single <div> works of art is, while largely useless for production-worthy code, a lot of fun, especially to see how far a technique can be pushed. In the past I've created CSS Animals and even an animated BB8.
Animating the Eyes
Modal dialogues are a part of the web whether we like them or not, and there's plenty of reason to not like them when they're implemented in a really intrusive way. They do serve a very useful purpose though; they allow extra content to be presented to the user in a way that temporarily breaks out of the normal flow of the page without altering the existing content flow.
For many years, tables were the only tool available to lay out our websites as we wanted to achieve something that went beyond what you'd probably come to expect with your typical word-processed documents. Then for the last decade (or so) we were told that tables were evil, and using them was a sin that would earn us a spot in the 6th circle of IT hell. More recently we've learned that that anti-table…
This experiment blends HTML and SVG to create a menu where you make your own burger by selecting what you want from the menu. To start things off (as I'm really…
In the world of CSS, there is little as fun and challenging as the single <div> challenge. It's a creative idea that's been taken to some impressive lengths by Lynn Fisher of the 'A Single Div' website.
The technique has been picked up by many front-end developers, who have created some amazing works with it, like Sasha's Mike Wazowski, and the wonderfully festive Christmas tree by Ari…
I enjoy playing around with CSS and using it for more than just styling traditional web pages. It lead me to experiment by making a few animals using no more than a handful of HTML tags.
At the core of each is the main containing <div> tag, this operates as the face and the container for the other elements. They generally have the same kind of round shape, which is all just achieved with border-radius…
I set about recreating the effect but with pure CSS, and took it a little further using some SASS to allow it to a varying…
Star Wars is as popular today as it ever was, and the new android BB8 has found many new fans. I thought it would be a perfect object to recreate in pure CSS.
The HTML for this is very simple, a single tag for the head, one for the body, and another to wrap them both and make the CSS more specific when the HTML is placed within another document:
Selectors in CSS are one of the most powerful and useful features you have at your disposal, and yet seem to be little used to its potential. Complex selectors solve the problem of targeting specific elements on a page (and in some browsers, elements that fall under certain conditions as well)
One alternative to selectors which some developers find popular is to give every element that needs to be…
Nested tree menus are often a useful way of portraying hierarchical data, and are most commonly used to display directory trees to a user. Semantically, the best way to create them is with proper list markup. The problem with nested lists, is that, by default, they all have the same amount of padding, which is often annoying for the topmost list item.
What might seem an obvious solution is not the…
CSS Media Types
CSS is a wonderful thing, but most people only ever use it for styling HTML on a regular computer screen. The fact is, CSS has, right from the beginning, had a much wider potential audience. The following code excerpt shows you how you might use alternative stylesheets for rendering your web page on some form of media that isn't a compupter screen:
<link rel="stylesheet" type=…
background-color: #f00 !important;
color: #fff !important;
background-color: #f00 !important;
color: #fff !important;
It can be frustrating sometimes to design a website, only to have the operating systm of a visitor change a bunch of the colours it uses for everything. One annoying example is the text selection colours. Thankfully, CSS can help…