Exemplum illud exclusive… How does it feel not being able to read the sentence above? This is what we are doing every day to about 217 million people with visual impairments. As developers we don’t think very much about these numbers, and yet it’s still our responsibility to include as many people as possible in our applications. In this talk we will learn some important Javascript automation tasks e.g. enhanced color contrast and voice interfaces. Let us dive into some best practices and real-life examples to avoid making the same mistakes all over again in the future.

2. 15 years ago…

5. 7 years ago…

6. 2012

10. She had a long
history…

11. The
grandma

12. 2012 From

13. To

14. They founded their
label and…

15. The Man

18. Today

19. Mauricio Palma
Co-founder and all kind of things @WDLK
Product Engineer @sinnerschrader
everywhere else @palmaswell

20. But

21. Why?

22. Back in
The Day

23. Way
harder!

24. opportunity

25. Nature
of the web

26. We use our
our abilities

28. You can’t read
this sentence
A11y automation
April, 2019

30. That was
awkward! Right?

32. Literally
hurts!

33. 217 million

34. How to
fix the
numbers?

35. Blurry Vision

37. Key Takeaways
Publish all information and content from your site in your HTML
Use semantic HTML and the appropriate ARIA landmarks
Write screen reader friendly markup
Provide keyboard navigation

38. Partial vision loss

40. Key Takeaways
Besides the mentioned semantic HTML and screen reader friendly markup
You should follow a linear logical layout, that supports at least 200% magnification

41. Central vision loss

43. Key Takeaways
Always put form elements in context. Meaning putting buttons, inputs, and notifications
together in a logical manner
For action elements in your interface use a good combination of colors, shapes, and text
Do not rely on colors to convey meaning

44. Dyslexia

46. Key Takeaways
Align your text to the left and keep a consistent layout
Keep content short, clear and simple
Consider producing materials in other formats (for example audio or video)
Let the users change the contrast between background and text

47. Colorblindness

50. Key Takeaways
Make sure that colors are not your only method of conveying important information.

51. Sunlight
Bad lightning
Temporary disabilities

53. Persona
Permanent Temporary Situational

54. Benefits
New opportunities
Offer utility and elegance
Profitable
Legal compliance

55. We usetechnologyto includemore people

56. Color Contrast

57. Can your read this?
Color contrast
1.6 ratio

58. Can your read this?
Color contrast
8.05 ratio AAA

59. Color Contrast
Automation
Guideline 1.4 Distinguishable

60. AA >= 4.5:1

61. AAA >= 7:1

62. AA >= 3:1
Large-scale text

63. AAA >= 4.5:1
Large-scale text

64. 24px || 19px bold
Large-scale text

65. Logos and brand
Other exceptions

66. Inactive UI elements
Other exceptions

67. Make it easier for users to see and hear content including
separating foreground from background.
Guideline 1.4 Distinguishable:

68. Note 1: For the sRGB colorspace, the relative luminance of a color is defined as L =
0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
WCAG definition of relative luminance

69. Excuseme?

70. Luminance

71. Relative
Luminance

72. 0

73. 1

74. Note 1: For the sRGB color space, the
relative luminance of a color is defined
as L = 0.2126 * R + 0.7152 * G + 0.0722
* B where R, G and B are defined as:
WCAG
definition
of relative
luminance

75. standardized by the
International Electrotechnical
Commission
sRGB

76. sRGB

77. Our visual
system

78. Works in a
similar way
Default
color space
Human SystemWeb Browsers

79. RGBStep 1
export type RGB = [
number,
number,
number
];
Statically define the kind of
data we expect.

80. Chromaticity
| Chromaticity | Red | Green | Blue | White point |
|--------------|---------|-----------|----------|--------------|
| x | 0.6400 | 0.3000 | 0.1500 | 0.3127 |
| y | 0.3300 | 0.6000 | 0.0600 | 0.3290 |
| Y | 0.2126 | 0.7152 | 0.0722 | 1.0000 |

81. export enum YValues {
r = 0.2126,
g = 0.7152,
b = 0.0722,
}
xyY color
space
Step 1
Y values represent the
luminance of a color entry

82. export function calculateRGBEntry(
entry: number,
y: Type.YValues): number {
const average = entry / 255;
return average <= 0.03928
? average / 12.92 * y
: ((average + 0.055) / 1.055 ) ** 2.4 * y;
};
Color
contrast
Step 2

83. Color
contrast
Step 2
export function luminance(
sRGB: Type.RGB
): number {
return calculateRGBEntry(sRGB[0], Type.YValues.r)
+ calculateRGBEntry(sRGB[1], Type.YValues.g)
+ calculateRGBEntry(sRGB[2], Type.YValues.b);
}

84. Color
contrast
Step 2
export function contrastRatio(
sRGB: Type.RGB,
sRGB2: Type.RGB): number {
const light = Math.max(luminance(sRGB), luminance(sRGB2));
const dark = Math.min(luminance(sRGB), luminance(sRGB2));
return +((light + 0.05) / (dark + 0.05)).toFixed(2);
}

85. The other
day

86. The other
day

87. The other
day

88. Color Contrast
Automation

89. N colors
Aa Aa Aa Aa
[ ]

90. AaAaAaAaAa
Linear
Search
AAA

91. Time
complexity
O(n^2) worst case O(50^2) worst case
A 50 color array would require 2500
iterations.
^ === exponent

92. What about Tails
position call?

94. Quicksort
Binary search
Hash table
Theme provider
New
(kind of naive)
Strategy

95. Quicksort
fast sorting algorithm

96. SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}

97. SortStep 3
export function partition(
arr: Type.Color[],
lo: number,
hi: number,
pivot: number,
cb: (sRGB: Type.RGB) => number): { lo: number, hi: number} {
if (lo <= hi) {
if (cb(arr[lo].rgb) < pivot) {
return partition(arr, lo + 1, hi, pivot, cb);
}
if (cb(arr[hi].rgb) > pivot) {
return partition(arr, lo, hi - 1, pivot, cb);
}
if (lo <= hi) {
swap(arr, lo, hi);
return partition(arr, lo + 1, hi - 1, pivot, cb);
}
}
return { lo, hi };
}

98. SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}

99. AaAaAaAaAa
QuicksortStep 3

100. Aa Aa AaAaAa
Sorted by
luminance
Step 3

101. Binary Search
efficient algorithm that searches
a sorted list

102. Aa Aa AaAaAa
Binary
Search
Step 4 AAA color contrast check
Match!

103. SearchStep 4 function lowerSearch<T extends QuickSearch>(
arr: Array<T>,
el: T,
val: number,
lo: number,
hi: number): number | [] {
const mid = Math.floor((lo + hi) / 2);
const prev = mid - 1;
const next = mid + 1;
const midRatio = contrastRatio(arr[mid].rgb, el.rgb);
if (lo < hi) {
if (midRatio > val && prev >= 0) {
if (contrastRatio(arr[prev].rgb, el.rgb) < val) {
return mid;
}
return lowerSearch(arr, el, val, lo, mid);
}
if (midRatio < val && next < arr.length) {
if (contrastRatio(arr[next].rgb, el.rgb) > val) {
return next;
}
return lowerSearch(arr, el, val, mid, hi)
}
if (mid === val) {
return mid;
}
}
return [];
};
export function search(
arr: Type.Color[],
el: Type.Color,
val: Type.A11yRatio,
type?: Type.Search): number | [] {
if (type === Type.Search.upper) {
return upperSearch(arr, el, val, 0, arr.length);
}
return lowerSearch(arr, el, val, 0, arr.length);
};

104. Color
Enhanced

105. Enhanced
colors
Step 5
export function createEnhanced(
rawColor: Type.Color,
aaa: Type.Color[] | [],
aa: Type.Color[] | []
): Type.colorEnhanced {
const rgb = rawColor.rgb;
return {
name: rawColor.name,
rgb,
aaa,
aa,
toRGB(): string {
return toRGBString(rgb);
},
toHEX(): string {
return tinyColor(toRGBString(rgb)).toHexString();
},
toHSL(): string {
return tinyColor(toRGBString(rgb)).toHslString();
},
toRGBA(alpha: number): string {
const color = tinyColor(toRGBString(rgb));
color.setAlpha(alpha);
return color.toRgbString()
}
}
}

106. Demo

107. It’s open source
https://github.com/Palmaswell/forward
Use it, play with it, make it better!

108. Questions?

110. Thanks!Github: @palmaswell
Twitter: @palmaswell