Minimal Accessible Tooltip @ bytes.nz

CSS is Awesome
11/26/2024
Ok. CSS is in an awesome place now. We have functionality, including CSS variables and functions like color-mix() that make writing CSS so compact. Here's what I mean.
- css
- software
Boolean Attributes in Custom Angular Components
12/18/2023
I like clean code so being able to have boolean attributes like required in my custom Angular components makes me happy. To do it however you need an extra bit of javascript.
12/18/2023
Before I loose it again, one of the best references for creating accessible web sites is the ARIA Authoring Practices Guide (APG). It has good examples of how to create some complex components like navigation with submenus and treegrids, as well as best practices.
- accessibility
- software
12/11/2022
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.
- software
- web

Minimal Accessible Tooltip

12/2/2022

Doing a lot of web accessibility fixes, I wondered what would be the minimum amount of code to create a WCAG 2.1 compliant custom tooltip. Unfortunately, it had to include Javascript. Here is what I came up with.

Introduction

Technically, the minimal WCAG 2.1 compliant tooltip is to use the inbuilt browser tooltip you get when you set the title attribute on HTML elements. However, they normally do not meet the criteria in Success Critera 1.4.13 — they are not dismissable or hoverable. This means that you can't hide them with, for instance, the escape key, and magnifier users will not be able to hover over the tooltip to read it.

I was intrigued to find out what was the minimum markup/code required to get a custom tooltip that was fully WCAG 2.1 compliant.

HTML and CSS

I started with just HTML and CSS. Unfortunately, though you can make a hoverable and persistent tooltip easily, it is not dismissable. So close…

The code below shows the minimum required HTML and CSS for creating the almost compliant tooltip. I have also put a demo of the code on CodePen.

It uses the tooltipped class to distinguish elements that have a tooltip and the role="tooltip" global attribute to distinguish the tooltip itself. Note the tooltip is contained within the element that has to tooltip. Also, as I have used a div for the tooltipped element, I have put a tabindex="0" attribute on the div so that it is focussable.

HTML and CSS for creating an almost compliant tooltip

<html>
  <head>
    <style>
      .tooltipped {
        display: inline-block;
      }

      .tooltipped [role=tooltip] {
        display: none;
      }

      .tooltipped:focus-within [role=tooltip],
      .tooltipped:hover [role=tooltip] {
        display: block;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="tooltipped" tabindex="0">
      Has tooltip
      <div role="tooltip">
        A tooltip
      </div>
    </div>
  </body>
</html>

HTML, CSS and Javascript

The only way I could think of to do it, was to additionally use Javascript to handle the events around the tooltip.

Below is the minimum code required to get a fully compliant tooltips. I have also put a demo of the code on CodePen.

Instead of using CSS for showing and hiding the tooltip, Javascript attaches event listeners onto all the page tooltips to handle the opening and closing of the tooltips. An additional keyup event listener is used to close the open tooltip if the escape key is pressed. I added a slight tweak on the mouseleave event so that if the element also has keyboard focus, the tooltip won't be closed when the mouse leaves the element.

HTML, CSS and Javascript for creating a fully compliant tooltip

<html>
  <head>
    <style>
      [role=tooltip] {
        display: block;
        position: absolute;
        background: #eee;
        padding: 5px;
      }
    </style>
    <script>
      /**
       * Add event listeners for handling tooltip functionality
       */
      const initialiseTooltipped = () => {
        const tooltips = document.querySelectorAll('.tooltipped');
        
        let shownTooltip = null;
        
        // Add event handler for closing open tooltip on escape key
        document.addEventListener('keyup', (event) => {
          if (event.key !== 'Escape') {
            return;
          }
          
          if (shownTooltip) {
            shownTooltip.style.display = 'none';
            shownTooltip = null;
          }
        })
        
        for (let tooltipped of tooltips) {
          const tooltip = tooltipped.querySelector('[role=tooltip]');
          
          if (!tooltip) {
            return;
          }
          
          /**
           * Show/hide the associated tooltip
           *
           * @param {boolean} [show] Whether to show to tooltip.
           *   Defaults to true
           */
          const showTooltip = (show) => {
            if (show === undefined) {
              show = true;
            }
            if (show) {
              tooltip.style.display = '';
              shownTooltip = tooltip;
            } else {
              tooltip.style.display = 'none';
              shownTooltip = null;
            }
          };
            
          // Add handlers to tooltipped element
          tooltipped.addEventListener('focus', () => showTooltip(true));
          tooltipped.addEventListener('blur', () => showTooltip(false));
          tooltipped.addEventListener('mouseenter', () => showTooltip(true));
          tooltipped.addEventListener('mouseleave', () => {
            if (document.activeElement !== tooltipped) {
              showTooltip(false)
            }
          });
        }
      }

      // Call initialiseTooltipped once the DOM has loaded
      if (document.readyState === 'loading') {
      	window.addEventListener('DOMContentLoaded', initialiseTooltipped);
      } else {
        initialiseTooltipped();
      }
    </script>
  </head>
  <body>
    <div class="tooltipped" tabindex="0">
      Has tooltip
      <div role="tooltip" style="display: none">
        A tooltip
      </div>
    </div>
  </body>
</html>

Day-to-day with Librem 5
11/28/2022
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.
- librem5
11/28/2022
If you are wanting to apply accessibility labels onto an image, here are the label (alt, title, aria-description, aria-label) priorities (highest first): aria-description (with aria-label, alt or title); aria-label; alt. Note aria description does not get read out if there is no other label attributes. (Tested on Windows, NVDA, and Firefox and Edge).
Email dates in Javascript
11/24/2022
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
- software
- javascript
Visibility and CSS Accordians
11/24/2022
When changing a reworked menu to have accordian animations, I came to the realisation that I have been missing a big issue when using max-height transition animations — accessibility. I detail a simple fix in this article.
Can't touch list
11/24/2022
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.
New Zealand Low Power Networks (LTE-M & NB-IoT)
10/14/2022
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.
- electronics
- software
JS Binary Decoder
10/11/2022
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.
- software
- javascript
Starting with ESP32
2/7/2022
I started developing my trap-watch project on an ESP32-CAM using the ESP IDF. Here is the newbie difficulties I ran into.
VIM Window Rabbit Hole
2/4/2022
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.
- linux
Parsing Arguments in Bash
1/28/2022
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 getopt
- linux
Where's my bait gone?
1/8/2022
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.
Bathymetric Contours
3/26/2021
Finally got around to creating a SLD style for GeoServer to display bathymetric contour lines using the GEBCO gridded bathymetric data. Here's how.
shm That Cache
2/25/2021
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.
Blob blob blob blob Stayin' Alive Stayin' Alive
2/2/2021
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.
A new Litter Survey
12/25/2020
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.
Hoe Stream Trash
12/14/2020
My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.
Release the Beast
11/24/2020
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.
Gitlab CI Caching
9/30/2020
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.
- gitlab
- continuous integration
Birthday Trash
9/22/2020
As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.
Pi Trash Cam
9/13/2020
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.
yarn add --dev webdriverio
8/25/2020
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.
8/16/2020
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.
- software
- blog
Removing EXIF Data from Photos
8/9/2020
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.
- exif
- photos
tmux List and Reattach
8/9/2020
Using tmux for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it.
Selectable Shell Examples
8/8/2020
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.
Be Dates You
8/5/2020
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.
- mongodb
- docker
Testing vue components
7/8/2020
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.
No More Numbers
2/20/2019
HTML5 number inputs aren't useful, but tel inputs, have all the power
A Hacker "Hacked" Me
12/21/2018
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.
Mouse Surgery
12/7/2018
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.
- pledge to not upgrade
- electronics
Danger Danger, Highly Reactive
10/29/2018
Switching to SSR
9/11/2018
Clean Docker Registry
8/10/2018
Testing on the Filesystem
2/1/2018
- testing
- javascript
Tag You Are
1/26/2018
- javascript
- tags
NaN Got Me
1/25/2018
All our app's tabs are belong to us
4/28/2017
Developing NPM modules
2/20/2016
- nodejs
- npm
Nfa + Nfb or N(f+fa+fb)
2/20/2016
Photo Layout
10/31/2015
Browning Pass HideAway Web Site
10/31/2015
Think Mobile
10/17/2015
- mobile
- web
Pledge to Refuse and Not Buy Bottled Water
10/13/2015
- environment
- pledges
Run PHP run!
2/25/2015
Gallery Hierarchy
11/26/2014
Vim and functions
10/3/2014
I'm making hierarchies
9/26/2014
Google Sheets fun
9/4/2014
Travel Photos
8/13/2014
Image managment scripts
8/13/2014
- photo management
- photos
MeldCE logo
7/31/2014
MoltenDB
4/26/2014
The Expensive Side
10/29/2013
- house
abcde
9/22/2013
- music
Energizer Power Plus Rechargeable Batteries
7/16/2013
- gadgets
USAR FOGTeX
3/4/2013
- fogtex
Personal Gear Bag
2/21/2013
- rescue
- gear
Geocaching Stamp
2/18/2013
- stamp
- geocaching
Call Record Presenter
4/2/2007
Kimi Ora School
9/25/2004
- css
- html
All About Catering Web Site
6/25/2004
- css
- html
Quantum Accounting Web Site
7/26/2003
- css
- html