Blog
-
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…
-
Building a Toy Kitchen with Arduino-Powered Interactivity
Last month was my eldest sons second birthday, and like all kids of that age, one of his favourite things to do is copy what he sees myself and my partner doing: cooking. Building the Kitchen Frame The Electronics The Code Setup The Logic The Future I'd decided I wanted to make him a tiny kitchen of his own, something I've done several years ago for my niece, in…
-
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…
-
Using preg_replace_callback() - Find Replace on Steroids
The preg_replace_callback() function in PHP is one of the many regular expression functions available in the language, and can be incredibly powerful as they offer far more versatility when replacing matched text. I recently wanted to use it to implement a very basic templating class. This function goes beyond the preg_replace() function which is just a standard regular expression find/replace.…
-
Using Local Storage to Cache Images
I was recently working on improving the performance of a web page that pulled in a large dynamic list of images, and displaying their respective thumbnails on the page. Even with caching, the entire set of images took a considerable amount of time to fully load on the page. Enter the local storage API. What is Local Storage Storing Items for a Finite Duration Fetching Items Stored as JSON Aging…
-
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…
-
Formatting File Sizes For Other Languages
Whenever you're dealing with files on the web, you'll likely come to a point where you need to display the size of that file, whether it's to show the size of an attachment on an email, or on a list of downloads for your own Linux distro. Now it might suit your purposes just fine to leave this in English, but if you're trying to venture out into new worldwide markets, you may want to format the…
-
The Problem With Accessibility Events in iOS 12.2
My Twitter has been aflame this week with people Tweeting about a recent update from Apple which introduces a new feature called Accessibility Events in iOS 12.2. Their reason is to: allow websites to customize their behavior for assistive technologies, like VoiceOver. Enabling Accessibility Events may reveal whether an assistive technology is active on your iPhone. This might seem like a positive…
-
Screen Readers and Pronunciation
Screen readers are an essential tool for people who are unable to see, or who struggle to read. Sometimes though, a screen reader needs some extra help, as it can struggle with the right pronunciation of a word, name, or abbreviation. There are things we can do to help nudge screen readers in the right direction in a way that doesn't break the user experience for other people. Contents The…
-
Emoji and Accessibility
I was recently in a discussion with Adrian Roselli on Twitter regarding his tweaks to a technique to make emoji more accessible. His advice highlights some accessibility issues with the typical emoji usage that permeates our social media, our blog posts, and our instant messaging tools. Contents The Problems with Emoji What Emoji Got Right for Accessibility How Can Emoji be Accessible? Choosing…
-
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,…
-
Testing Popstate Events with Jasmine
I recently implemented some browser History API functionality in a project, and part of this was using popstate events to handle application state when the user navigated with their browsers navigational buttons. The problem was when it came time to write tests to cover this functionality, because I was writing in TypeScript, which is a strictly type language, and the version of TypeScript I was…
-
How Readable is Your Content?
The readability of your content is one of the most important accessibility issues you will encounter, but is often one of the least thought about. Readability affects everyone who browses the Web, and can mean the difference between retaining or scaring your site visitors. What is Readability? The readability of your content is how easily understood your content is. One of the most useful measures…
