Blog
-
Colouring SVG Background Images With SASS
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…
-
Improvements to the Accessibility Checklist Tool
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. This…
-
Making Testing Easier: An Accessibility Checklist
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. What Do…
-
Accessible Graphs and Charts
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. Contents Text Alternatives Alt…
-
Accessibility Testing for Developers
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…
-
Making an Accessible Hamburger Menu
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 Keyboard Handling Showing Focus Improving for the Screen Reader Setting the Expanded State …
-
CSS Werewolf
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 Sun Moon The Werewolf The Final Result The Base HTML The basic concept…
-
10 Simple Steps Towards Accessibility
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…
-
Testing Colour Blindness Effects Online with SVG Filters
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…
-
Building an Accessibility Browser Plugin
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,…
-
One Div CSS Halloween Spooks and Ghouls
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. Contents Ghost Gravestone Pumpkin Frankenstein's Monster The Head The Neck Animating the Eyes Conclusion …
-
Accessible Modal Dialogs
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. Contents What Should…
-
Accessible Tables
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…
-
Interactive Burger Menu with SVG, CSS and no JavaScript!
CSS goes far beyond being just a styling language for HTML, allowing you to style any XML based language too. This includes SVG documents, which becomes a powerful tool for achieving some great affects without the use of JavaScript. 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…
-
Single Div CSS Mona Lisa
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…
-
CSS Zoo
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…
-
A Better Radial Menu With Pure CSS
I recently saw a Pen on CodePen with an animated menu using blend modes. The overall effect was quite nice, but I noticed it was relying on JavaScript to toggle the animation, and as an example it wasn't particularly flexible, as those values were tied into the 5 items shown. 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…
-
Pure CSS Star Wars BB8
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: <div class="bb8"> <div class="head"><…
-
Pure CSS Tree Menu
The new selectors in CSS3 are very powerful, and allow for some interesting ways of creating interactivity on a website that doesn't rely on JavaScript. Typically, a lot of these new techniques are available in the majority of web browsers being used with the obvious exception of IE up tp and including 8, which limits their usefulness when compared with current JavaScript solutions, but that shouldn't…
-
Getting the most out of CSS selectors
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 Lists with Overriding Styles
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 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=…
-
Change Selected Text Colours
::selection { background-color: #f00 !important; color: #fff !important; } ::-moz-selection { 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…
