Tag: testability

What are the ARIA roles & accessible names for HTML Elements?

testing-library/jsdom and testing-library/react expect you to find elements on your page using two things:

  1. An ARIA role
  2. An ARIA accessible name, which can and should be a human-readable piece of text such as Your Name, not an html id like your-name.

This pushes you to use ARIA. But it is said that no ARIA is better than bad ARIA, and in any case it's all very confusing unless you learn a minimum about how HTML Elements get their roles and accessible names.

A Passing Test

Copy and paste this into a react project to see the role and accessible names for a small form. (See testing-library's intro example for how to do it in vanilla html)


import React from 'react';
import {fireEvent, render, screen} from '@testing-library/react';

test('Example role and accessible names', ()=>{

  render(<form data-testid='form1'>
    <fieldset>
      <legend>Form Alpha</legend>
      <label>Search : <input type='search' value="something" /></label>
      <label><input type='checkbox' /> In Stock Only</label>
      <button>The Go Button</button>
    </fieldset>
  </form>)

  const fieldSet= screen.getByRole('group',{name:"Form Alpha"})
  expect(fieldSet).toBeVisible()

  const searchBox=screen.getByRole('searchbox', {name:/Search/i})
  expect(searchBox).toHaveValue('something')

  const checkBox=screen.getByRole('checkbox', {name:/in stock only/i})
  expect(checkBox).not.toBeChecked()
  fireEvent.click(checkBox)
  expect(checkBox).toBeChecked()

  const form=screen.getByTestId('form1')
  expect(form).toBeVisible()
})

Some of this you could have guessed and some of it you couldn't. Here is my take on the minimum you want to know to to take out most of the guesswork.

What Role and what Accessible Name do my HTML elements have?

HTML element roles

You can get a quick idea of roles just by looking at some of the defined ARIA roles:

  • article, banner, button, cell, checkbox, columnheader, combobox, command, comment, complementary, composite, contentinfo, definition, dialog, document, figure, form, generic, grid, gridcell, group, heading, img, input, landmark, link, list, listbox, listitem, log, main, mark, marquee, math, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, meter, navigation, option, presentation, progressbar, radio, radiogroup, range, region, roletype, row, rowgroup, rowheader, scrollbar, search, searchbox, section, sectionhead, select, separator, slider, spinbutton, status, structure, suggestion, switch, tab, table, tablist, tabpanel, term, textbox, timer, toolbar, tooltip, tree, treegrid, treeitem, widget, window

Most of them roughly split into document structure & landmark roles vs widget roles, and you can probably guess a lot of which html elements implicitly have which roles by default, but some you would guess wrong.
Here is a table of the implicit ARIA role given by default to some commonly used html elements, along with the permitted overrides.

Implicit ARIA Roles for some common HTML elements

HTML Element Implicit ARIA Role Permissible explicit Roles
nav navigation none
article article. document, main, presentation &c.
a href="..." link button,checkbox,menuitem &c.
a without href none any
button button tab, checkbox, combobox, link, menuitem, &c
form form but only if it has an accessible name search, none or presentation
fieldset group radiogroup, presentation, none
img alt="..." img button, checkbox, link, menuitem, option, tab &c
img alt="" presentation presentation, none
input[type=button] button checkbox, combobox, link, &c
input[type=checkbox] checkbox button with aria-pressed, &c
input[type=image] button link, menuitem, radio, switch &c
input[type=number] spinbutton
input[type=radio] radio menuitemradio
input[type=range] slider
input[type=reset] button
input[type=submit] button
input[type=search] with no list attribute searchbox none
input[type=search] with list attribute combobox none
input[type=email] with no list attribute textbox none
input[type=email] with list attribute combobox none
input[type=tel] with no list attribute textbox none
input[type=tel] with list attribute combobox none
input[type=text] with no list attribute textbox combobox, searchbox, &c
input[type=text] with list attribute combobox none
input[type=url] with no list attribute textbox none
input[type=url] with list attribute combobox none
ul,ol list directory, group, listbox, menu, menubar, &c
label,legend none none
main main none
menu list directory, group, listbox, menu, menubar, &c
optgroup group none
option option none
select with multiple attribute & no size greater than 1 combobox menu
select otherwise listbox none
textbox textbox none
table table any
td cell, if a descendant of a table any
th columnheader or rowheader any

You can see some patterns:

  • Many elements such as main, article, option, textbox have a fixed semantic meaning which is pretty much the same as their role. They can only have that fixed role and it can't be overridden.
  • Some elements have no implicit Aria role but can be given any explicit role. These elements include div,span,code,blockquote,most of text elements such as em,strong, &c.
  • Invisible elements such as style and script have no aria role and are not permitted an explicit role either.
  • Label and legend are in a sense special elements whose aria job is to label some other element with an accessible name. They can't be given any other role.
  • Some element roles including a,img,select (and of course input) depend on how their attributes are set.
  • See the HTML element reference pages to find the full list of html elements and the full list of permitted explicit roles for those that aren't in the above table.

The table mentions what explicit roles can be given. An explicit role is given to an HTML element by giving it a role="rolename" attribute. But the advice is to only do this when you have to. Work with the native HTML roles.

HTML Element Accessible Names

An accessible name can and should be a human-readable piece of text such as 'Your Name', not an html id like your-name.

To understand what the accessible name of a component is, you must understand the accessible name computation. Here are, roughly, the first 3 steps of the accessible name computation for HTML. This is enough to get you off the ground and calculate most of your accessible names.

The Accessible Name Computation for HTML Elements

  1. The aria-labelledby property is used if present.
  2. If the name is still empty, the aria-label property is used if present.
  3. If the name is still empty, then the 3rd step depends on the element and is described in the w3.org Accessible Name Computation Section By HTML Element. Here is a summary table:
HTML Element Accessible Name Calculation if the element has no aria-label or aria-labelledby
<input type="text">, <input type="password">, <input type="number">, <input type="search">, <input type="tel">, <input type="email">, <input type="url"> and <textarea> Use the associated label element or elements accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
If the accessible name is still empty, then: use the control's title attribute.
Use the control's placeholder value.
<input type="button">, <input type="submit"> and <input type="reset"> Accessible Name Computation Use the associated label element(s) accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
Use the value attribute.
For input type=submit and type=reset: if the prior steps do not yield a usable text string, and the value attribute is unspecified use the implementation defined string respective to the input type.
Otherwise, if the control still has no accessible name use title attribute.
<input type="image"> Accessible Name Computation Use the associated label element(s) accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
Use alt attribute if present and its value is not the empty string.
Use title attribute if present and its value is not the empty string.
Otherwise if the previous steps do not yield a usable text string, use the implementation defined string respective to the input type (an input in the image state represents a submit button). For instance, a localized string of the word "submit" or the words "Submit Query".
<button> Use the associated label element(s) accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
Use the button element subtree.
Use title attribute.
<fieldset> If the accessible name is still empty, then: if the fieldset element has a child that is a legend element, then use the subtree of the first such element.
If the accessible name is still empty, then:, if the fieldset element has a title attribute, then use that attribute.
Otherwise, there is no accessible name.
<output> Use the associated label element or elements accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
Use title attribute.
Other Form Elements Use label element.
Use title attribute.
<summary> If the first summary element, which is a direct child of the details element, has an aria-label or an aria-labelledby attribute the accessible name is to be calculated using the algorithm defined in Accessible Name and Description: Computation and API Mappings.
Use summary element subtree.
Use title attribute.
If there is no summary element as a direct child of the details element, the user agent should provide one with a subtree containing a localized string of the word "details".
If there is a summary element as a direct child of the details element, but none of the above yield a usable text string, there is no accessible name.
<figure> If the accessible name is still empty, then: if the figure element has a child that is a figcaption element, then use the subtree of the first such element.
If the accessible name is still empty, then: if the figure element has a title attribute, then use that attribute.
<img> Use alt attribute, even if its value is the empty string.
NOTE
An img with an alt attribute whose value is the empty string is mapped to the presentation role. It has no accessible name.
Otherwise, if there is no alt attribute use the title attribute.
<table> if the table element has a child that is a caption element, then use the subtree of the first such element.
if the table element has a title attribute, then use that attribute.
tr, td, th Use the title attribute.
<a> Use a element subtree.
Use the title attribute.
<area> Use area element's alt attribute.
Use the title attribute.
<iframe> Use the title attribute.
NOTE
The document referenced by the src of the iframe element gets its name from that document's title element, like any other document
Section and Grouping p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main and body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address Use the title attribute.
Text-level Elements: abbr, b, bdi, bdo, br, cite, code, dfn, em, i, kbd, mark, q, rp, rt, ruby, s, samp, small, strong, sub and sup, time, u, var, wbr Use the title attribute.

The third step is the thing to focus on. If you learn what the accessible name is for your most commonly used html elements then you have less need of the aria-label or aria-labelledby attributes. You can see that elements fallback to the title attribute, but you are recommended to avoid this. If this table does not provide a better place to put your accessible name, then use aria-label="my accessible name" or aria-labelledby="id-of-label-element".

I said that this is roughly the computation. Rather than learning this table, you could learn which roles permit name from content, and that would get you to almost the same result.

Read more, with examples: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#cardinalrulesofnaming

Overriding the default name

In almost all cases you can override the default naming scheme by given an element either an aria-label="This is my name" attribute, or an aria-labelledby="id-of-a-labelling-element-with-text-content"

Parting comments

Returning to my original example, you can see that aria is opiniated. The <form> element has no built-in accessible name, whereas the input elements do. This perhaps reflects the fact that a user is much more aware of the interactive elements themselves, not the logical structure they are held in. You can also see that although many aria roles and naming rules look like what you'd expect, the thinking behind ARIA isn't identical to the thinking behind html.

Learning to do it well

A starting point for learning how to create good accessible sites is https://www.w3.org/WAI/ARIA/apg/

Making TDD even more efficient

Kent Beck is still kind of working on unit testing tools -- a couple of simple but great ideas that are baked into his re-launched JUnitMax:

  1. When running a test suite after a failure, give the most useful feedback first -- by running the failures first before the rest of the suite
  2. Otherwise, run the fastest tests first. This gives you 99% of the feedback as fast as possible

    3. Alas, only currently available for Eclipse.

Software Quality — the Whole not the Parts

Ben Higginbottom makes a significant point right at the top of this question about the Knight Capital fiasco:

Was the Knight Capital fiasco related to Release Management? On August 1, 2012, Knight Capital Group had a very bad day, losing $440 million in forty-five minutes. More than two weeks later, there has been no official detailed explanation of ...

Ben Higginbottom: Nightmare scenarios like this are not the result in the failing in any one discrete components that can be 'fixed' simply and sweetly by improving the process, but by small failures in multiple domains (I'm kind of reminded of a fatal accident investigation). So coding error, gap in the unit testing, weak end to end testing and poor post release testing coupled with a lack of operational checks when live. I can understand the desire for a 'silver bullet' fix, but in any complex system I've never known them to exist.

Sometimes, it's the whole, not the parts, that needs fixing.

A javascript unit testing framework in 50 lines – plus some assertions

Surprised by a TDD session at XP-Man in which we rolled our own unit test framework from scratch - using the growing framework itself to test itself as it grew - I added some basic assertions to my 50 line javascript test runner.

I suggest that assertions should be thought of as separate to a test runner. Assertions are at the heart of - and should grow into - your domain specific testing language. So you should think of assretions as owned by your application, not the testing framework. As your application grows, so domain specific assertions should grow. A testing framework should probably provide minimal assertions for the language it runs on: the 'primitive' true/false/equal/notEqual assertions which will be used to define more domain specific assertions; and doing the legwork of tedious but common cases, such as testing equality by value of complex objects and collections.

In the case of javascript, the below might do. The tricky thing for assertions is to come up with something that is fluent and not verbose. C# extension methods are perfect for this. In javascript one could add methods to Object.prototype, but that doesn't have the same scoping restriction as C# so feels too much like trampling all over everyone else's garden: it's poor namespacing and a failure of good manners.

/* Assertions for a test framework. http://www.cafe-encounter.net/p756/ */

function Assert(actual, assertionGender){
    this.actual=actual;
    this.notted=!assertionGender;
    this.Expected=  assertionGender ? "Expected" : "Did not expect";
}

function assert(actual){return new Assert(actual, true);}
function assertNot(actual){return new Assert(actual, false);}

Assert.prototype.IsTrue = function(msg){
    if( this.actual == this.notted ){ throw msg||this.Expected + " true.";}
};

Assert.prototype.Equals = function(expected,msg){
    if( (this.actual==expected) == this.notted ){
        throw msg|| this.Expected + " " + this.actual + " to equal " + expected ;
    }
};

Assert.prototype.EqualsByPropertyValue = function(expected,msg){
    var actualValue =  JSON.stringify( this.actual );
    var expectedValue = JSON.stringify( expected );
    if( (actualValue == expectedValue) == this.notted ){
        throw msg|| this.Expected + " " + actualValue + " to equal " + expectedValue + " by value";
    }
};

$(function(){
    new Specification("SpecificationsForPrimitiveAssertionPasses",{
        isTrueShouldBeTrueForTrue : function(){
            assert(true).IsTrue();
        },
        equalsShouldPassForEqualArguments : function(){
            assert( 1+1 ).Equals( 2 );
        },
        equalsByPropertyValueShouldPassForValueEqualArguments : function(){
            assert( { a: "a", b : function(){ return "b";}} )
                .EqualsByPropertyValue( { a: "a", b : function(){ return "b";}} );
        },
        assertNotShouldReverseTheOutcomeOfAnAssertion : function(){
            assertNot(false).IsTrue();
            assertNot(1+1).Equals(3);
            assertNot({ a: "a"}).EqualsByPropertyValue( { a: "b"});
        }
    }).runTests();

    new Specification("SpecificationsForPrimitiveAssertion_Failures",{
        isTrueShouldNotBeTrueForFalse : function(){
            assert(false).IsTrue();
        },
        equalsShouldFailForNonEqualArguments : function(){
            assert(1).Equals(2);
        },
        equalsByPropertyValueShouldFailForDifferingPropertyValues : function(){
            assert( { a: "a" } ).EqualsByPropertyValue( { a: "A" } );
        },
        equalsByPropertyValueShouldFailForDifferingProperties : function(){
            assert( { a: "a" } ).EqualsByPropertyValue( { aa: "a" } );
        },
        assertNotShouldReverseTheOutcomeOfIsTrue : function(){
            assertNot(true).IsTrue();
            assertNot({ a: "a"}).EqualsByPropertyValue( { a: "a"});
        },
        assertNotShouldReverseTheOutcomeOfEquals : function(){
            assertNot(1+1).Equals(2);
        },
        assertNotShouldReverseTheOutcomeOfEqualsByValue : function(){
            assertNot({ a: "a"}).EqualsByPropertyValue( { a: "a"});
        },
        assertTrueFailureWithCustomerMessageShouldOutputCustomMessage : function(){
            assert(false).IsTrue("This assertion failure should output this custom message");
        },
        assertEqualsFailureWithCustomerMessageShouldOutputCustomMessage : function(){
            assert(1).Equals(2, "This assertion failure should output this custom message");
        },
        assertEqualsByValueFailureWithCustomerMessageShouldOutputCustomMessage : function(){
            assert({a:"a"}).EqualsByPropertyValue( 1, "This assertion failure should output this custom message");
        }

    }).runTests();
});