Blog
-
Creating Accessible Flowcharts
I've written before about how to make accessible graphs and charts, but one type of chart I didn't touch upon was a flowchart, which is different enough that it really warrants a bit more detail explaining how to best make it as accessible as possible. Contents Main Accessiblity Issues with Flowcharts The Initial Concept Identifying and Grouping Question and Statement…
-
Making Accessible Icons on the Web
Icons on the Web are a natural extension of their use across computer systems since the early graphical user interfaces (GUIs) came about. For over 50 years, we've been using icons to summarise information in picture form, giving users ways to quickly identify objects and actions in order to make their tasks more efficient. But while the focus has always been on the graphical nature of these icons…
-
Building a Dungeons and Dragons Game
I'm a big fan of Dungeons & Dragons, and have been for years, first playing the book adaptions of the game, before moving on to the group tabletop version and the computer games based on the tabletop rules. The recent success of Baldurs Gate 3 has seen a surge in the popularity of the genre. I wanted to take this passion and turn it into something creative using my skills as a developer. Contents …
-
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…
