Buttons must have discernible text

You may of come across the rule “Buttons must have discernible text” when running accessibility audits or using automated tools such as axe-core.

The rule is a relative simple rule, and in most cases (depending on your site) a small fix. The simplicity of the rule is something you need to account for if you are using automation tools, or running automated audits.

By nature of the rule the pass criteria for is very simple – does a button have a discernible text value. Let’s take the axe-core information on what would allow for this rule to pass for a button –

  • Inner text that is discernible to screen reader users.
  • Non-empty aria-label attribute.
  • aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true".
  • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1").

Those points are straight forward, using either one of the different techniques ensure the button has discernible text – Pass!

Now lets look at some example code (The SVG isn’t complete as the path value was removed to keep it short – the SVG in the example below is of the twitter bird icon/logo)

  <button title="twitter" type="button" class="shareButton">
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path></path>
    </svg>
  </button>

We have a button that has the twitter icon within it – so it’s a icon button that as you may of noticed with the class name it is a share button. A typical scenario for a lot of websites these days, providing a button near the article or page showing the icon of a social network that allows you to quickly share the content.

So the example passes all automated tests. Which is good and bad, yes there is the added title attribute to provide the button with a text value. But the primary issue here, and that goes for relying on automated tools alone is context – the tools are unable to determine the context of the element and if the text is going to provide any meaning the user.

Some possible better values of the title attributes that could be used –

  • Share on Twitter
  • Share current [page/article] to Twitter
  • Share [article title] on Twitter

The first two would be pretty simple updates to make, the third could be a little more tricky depending on the way the site is built and the share buttons are built – but it’s not an unreasonable ask.

The updated version of what would still pass all the test but also provide a more meaningful text value to all.

  <button title="Share Buttons must have discernible text article on Twitter" type="button" class="shareButton">
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path></path>
    </svg>
  </button>

If you have run a lighthouse audit with the accessibility option enable you may of come across the following –

Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged

This highlights the need for manual testing – but just because something passed an automated test it doesn’t mean it’s correct. It’s always worth manually testing your entire site and also using real users. Ensuring the passed tests are valid and make sense within the context of your site.

Sass – the irresponsible loops

As Uncle Ben says

With great power comes great responsibility

Pre-processors are pretty popular these days for writing CSS, the enhancements they bring to CSS authoring is a great addition even if it’s just for variables (yes I know of CSS variables). There are also a ton of other features available in such tools.

One such great item is the ability to write loops, for those not familiar with loops in programming they provide the ability to write code that repeats the block of code within the loop multiple times based on a set of conditions. That’s a pretty basic explanation, and loops can provide great power for repeated tasks.

With that last point, “great power for repeated task” – With Sass this can also mean extra outputted CSS. Which can lead to increased CSS file size. In the grand scheme of things may not seem to be that big of a deal but this can lead to extra bandwidth being used by end users, less performant websites, etc.

Example with output within a loop

Here we have a two font variables that we are generating helper classes for using a simple loop. Seems simple enough. But when you look at the output. It may simple obvious on what it may be – we get an output for each loop item.

Loop with placeholder and @extend

By utilising a couple more of Sass feature (yes we write more Sass for less CSS) we can update the code to reduce the complied CSS. By using Sass placeholder selectors and the @extend at-rule we can update the loop to just extend a placeholder. By default the Sass placeholder selector will not output itself, you have to use the @extend at-rule to. For each time you use the @extend inside a selector it reuses the placeholder styles and adds the selector to the list as shown below

 

With any pre-processors or tool you are using to generate the items you are serving to you end users. You should, You must pay attention to the generated output. Something that may seem inconspicuous could turn out to be doing more than you expected.

Valid ALT text?

Tip: highlight images missing alt text with img:not([alt]) pic.twitter.com/zgjdE5iTU6 — Addy Osmani (@addyosmani) February 2, 2020 This tweet the other day from Addy Osmani showing some CSS on how to highlight images on a page with no alt attribute got me thinking. Addy’s tip is great and shows how developers can provide guidance within the…

2019

Another year goes by… and as I think back on the year there were some ups and downs. We went on our first “proper” family holiday – We went to Disneyland Paris for 4 days during the summer. Would not of been my first pick, but with two young children it made sense and it…

HTML, CSS and netlify

Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more. I’ve been looking for a small project/excuse to use netlify for a little while now, and then something came along this week that seemed like the perfect place to be able at least try it without and…

Subscribing to RSS

I was a big fan of Google Reader then it got shutdown in 2013 (6 years ago!). After Google Reader shut down the RSS Reader world was limited, I even built my own to settle my needs for consuming sites via RSS, that lasted for a few years before I shut it down. After shutting…

National Three Peaks Challenge

Towards the start of the year, Mark the owner of the gym I go to mentioned he was planning to do the Three Peaks Challenge for charity and was wondering if I and a couple of the other people from the gym would do it too. I wasn’t 100% sure at first, a little bit of…

2018

2018 was a big year for some personal items most notably purchasing our first house, a little late getting on to the property ladder, the last decade or more it’s been increasing hard for first time buyers, finally we managed to do it and it’s been amazing to really call a place home, and put…

10 Years

10 years ago, December 19th 2008 — I married the love of my life, and I promised her I would take her to New York one day. As the years passed by it started to feel a lot like Carl and Ellie’s story, an adventure that kept us both going. Next year we will go… Life…

Logitech Unsubscribe “at any time”

When making a purchase recently from Logitech directly I encountered some bad auto subscribing to their marketing emails, that did not allow the user to un-subscribe at the time of making the purchase, but they did have some text telling you that you could un-subscribe at any time… Appears it means anytime just not right now….

2017 Perseid Meteor Shower

First time out to watch the Perseid Meteor Shower, also the first time taking photo’s of the night sky. After reading around during the afternoon of some general settings that should be used we set out around 9:30 PM into AE Forest to a Loch to set up camp for a few hours to see…

Micro.blog Desktop

I’ve been using micro.blog for a few weeks now. The new way of posting and owning my own content is growing on me and I am really enjoying posting to my own site again. One thing I found was I wasn’t really interacting much during the day, I put this down to not having a…

Micro.blog – My initial thoughts

First and foremost, I’d like to thank Manton for creating Micro.blog, and more important thank him for all the hard work he’s put in. Even more this past week during the lunch. It can not be easily launching something like this and not have some teething problems, and he’s always been around to answer people’s…

UI Testing with Nightwatch.js – Page Objects

I have already written a little about UI testing with Nightwatch.js. This was a little while ago and nightwatch.js has changed a little since then. In v0.7.0 they changed their implementation of page objects and added enhanced support. Nightwatch is a great framework for writing UI tests, and it easy to pick up an write some…

Hobonichi Techno Planner 2016

Back towards the end of 2015 I saw a lot of people posting about the Hobonichi Techno planner. Around the same time I was looking at diaries, notebooks and planner to keep track of my year. The plan was to start writing more by keeping a diary. Writing something whether it be a random thought…

Waterstones – The Online and the High Street

Just ike me, my wife loves to read, and she loves to read real paper books even after all my efforts to switch her 100% to the e-book world. While I read primarily things related to the future of AI, which can positively affect my business, my wife is more of an intellectual reader. Although…

Working the command line

Last week A Book Apart, released a couple of new brief books. For anyone who has read any of the A Book Apart books you could call them all “brief” books, but these are about half the size of the regular books. I have quite the collection of the books from them (not all), and…

Quickly snooze all notifications in Mac OS

Been on a conference call and heard notifications going off, or ever been giving a demo of something via screen share and had notifications popping up on the screen? Or even have your next meeting notifications keep popping up from your calendar application. Yep! It’s pretty annoying. I find it more annoying from the receiving…

What password would you like to use?

As the move towards using the internet has increased over the last few years, people are creating more and more accounts. Accounts for this credit card, accounts for this store card, you’re mobile phone account, you’re bank account, and all the rest. The accounts I just mentioned there are one’s a lot of people will…

A non recruiter, recruitment agency

  RESPECTFULLY, NO RECRUITMENT AGENCIES PLEASE No recruitment agencies. How many job ads do you see with this words at the bottom? or at the top? I don’t have actually figures but it’s a LOT! Yes, recruiters get a bad name. I can imagine a lot of you if not all of you have had…

The new MacBook Pro’s

It appears the dust has started to settle after Apple’s latest event where they released new MacBook Pro’s. After posting some initial reactions from their announcement to Twitter I’ve sat back and had a little think of the announcement from a new techie point of view. I bought a brand new 13 inch MacBook Pro…