Minimal Accessible Tooltip
Please! Stop with the mobile web sites! If you are using browser agent strings to change your CSS/layout don't! Use responsive CSS instead. There are other situations when you need a small window and devices that have a small screen where your web site does not work.
After quite a few years of waiting, I finally got my Librem 5 phone. I am now using it as my primary phone… using my work phone as a back-up. Here are the issues and whether I think using it as a primary phone is a good idea so far.
If you are wanting to apply accessibility labels onto an image, here are the label (
aria-label) priorities (highest first):
aria description does not get read out if there is no other label attributes. (Tested on Windows, NVDA, and Firefox and Edge).
Javscript is missing functions to format dates in some common formats, such datetime-local inputs and RFC 5322 (email dates) in a non-obsolete way. While Date.toUTCString() is close, the timezone is now obsolete (though it is handy for HTTP Date and other such headers). Here's the basic functions to get the right formats
When changing a reworked menu to have accordian animations, I came to the realisation that I have been missing a big issue when using
transition animations — accessibility. I detail a simple fix in this article.
Turns out screen readers really don't like you playing with the
display CSS property on lists, for example to change it to an inline list — it will cause lists items to be read like a paragraph. Here's how to do without upsetting the screen readers.
I have started experimenting with low power wide area networks (LP-WAN) in New Zealand using a u-blox SARA-R410-02B. Here is what I have experimented with so far.
I have recently been dealing with parsing binary data packets from various sources, and have published two NPM libraries from it: binary-decoder and sbd-direct-ip. Here's how they came to be.
I started developing my trap-watch project on an ESP32-CAM using the ESP IDF. Here is the newbie difficulties I ran into.
Developing ESP-IDF components I thought it would be great if I could make a command to open all the files for a component at once. What a rabbit hole it was. Here is how I did it.
Making a script parse arugments in Bash took me way too long last time I did it, so here is a nice full example of how to do it using
I have recently started trapping some introduced predators around my local area and have had baits and pre-feed disappear with nothing to show for it, so I decided to get sparky and see if I could catch the culprit in the act.
Finally got around to creating a SLD style for GeoServer to display bathymetric contour lines using the GEBCO gridded bathymetric data. Here's how.
I am often trying to find more space on my hard drives and found today my own docker containers wasting space thanks to ! Here's how I fixed it.
Upon recently trying Deezer again, I found their web app ate all my memory when running in Firefox, so I decided to see if I could find out why. I got as far as memory-file-data/string and Blobs. Here's how.
In a culmination of litter surveys and litter picks, linked data and data exploration, and remoteStorage and ActivityPub, I have created a web-based litter pick/survey app that I hope will allow federated citizen science.
My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.
I just created a Gitlab CI job to create a release with information from a CHANGELOG.md file for some of my projects. Here's how I did it.
I noticed something strange happening during build process during a multi-tasking bug fix. Turns out I was using Gitlab CI's caching incorrectly. I should have been using artifacts. Here's what I saw.
As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.
In preparation for a day of litter picking, I finally got round to a project idea - attaching a camera to a litter picker to record it all. Here's what I did.
I finally started implementing UI testing on first-draft using WebdriverIO. While writing tests was easy, getting the tests running was a little more difficult. Here is how I did it.
Hooray! My new blog is live! Based on Sapper, using MongoDB and eventually ActivityPub and ActivityStreams, it will be my federated posting hub to the world.
Creating this new blog, I wanted to make sure there was no metadata data leaking personal information. Here's how I removed all the metadata tags except the ones I wanted from my photos.
tmux for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it.
Here's how to help your readers save time by making your post's shell commands easy to select and copy - with a simple CSS property.
Making my new blog, I didn't initially set the published dates to be native dates in the database. Here what I did to change them …and do all the upgrades I needed.
I recently needed to test that some Vue components were creating the correct HTML. To do this, I decided to create snapshots of Object representations of the rendered HTML.
HTML5 number inputs aren't useful, but tel inputs, have all the power
I decided to look into the extortion emails I have been getting and wrote a small script to extract the bitcoin addresses that have been used.
As part of my pledge not to upgrade, I decided to repair two of my failing mice instead of replacing them with a brand new model (as tempting as it was). Here's what I did.
Good mobile web sites are currently few and far between. Most web sites don't have a mobile web site, so people accessing the site, be it current or potential customers, or people seeking information, have to navigate web sites built for large screens and mice. This can involve a lot of scrolling, zooming in and out and frustration with menus that require you to be able to hover over a button. Most web sites that have got a mobile version have got a mobile specific web site that has very limited information on it, sometimes very outdated leaving people forced to be sent to the "full version" web site to find the information that want (if the mobile site allows them to).
With the technology available today, it is very easy to make a web site "responsive" for mobile devices. Long gone are the days of requiring a very minimised version of your web site for tiny screens with no bandwidth. I am strong believer that no web site needs a mobile-specific version of their page (or a mobile app for that matter) and hopefully this post will give why and how a one-for-all web site can be achieved.
When the Internet first came to mobile phones, bandwidth was almost non-existent and phones were designed to be phones rather than the portable powerhouse of today.
The Wireless Application Protocol (WAP) and the WAP Browser was the way to button press your way through the Internet. WAP sites were specially crafted and very minimal.
As bandwidth increased and screens got bigger and touchable, the WAP protocol quickly vanished and access to real web sites became a thing of everyday. However, the evolution of touch and bandwidth weren't quite synced so along low bandwidth "mobile" web sites designed specifically for mobile phones. These sites normally had a fraction of the content of the normal web site and was designed a few specific uses, such as checking the weather at the local mountain.
In the realm of HTML (the code of the actual contents and structure of each page of a web site), HTML 5 offers better ways of creating graphic-intensive web sites without requiring add-ons, such as Adobe Flash, Shockwave and Microsoft Silverlight.
In the realm of CSS (the code that makes each page look the way it does), CSS 3 offers the ability to customise the look of a site for different media (print, screen and speech) and for different resolutions (the number of dots or pixels making up a screen) all in a single "responsive" stylesheet.
Gone are the days of not having a mobile site or having a dedicated web site - if you want to exist on the Internet, you have to have a web site that is capable of being displayed on the "old" computer and mobile devices. If you don't, you don't exist (at least in Google's eyes).
So what does this mean? Well, not much needs to change, you just need to be a little smarter.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Whitewater Ski Resort is an O for awesome ski hill in the Kootenays, British Columbia, Canada and their web site(s) are a good example of the separate page for mobile devices. Their mobile web site (skiwhitewater.mobi) is a different site from the one you visit on a device it determines as a desktop. It is only helped by its content management system (Drupal), that is able to load the same data onto both web sites. The navigation is completely different on each site though, so if you get used to the desktop site, you will find it difficult to find the same information on the mobile web site.
Mountain Equipment Co-op is a great outdoor equipment store in Canada (one that quickly became my outdoor supplier when we were in a town that had one). Their mobile web site (bar a few occasional glitches) is perfect. It is their normal web site, but with responsive CSS to make it fit and work on a mobile device - exactly what everyone should aim for. Everything is available and easy to navigate to. What's better is MEC offers free WiFi in store so you can browser their site while browsing their store.
Mobile site, non existent. Desktop site on a mobile device… don't even bother trying. This is the perfect example of something that could be easily transformed, but just hasn't.
I believe that for most web sites, making it work perfectly on a mobile device is a quick and easy fix, so much so, that if you have a web site that isn't mobile ready (or have a dedicated mobile web site that you want to get rid). I am willing to have a look at for you and make it mobile friendly for $100 (some exclusions apply). Feel free to contact me if you would like me to have a look at your web site.