Mauricio Palma - You can’t read this sentence - A11y automation - Codemotion Amsterdam 2019

They founded their
label and…

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

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

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

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

Key Takeaways
Always put form elements in context. Meaning putting buttons, inputs, and notiﬁcations
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

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

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

Sunlight
Bad lightning
Temporary disabilities

Persona
Permanent Temporary Situational

Benefits
New opportunities
Offer utility and elegance
Proﬁtable
Legal compliance

We usetechnologyto includemore people

Can your read this?
Color contrast
1.6 ratio

Can your read this?
Color contrast
8.05 ratio AAA

Color Contrast
Automation
Guideline 1.4 Distinguishable

24px || 19px bold
Large-scale text

Logos and brand
Other exceptions

Inactive UI elements
Other exceptions

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

Note 1: For the sRGB colorspace, the relative luminance of a color is deﬁned as L =
0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are deﬁned 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

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

standardized by the
International Electrotechnical
Commission
sRGB

Works in a
similar way
Default
color space
Human SystemWeb Browsers

RGBStep 1
export type RGB = [
number,
number,
number
];
Statically deﬁne the kind of
data we expect.

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 |

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

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

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);
}

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);
}

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

What about Tails
position call?

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

Quicksort
fast sorting algorithm

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);
}

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 };
}

Aa Aa AaAaAa
Sorted by
luminance
Step 3

Binary Search
efﬁcient algorithm that searches
a sorted list

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

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);
};

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()
}
}
}

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

Thanks!Github: @palmaswell
Twitter: @palmaswell

Mauricio Palma - You can’t read this sentence - A11y automation - Codemotion Amsterdam 2019

More Related Content

What's hot (11)

Similar to Mauricio Palma - You can’t read this sentence - A11y automation - Codemotion Amsterdam 2019 (20)

More from Codemotion (20)

Recently uploaded (20)

Mauricio Palma - You can’t read this sentence - A11y automation - Codemotion Amsterdam 2019