Blog
-
Picking The Right HTML Tag
Picking the right HTML tag can be difficult sometimes, which is probably why most of us tend to fall back to the generic <div> and <span> tags. Over time, this practice leads to Divitis, which makes code harder to read on more complex pages and it makes the web page less semantic, making it more difficult to navigate with assistive technology like screen readers. In-fact, ensuring we're…
-
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…
-
Teaching Children with the Speech API
My eldest son is in the process of learning the alphabet, so I thought I could put my skills to use by helping him learn using two of the things he loves most: mobile devices and Mario! Like all 3 year olds, he loves technology, and we use it as an incentive for many things, from general good behviour to potty training. I've been incredibly impressed with how well he's taken to using a Switch and a…
-
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…
-
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,…
-
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…
