NOTE many of these slides used animated GIFs which did not survive PDF export. A talk about the cost and accessibility of custom HTML components, compared with native HTML elements. Reminder that most of the CSS isn't useful, it just matches Chrome (Windows) default design. In realistic scenarios you will be creating a custom design. In that custom design you need to handle static, focus, hover, active and disabled states; and set cursor and user-select.

1. ClickableClickable divdivss
and other icebergsand other icebergs
Ben Buchanan
@200okpublic, weblog.200ok.com.au

2. Created by Oleksandr Panasovskyi
from the Noun Project

5. It's an old problemIt's an old problem
$("p").click(function() {
console.log("You clicked a paragraph!");
});

6. The flow on effectThe flow on effect
Tutorials drive the self-paced learning
that fills in the gaps of education.
People don't know what they don't know.

7. Common justificationsCommon justifications
"We're just teaching X in this tutorial"
"People know HTML anyway"
...really?

8. Industry skills gapsIndustry skills gaps
You could never assume people knew accessibility.
You can no longer assume a JavaScript developer knows HTML or CSS.

9. HTML A11y CSS JS Backend
University ✗ ✗ ✗ ? ✓
Bootcamps ✗ ✗ ✗ ✓ ✓
Tutorials ? ? ? ? ?
Internal training ✓ ✓ ✓ ✓ ✓

10. Everything old is new againEverything old is new again
Most popular tutorials for Angular, React
and Vue have accessibility flaws.

11. Custom controlsCustom controls
Adding interactions to an element (eg. a div )
that does not natively support that interaction.
Often replicating or extending functionality provided by a native control.

12. Understanding the impactUnderstanding the impact
Let's compare a button vs clickable div
The simplest example of this category.

13. Element + click eventElement + click event
DIV
Works with a mouse
Might work with touch
Button
Has focus and active states
Works with mouse
Works with keyboard
Works with touch
Tailors to different input
Can be disabled in HTML

14. What does it take toWhat does it take to completelycompletely
reproduce areproduce a buttonbutton with awith a divdiv??

15. The Amazing Clickatron™The Amazing Clickatron™

16. Application setupApplication setup

17. Clickatron ARIAClickatron ARIA
<div role="application" aria-label="Click counter">
...
</div>

18. Clickatron ARIAClickatron ARIA
<button aria-controls="buttoncounter">Button</button>
<div
id="buttoncounter"
role="region"
aria-live="polite"
aria-label="button clicks">
0
</div>

19. BoilerplateBoilerplate
const $checkbox = document.getElementById('enablecontrols');
const $button = document.getElementById('countbutton');
const $buttonCounter = document.getElementById('buttoncounter');
const $div = document.getElementById('countdiv');
const $divCounter = document.getElementById('divcounter');
let buttonCount = 0;
let divCount = 0;

20. Shared CSSShared CSS
:root {
--text-size: 4rem;
}

21. Shared JSShared JS
$checkbox.onchange = function() {
if($checkbox.checked) {
// enabled
} else {
// disabled
}
};

22. Create theCreate the buttonbutton

23. ButtonButton
<button id="countbutton" aria-controls="buttoncounter">
Button
</button>

24. ButtonButton
$button.addEventListener('click', function() {
$buttonCounter.textContent = ++buttonCount;
});

25. ButtonButton
button {
font-size: var(--text-size);
}

26. Toggle withToggle with disableddisabled attributeattribute
// enabled
$button.removeAttribute('disabled');
// disabled
$button.setAttribute('disabled', 'disabled');

27. It works!It works!

28. Now the DIV...Now the DIV...

29. DIVDIV
<div
id="countdiv"
aria-controls="divcounter"
>
DIV
</div>

30. Declare the DIV is really a BUTTONDeclare the DIV is really a BUTTON
<div
id="countdiv"
aria-controls="divcounter"
role="button"
>
DIV
</div>

31. Make the DIV clickableMake the DIV clickable
$div.addEventListener('click', function(event) {
$divCounter.textContent = ++divCount;
});

33. Styling the DIVStyling the DIV
.divbuttons {
/* buttons are inline-block, divs are block */
display: inline-block;
}

34. Styling the DIVStyling the DIV
How hard can it be to style a button, right?

35. Dig into calculated styleDig into calculated style

37. Resting stateResting state
.divbuttons {
color: #000;
background: #eee;
background: linear-gradient(to top,
#dedede 0%, #f6f6f6 100%);
border-width: 1px;
border-style: solid;
border-color: #a5a5a5 #939393 #999999 #a3a3a3;
}

38. Magic numbers for spacingMagic numbers for spacing
.divbuttons {
/* bump up the font size and match spacing */
font-size: var(--text-size);
padding: 0.14rem 0.4rem;
}

39. No active stateNo active state

40. Active stateActive state
.divbutton:active {
border-color: #949494 #9a9a9a #a5a5a5 #9d9d9d;
background: linear-gradient(to top,
#f6f6f6 0%, #dedede 100%) !important;
border-style: inset;
}

41. Active stateActive state

42. Disabling the DIVDisabling the DIV

43. Toggle withToggle with aria-disabledaria-disabled attributeattribute
// enabled
$div.setAttribute('aria-disabled', 'false');
// disabled
$div.setAttribute('aria-disabled', 'true');

44. Disabled styleDisabled style
.divbutton[aria-disabled="true"] {
color: #808080;
}

45. Disabling the DIVDisabling the DIV

46. Only apply active when enabledOnly apply active when enabled
.divbutton:active {}
.divbutton[aria-disabled="false"]:active {}

47. Add a disabled check to the JSAdd a disabled check to the JS
$div.addEventListener('click', function(event) {
if(event.target.getAttribute('aria-disabled') != "true") {
$divCounter.textContent = ++divCount;
}
});

48. Disabling the DIVDisabling the DIV

49. Ship it?Ship it? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

50. Wrong cursorWrong cursor

51. Correct cursorCorrect cursor
/* set the same cursor as a button */
cursor: default;

52. Ship it??Ship it?? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

53. Wrong selection behaviourWrong selection behaviour

54. Correct selection behaviourCorrect selection behaviour
/* prevent text selection, same as button */
user-select: none;

55. ...ship it?...ship it? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

56. No keyboard supportNo keyboard support

57. Add tabindexAdd tabindex
<div
id="countdiv"
aria-controls="divcounter"
tabindex="0"
>
DIV
</div>

58. Refactor our counterRefactor our counter
function divCounter(event) {
if(event.target.getAttribute('aria-disabled') != "true") {
$divCounter.textContent = ++divCount;
}
}
$div.addEventListener('click', function(event) {
divCounter(event);
});
$div.addEventListener('keypress', function(event) {
divCounter(event);
});

59. .......ship it?.......ship it? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

60. Too much keyboard supportToo much keyboard support

61. Filter for enter and spacebarFilter for enter and spacebar
$div.addEventListener('keypress', function(event) {
if(event.keyCode==32||event.keyCode==13) {
divCounter(event);
}
});

62. Just enter and spacebarJust enter and spacebar

63. .......ship it?.......ship it? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

64. Focusable...but...Focusable...but...

65. Quick fixQuick fix
$checkbox.onchange = function() {
if($checkbox.checked) {
$button.removeAttribute('disabled');
$div.setAttribute('aria-disabled', 'false');
$div.setAttribute('tabindex', '0');
} else {
$button.setAttribute('disabled', 'disabled');
$div.setAttribute('aria-disabled', 'true');
$div.removeAttribute('tabindex');
}
};

66. Replicating buttonReplicating button
Button: focus disabled when disabled set.
DIV: remove tabindex when aria-disabled="true" set.

67. Mutation observer!Mutation observer!
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.attributeName === 'aria-disabled') {
let $el = mutation.target;
if($el.classList.contains('divbutton')) {
if($el.getAttribute('aria-disabled') === 'true') {
$el.removeAttribute('tabindex');
} else {
$el.setAttribute('tabindex', '0')
}
}
}
});
});
observer.observe($div, { attributes: true });

68. GeneraliseGeneralise
observer.observe($div, { attributes: true });
let divButtons = document.querySelectorAll('.divbutton');
for(let i=0; i < divButtons.length; i++) {
observer.observe(divButtons[i], { attributes: true });
}

69. Properly disabled divbuttonProperly disabled divbutton

70. NowNow ship it?ship it? No...No...
Created by Oleksandr Panasovskyi
from the Noun Project

71. Focused after clickFocused after click

72. What we need nowWhat we need now
Keep focus ring if using keyboard, do not apply if using mouse.

73. Input ModeInput Mode
https://github.com/cheshrkat/input-mode

74. Using Input ModeUsing Input Mode
We'll set an attribute on body with the current mode:
inputMode({
'element': document.getElementsByName('body')[0],
'attr': 'data-inputmode',
'delay': 100,
'default': 'keyboard'
});

75. Remove focus outline during mouse modeRemove focus outline during mouse mode
body[data-inputmode="mouse"] .divbutton:focus {
outline: none;
}

76. No focus ring with mouseNo focus ring with mouse

77. Ship it?Ship it?

78. Ship it!Ship it!

79. TheThe divdiv doubled the entire codebasedoubled the entire codebase
Button div
HTML 2 attributes 6 attributes
CSS 3 LOC 25 LOC
JS 8 LOC 43 LOC

80. In realityIn reality
BUG-1 weird blue boxes appearing when clicking
BUG-2 still counts clicks when disabled
DES-1 active style missing
BUG-3 enable keyboard
BUG-4 user can still focus while disabled
BUG-5 disabled button can be focused
DES-2 remove ugly focus after click
BUG-6 stop counting all keystrokes

81. Multiply thisMultiply this
× each custom control
× each platform
× each implementation

82. Vanity controls are not evilVanity controls are not evil
But they are more expensive,
and trickier to make accessible.
Choose wisely.

83. Common issuesCommon issues
no keyboard support at all
missing states (eg. no keyboard focus)
incorrect keystrokes (eg. no cursor key support)
subtle inconsistencies (eg. cursors, text selection)

84. Steering clear of icebergsSteering clear of icebergs

85. RecruitingRecruiting

86. Require a11yRequire a11y

87. Include in QAInclude in QA

88. Provide trainingProvide training

89. It's up to us to fix the skills gap.It's up to us to fix the skills gap.

90. Thank you.Thank you.
@200okpublic@200okpublic
weblog.200ok.com.auweblog.200ok.com.au

91. Image creditsImage credits
Iceberg By Oleksandr Panasovskyi, UA
Ship by Rene Schäfer from the Noun Project
Checklist by QualityIcons from the Noun Project
Checklist by Flatart from the Noun Project
interview by DailyPM from the Noun Project
training by lastspark from the Noun Project