Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

C117b6a316db3f702936e53ab4d230a8?s=47 Nick Piesco
September 13, 2018

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.

C117b6a316db3f702936e53ab4d230a8?s=128

Nick Piesco

September 13, 2018
Tweet

More Decks by Nick Piesco

Other Decks in Programming

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
  42. None
  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