This One Simple 600-Year-Old Trick Makes Your Website More Accessible!

‘Accessibility and the Web’ sounds like a thoroughly modern set of challenges, but it includes problems that people have been trying to solve for hundreds of years. In mediaeval times, a knight being able to recognise a friend or foe at a distance was a matter of life and death. Rules evolved around the coats of arms that they bore to make identifying each other easier, giving birth to the science of heraldry. Those rules can still be useful to us today – including the most important one of those rules, the one around colour contrast.

First, we’ll talk about why colour contrast is so important to accessibility and what exactly we mean when we say ‘colour contrast’. (Hint: it doesn’t really have a lot to do with actual colour.) Then I’ll take us on a whirlwind tour through the history of heraldry, from Ancient Greece through the Age of Chivalry, all the way to last October.

You’ll get a quick primer on blazon, the language of heraldry, the HTML and CSS of arms. Then we’ll put it all together, showing how rules that originated on the mediaeval tournament ground inform our best practices here in the 21st century.

This talk is from CSS Meetup Wellington on 13 September 2018.

Transcript

1. This One Simple 600-Year-Old Trick Makes Your Website More Accessible!
2. Nick Piesco Front-End Developer @nickpiesco
3. Why is accessibility important?
4. WCAG 2.1 principles • Perceivable • Operable • Understandable • Robust
5. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html ‘Large Text’: 18pt (1.5em) regular, 14pt (1.2em) bold
6. https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/ • ~4% of the world’s population has low vision; ~0.6% are blind • Colour-vision deficiency: 7–12% of men; < 1% of women • ~50% of people over 50 have some degree of low-vision condition
7. It’s easier to see the difference between light and dark than it is to see the difference between colours
8. Geri Coady: Colour Accessibility (2013)
9. Rods (extremely sensitive, used in low light) ~120 million Cones (responsible for colour vision; used in high light) ~6 million
10. https://www.w3.org/WAI/WCAG21/Techniques/general/G18
11. Colorable Text Demo http://jxnblk.com/colorable/demos/text/
12. Hex Naw https://hexnaw.com/
13. Jamie Wong: Color: From Hex Codes to Eyeballs http://jamie-wong.com/post/color/
14. The science of vision
15. The science of heraldry
16. ‘Armory is that science of which the rules and the laws govern the use, display, meaning, and knowledge of the pictured signs and emblems appertaining to shield, helmet, or banner.’ — A.C. Fox-Davies
17. Sodacan/Wikimedia Commons CC-BY-SA 3.0
18. Crest Mantling Supporter Compartment Helm Shield Motto Sodacan/Wikimedia Commons CC-BY-SA 3.0
19. • Associated with a person • Easy to identify at a distance
20. Charles Boutell: The Handbook to English Heraldry (1914)
21. 1066: Battle of Hastings
22. Charles Boutell: The Handbook to English Heraldry (1914) Earliest decorations were structural pieces of the shield
23. Ulrich Waack/Wikimedia Commons CC-BY-SA 3.0 Early 1200s: Closed helmets
24. Heralds get to keep track of who wears what
25. circa 1240: First rolls of arms
26. George Arents Collection, New York Public Library 1276
27. George Arents Collection, New York Public Library 1276 circa 1334
28. George Arents Collection, New York Public Library 1276 circa 1334 1415
29. 1417: Only bear arms by right or by grant
30. 1484: College of Arms
31. 1531: ‘Reform all false armory and arms devised without authority’
32. ‘[C]orrect, cumptrolle and refourme all mann’ of armes, crests, cognizances and devices unlawfull or unlawfully usurped, borne or taken by any p’son or p’sons within the p’vince contary to the due order of the laws of armes, and the same to rev’se, put downe or otherwise deface at his discrecon as well in coote armors, helmes, standerd, pennons and hatchmets of tents and pavilions, as also in plate jewells, pap’, parchement, windowes, gravestones and monuments, or elsewhere wheresoev’ they be sett or placed, whether they be in shelde, schoocheon, lozenge, square, rundell or otherwise howsoev’ contarie to the autentiq’ and auncient lawes, customes, rules, privilege and orders of armes.’
33. 1673: Only the Earl Marshal has the authority to grant arms
34. Allan Warren/Wikimedia Commons CC-BY-SA 3.0 1673: Only the Earl Marshal has the authority to grant arms
35. The symbolism and artwork has evolved, but the rules remain the same
36. College of Arms
37. Canadian Heraldic Authority
38. Canadian Heraldic Authority
39. Bureau of Heraldry (South Africa)
40. Blazon: Specialised language used to describe the composition and arrangement of symbols on a heraldic device
41. HTML and CSS: Specialised languages used to describe the composition and arrangement of stuff in a Web browser
43. A1 Aardvark/Wikimedia Commons CC-BY-SA 3.0
44. Wikimandia, Caranorn/Wikimedia Commons CC-BY-SA 4.0; Balmung0731, Yves LG, Louis Brun, Jimmy44/Wikimedia Commons CC-BY-SA 3.0 Tinctures Colours Azure Gules Purpure Sable Vert Argent Or Ermine Vair Metals Furs
45. A.C. Fox-Davies: The Art of Heraldry (1904)
46. A.C. Fox-Davies: The Art of Heraldry (1904)
47. Benjamin D. Esham Azure a bend Or
48. A1 Aardvark/Wikimedia Commons CC-BY-SA 3.0 Azure within two chevronels Or five bezants in chief three mullets chevronwise and one in the base Argent
49. Sodacan/Wikimedia Commons CC-BY-SA 3.0 Quarterly 1st and 4th Sable a lion rampant on a canton Argent a cross Gules 2nd and 3rd quarterly Argent and Gules in the 2nd and 3rd quarters a fret Or overall on a bend Sable three escallops of the first and as an augmentation in chief an inescutcheon Argent a cross Gules and thereon an inescutcheon Azure three fleurs-de-lis Or
50. • Associated with a person • Easy to identify at a distance
51. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
52. The Rule of Tincture
53. ‘Metal should not be put on metal, nor colour on colour.’ — Humphrey Llwyd, 1568
54. Wikimandia, Caranorn/Wikimedia Commons CC-BY-SA 4.0; Balmung0731, Yves LG, Louis Brun, Jimmy44/Wikimedia Commons CC-BY-SA 3.0 Tinctures Colours Azure Gules Purpure Sable Vert Argent Or Ermine Vair Metals Furs
55. Colour contrast!
56. Henry Salomé/Wikimedia Commons CC-BY-SA 3.0
57. Henry Salomé/Wikimedia Commons CC-BY-SA 3.0
58. Henry Salomé/Wikimedia Commons CC-BY-SA 3.0
59. Google Material Design Guidelines: material.io
60. Arms that violate the Rule of Tincture are called ‘armes fausées’
61. England takes the rule more seriously than the continent, but still only less than 2% of arms violate it
62. P-JR/Wikimedia Commons CC-BY-SA 4.0
63. Even if we break the rules sometimes, we can always get better
64. Thanks! @nickpiesco The Fell Types digitally reproduced by Igino Marini: iginomarini.com