davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
401 Commits
1 Branch
Struktur: 14ca1955a4
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „14ca1955a4“
${ noResults }
larlet-fr-david-cache/cache/bdbba224d04a830b33081bc4573.../index.html

index.html 58KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Trolleys, veils and prisoners: the case for accessibility from philosophical ethics (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://hiddedevries.nl/en/talks/2017-11-16-a11y-ethics/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Trolleys, veils and prisoners: the case for accessibility from philosophical ethics (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://hiddedevries.nl/en/talks/2017-11-16-a11y-ethics/">Source originale du contenu</a></h3>

  463.     <div class="slide slide--bordered">

  464.     <div class="slide-image">

  465.         <img src="images/images.001.jpg" alt="Image of slide number 1" />

  466.     </div>

  467.     <div class="slide-notes">

  468.               <p>Thank you all for joining in at this early hour. And hello if you're watching this later! </p>

  469. 

  470.     </div>

  471. </div>

  472. 

  473. <div class="slide slide--bordered">

  474.     <div class="slide-image">

  475.         <img src="images/images.002.jpg" alt="Image of slide number 2" />

  476.     </div>

  477.     <div class="slide-notes">

  478.               <p>This is me, my name is Hidde. On this photo I am holding a bubble tea at a Taiwanese train station. Not that I particularly like bubble tea, but it is very warm there and this drink was very cold.</p>

  479. 

  480.     </div>

  481. </div>

  482. 

  483. <div class="slide slide--bordered">

  484.     <div class="slide-image">

  485.         <img src="images/images.003.jpg" alt="Image of slide number 3" />

  486.     </div>

  487.     <div class="slide-notes">

  488.               <p>This is my website, I've got a blog where I write about web standards, accessibility, that sort of thing. It's also my company website, I am a freelance web developer.</p>

  489. 

  490.     </div>

  491. </div>

  492. 

  493. <div class="slide slide--bordered">

  494.     <div class="slide-image">

  495.         <img src="images/images.004.jpg" alt="Image of slide number 4" />

  496.     </div>

  497.     <div class="slide-notes">

  498.               <p>These are the clients I am currently contracting for, Mozilla and the Dutch government. So some of this talk is from the perspective of someone who writes front-end code for clients.</p>

  499. 

  500.     </div>

  501. </div>

  502. 

  503. <div class="slide slide--bordered">

  504.     <div class="slide-image">

  505.         <img src="images/images.005.jpg" alt="Image of slide number 5" />

  506.     </div>

  507.     <div class="slide-notes">

  508.               <p>This talk isn't about my resume, but  I thought I'd be appropriate to mention that I've actually got a degree in Philosophy. I studied my bachelor's in Utrecht in The Netherlands and did my masters at the University of Bristol in the UK. </p>

  509. 

  510. <p>This isn't something I mention normally, I mean, this isn't a degree I have much use for in my daily work. I did find both Philosophy and web development are hugely about abstractions. </p>

  511. 

  512. 

  513.     </div>

  514. </div>

  515. 

  516. <div class="slide slide--bordered">

  517.     <div class="slide-image">

  518.         <img src="images/images.006.jpg" alt="Image of slide number 6" />

  519.     </div>

  520.     <div class="slide-notes">

  521.               <p>This is the School of Athens, a Renaissance painting of Raphael, this picture has lots of ancient Greek philosophers in it.  </p>

  522. 

  523. <p>When I signed up for this, I had kind of erased memories of my studies in philosophy, and in ethics. Researching this talk I realised, yeah this is quite a lot to go through, way too much for a 40 minute talk. The history of ethics is huge. There are many dots to connect in moral philosophy. The plan is: I will only loosely do so, and freely apply these examples, focusing on some lessons we can try and use in our daily work. Some of this stuff is just based on things I learned working as a front-end developer in big and small organisations.</p>

  524. 

  525. 

  526.     </div>

  527. </div>

  528. 

  529. <div class="slide slide--bordered">

  530.     <div class="slide-image">

  531.         <img src="images/images.007.jpg" alt="Image of slide number 7" />

  532.     </div>

  533.     <div class="slide-notes">

  534.               <p>Why do I do this? Well, I think many of us have encountered situations where we wanted to improve accessibility, but had to convince others with good arguments. A large part of why people make websites accessible is that it is the right thing to do. Philosophers have had theories about the right thing for thousands of years, so I thought it would be good to look into some of those ideas and try and apply them to the 2017 world of web accessibility.</p>

  535. 

  536.     </div>

  537. </div>

  538. 

  539. <div class="slide slide--bordered">

  540.     <div class="slide-image">

  541.         <img src="images/images.008.jpg" alt="Image of slide number 8" />

  542.     </div>

  543.     <div class="slide-notes">

  544.               <p>There are lots of arguments for accessibility out there.</p>

  545. 

  546.     </div>

  547. </div>

  548. 

  549. <div class="slide slide--bordered">

  550.     <div class="slide-image">

  551.         <img src="images/images.009.jpg" alt="Image of slide number 9" />

  552.     </div>

  553.     <div class="slide-notes">

  554.               <p>The first website out there was already super accessible, it was mostly structured text, which worked responsively, you could zoom in if you liked to, there was plenty of contrast and it was digestible for screen readers.</p>

  555. 

  556.     </div>

  557. </div>

  558. 

  559. <div class="slide slide--bordered">

  560.     <div class="slide-image">

  561.         <img src="images/images.010.jpg" alt="Image of slide number 10" />

  562.     </div>

  563.     <div class="slide-notes">

  564.               <p>I mean, wasn't it one of its inventors, Sir Tim Berners-Lee, who made this text appear at the London 2012 Opening Ceremony? This is for everyone.</p>

  565. 

  566.     </div>

  567. </div>

  568. 

  569. <div class="slide slide--bordered">

  570.     <div class="slide-image">

  571.         <img src="images/images.011.jpg" alt="Image of slide number 11" />

  572.     </div>

  573.     <div class="slide-notes">

  574.               <p>Another technical argument is that, as accessibility is mostly about semantics (or: meaning), focusing on it leaves you with a cleaner codebase. If you've written code that semantically makes sense, it will likely be easy to read, too.</p>

  575. 

  576. <p>Legal arguments: the law says we should do it. this is the case in Europe and America, your organisation can be sued if its website is not accessible. I'm not a legal expert at all, but yeah, there are legal arguments.</p>

  577. 

  578. <p>Business arguments: we can make more money if we include more people. Netflix includes audio descriptions, likely more people with visual impairments will sign up. Subtitles likely brings them more users with auditory impairments, but also people who like to watch stuff in languages they aren't fluent in. There are companies who make profit from being accessible, this case can be made.</p>

  579. 

  580. <p>Moral arguments: we will look some of those today.</p>

  581. 

  582. 

  583.     </div>

  584. </div>

  585. 

  586. <div class="slide slide--bordered">

  587.     <div class="slide-image">

  588.         <img src="images/images.012.jpg" alt="Image of slide number 12" />

  589.     </div>

  590.     <div class="slide-notes">

  591.               <p>Ethics can be defined in lots of different ways. I'd say it is a field that looks at three things: how we should live, what we should do and how we want our world shaped. This has a place in our field. </p>

  592. 

  593. <p>Ethics isn't part of most computer science degrees, or design programmes, but our work clearly often shapes the world. The question of _how_ to shape the world seems super relevant. I may be biased.</p>

  594. 

  595. 

  596.     </div>

  597. </div>

  598. 

  599. <div class="slide slide--bordered">

  600.     <div class="slide-image">

  601.         <img src="images/images.013.jpg" alt="Image of slide number 13" />

  602.     </div>

  603.     <div class="slide-notes">

  604.               <p>Example of website that shapes the world: Facebook. This website encourages certain behaviours. </p>

  605. 

  606. <p>If it's your friend's birthday, it prompts you to send them a message, many others have already written on this person's wall, it's the right thing! </p>

  607. 

  608. <p>In election time they urge you to vote. </p>

  609. 

  610. <p>Their algorithms influence what you read. </p>

  611. 

  612. <p>And then there's the company's alleged influence on various elections. Lots of moral dimensions to that, as well.</p>

  613. 

  614. 

  615.     </div>

  616. </div>

  617. 

  618. <div class="slide slide--bordered">

  619.     <div class="slide-image">

  620.         <img src="images/images.014.jpg" alt="Image of slide number 14" />

  621.     </div>

  622.     <div class="slide-notes">

  623.               <p>Netflix influences what we do culturally, what kind of stuff we watch. </p>

  624. 

  625. <p>Its algorithms provide us suggestions based on what we watched before, this may include more things in the same bubble.</p>

  626. 

  627. 

  628.     </div>

  629. </div>

  630. 

  631. <div class="slide slide--bordered">

  632.     <div class="slide-image">

  633.         <img src="images/images.015.jpg" alt="Image of slide number 15" />

  634.     </div>

  635.     <div class="slide-notes">

  636.               <p>AirBnB is a website that changes what we do: in many big cities people now buy houses with extra floors so that they can AirBnB. There are ethical questions to be asked.</p>

  637. 

  638.     </div>

  639. </div>

  640. 

  641. <div class="slide slide--bordered">

  642.     <div class="slide-image">

  643.         <img src="images/images.016.jpg" alt="Image of slide number 16" />

  644.     </div>

  645.     <div class="slide-notes">

  646.               <p>These are just random examples, in general I think there are many ethical questions to be asked about the web we create. The web influences how we live, what to do and how we want our world shaped. So I thought it would be fun to dive into the history of philosophical ethics and look at some thought experiments.</p>

  647. 

  648. <p>Although I'd argue this applies to our field, this doesn't _directly_ apply to our field or our daily work. And the examples as I use them, they don't necessarily make sense in academic philosophy. Also, I don't have access to academic papers, because almost all of those are, although they;'re on the web, behind an enormous pay wall. My professors may laugh at me for making some of the links I make. That's ok.</p>

  649. 

  650. 

  651.     </div>

  652. </div>

  653. 

  654. <div class="slide slide--bordered">

  655.     <div class="slide-image">

  656.         <img src="images/images.017.jpg" alt="Image of slide number 17" />

  657.     </div>

  658.     <div class="slide-notes">

  659.               <p>For this talk, I've taken three different ethical stances in order to walk you through the history of ethics. With huge leaps.</p>

  660. 

  661. <p>These are all western white men, and they are western, please note there is fantastic eastern philosophy out there too. In the following, we'll look at the ideas of Aristotle, Immanuel Kant and Jeremy Bentham.</p>

  662. 

  663. 

  664.     </div>

  665. </div>

  666. 

  667. <div class="slide slide--bordered">

  668.     <div class="slide-image">

  669.         <img src="images/images.018.jpg" alt="Image of slide number 18" />

  670.     </div>

  671.     <div class="slide-notes">

  672.               <p>This is Aristotle, a statue of him, rather.</p>

  673. 

  674. <p>You could think of Aristotle as the first to write a systematic book about ethics, as a distinct subject (distinct from things like natural science). His moral philosophy had at its goal to help people live a life full of happiness.</p>

  675. 

  676. 

  677.     </div>

  678. </div>

  679. 

  680. <div class="slide slide--bordered">

  681.     <div class="slide-image">

  682.         <img src="images/images.019.jpg" alt="Image of slide number 19" />

  683.     </div>

  684.     <div class="slide-notes">

  685.               <p>So what's happiness then? Well, according to Aristotle, those who've reached a state of happiness are those who are virtuous, good of character. </p>

  686. 

  687. <p>So, doing the right thing, for him, isn't really about learning a fixed set of rules, it is about learning certain character traits.</p>

  688. 

  689. 

  690.     </div>

  691. </div>

  692. 

  693. <div class="slide slide--bordered">

  694.     <div class="slide-image">

  695.         <img src="images/images.020.jpg" alt="Image of slide number 20" />

  696.     </div>

  697.     <div class="slide-notes">

  698.               <p>Some examples of the character traits that he said were important for being a good person: honesty, moderation, generosity, friendliness and courage.</p>

  699. 

  700.     </div>

  701. </div>

  702. 

  703. <div class="slide slide--bordered">

  704.     <div class="slide-image">

  705.         <img src="images/images.021.jpg" alt="Image of slide number 21" />

  706.     </div>

  707.     <div class="slide-notes">

  708.               <p>Those who have mastered the skills of the various virtues will live well, they'll be happy, according to Aristotle. That's what we're doing this for. But we don't get this by chance, we have to work very hard, to become virtuous. It's our responsibility to acquire the skills.</p>

  709. 

  710.     </div>

  711. </div>

  712. 

  713. <div class="slide slide--bordered">

  714.     <div class="slide-image">

  715.         <img src="images/images.022.jpg" alt="Image of slide number 22" />

  716.     </div>

  717.     <div class="slide-notes">

  718.               <p>Aristotle saw ethical virtues as being intermediate between two extremes, for example courage is between having fear (you're too afraid to do anything and end up doing nothing) on the one hand, and having way too much courage and doing dangerous things all the time on the other. </p>

  719. 

  720. <p>The mean is not necessarily right in the middle, it's not like 1 is too little, 10 is too much, so 5 is perfect. The skilled ethical person will be able to decide per situation whether to be at 2, 3, maybe 8.</p>

  721. 

  722. 

  723.     </div>

  724. </div>

  725. 

  726. <div class="slide slide--bordered">

  727.     <div class="slide-image">

  728.         <img src="images/images.023.jpg" alt="Image of slide number 23" />

  729.     </div>

  730.     <div class="slide-notes">

  731.               <p>So as an Aristotle scholar wrote, finding the mean requires full and detailed acquaintance with the circumstances. You can't just follow some procedure.</p>

  732. 

  733.     </div>

  734. </div>

  735. 

  736. <div class="slide slide--bordered">

  737.     <div class="slide-image">

  738.         <img src="images/images.024.jpg" alt="Image of slide number 24" />

  739.     </div>

  740.     <div class="slide-notes">

  741.               <p>If there is one thing we can take from Aristotle's thinking, it is that doing it the right way depends. It's about dealing with circumstances, having a certain attitude.</p>

  742. 

  743.     </div>

  744. </div>

  745. 

  746. <div class="slide slide--bordered">

  747.     <div class="slide-image">

  748.         <img src="images/images.025.jpg" alt="Image of slide number 25" />

  749.     </div>

  750.     <div class="slide-notes">

  751.               <p>Accessibility advice can be quite theoretical at times. I.e. it is one thing to know that heading structures should not be skipped, but maybe you are implementing a CMS that has a WYSWIG editor that does allow skipping heading levels. Most do. </p>

  752. 

  753. <p>Now, i Aristotelean terms, it is about your skill, how you deal with the circumstances. Do you propose installing a different editor there, or do you spend some time on guidelines for the content people?</p>

  754. 

  755. 

  756.     </div>

  757. </div>

  758. 

  759. <div class="slide slide--bordered">

  760.     <div class="slide-image">

  761.         <img src="images/images.026.jpg" alt="Image of slide number 26" />

  762.     </div>

  763.     <div class="slide-notes">

  764.               <p>Or maybe the advice is to use semantic markup and the codebase you've ended up in uses a plugin to generate forms and it generates terrible markup that is not accessible. That's bad, but the question is how you deal with it. If you've trained your virtues, you're probably going to work towards a solution… maybe hack into the plugin, research an alternative, use JavaScript to tweak things… </p>

  765. 

  766.     </div>

  767. </div>

  768. 

  769. <div class="slide slide--bordered">

  770.     <div class="slide-image">

  771.         <img src="images/images.027.jpg" alt="Image of slide number 27" />

  772.     </div>

  773.     <div class="slide-notes">

  774.               <p>Vasilis tweets this every month: a monthly reminder that your visitors are not statistics but actual people. He links to the excellent… </p>

  775. 

  776.     </div>

  777. </div>

  778. 

  779. <div class="slide slide--bordered">

  780.     <div class="slide-image">

  781.         <img src="images/images.028.jpg" alt="Image of slide number 28" />

  782.     </div>

  783.     <div class="slide-notes">

  784.               <p>…Alphabet of Accessibility  Issues, which lists so many different cases of people who experience accessibility issues.</p>

  785. 

  786. <p>There's a lesson there: in the real world, there are lots of circumstances, lots of reasons people need your product to be more accessible. </p>

  787. 

  788. 

  789.     </div>

  790. </div>

  791. 

  792. <div class="slide slide--bordered">

  793.     <div class="slide-image">

  794.         <img src="images/images.029.jpg" alt="Image of slide number 29" />

  795.     </div>

  796.     <div class="slide-notes">

  797.               <p>So maybe we should regard finding the mean accessible solution as a skill. As a skill that takes practice to learn. I mean, this is stretching what Aristotle meant with his virtue theory, but the idea of something that isn't a set of rules but rather skilfully applying our ideas of what's right.</p>

  798. 

  799.     </div>

  800. </div>

  801. 

  802. <div class="slide slide--bordered">

  803.     <div class="slide-image">

  804.         <img src="images/images.030.jpg" alt="Image of slide number 30" />

  805.     </div>

  806.     <div class="slide-notes">

  807.               <p>And then we get to the Enlightment. Kant is one of the best-known philosophers from that time. He was extremely influential in many fields of philosophy, and ethics is certainly one of them.</p>

  808. 

  809.     </div>

  810. </div>

  811. 

  812. <div class="slide slide--bordered">

  813.     <div class="slide-image">

  814.         <img src="images/images.031.jpg" alt="Image of slide number 31" />

  815.     </div>

  816.     <div class="slide-notes">

  817.               <p>Typical for Kant's ethics is that he regards people as rational. We (probably) all think. We have responsibilities, we can think things through. This was his way of coming up with a theory that works universally: we have all brains, so we are all able to think things through.</p>

  818. 

  819. <p>Unsurprisingly, in deciding whether something is the right thing to do, he focuses on the reasons why we do things. </p>

  820. 

  821. <p>Kant reckoned we have moral duties. The one he is most famous for is something he calls the categorical imperative.</p>

  822. 

  823. 

  824.     </div>

  825. </div>

  826. 

  827. <div class="slide slide--bordered">

  828.     <div class="slide-image">

  829.         <img src="images/images.032.jpg" alt="Image of slide number 32" />

  830.     </div>

  831.     <div class="slide-notes">

  832.               <p>Let's break the two parts of that phrase down. </p>

  833. 

  834. <p>Categorical in this sense means something like universal, applying to all of us. Imperative means this is an obligation.</p>

  835. 

  836. 

  837.     </div>

  838. </div>

  839. 

  840. <div class="slide slide--bordered">

  841.     <div class="slide-image">

  842.         <img src="images/images.033.jpg" alt="Image of slide number 33" />

  843.     </div>

  844.     <div class="slide-notes">

  845.               <p>This is one of his definitions of the categorial imperative:</p>

  846. 

  847. <p>> Act only acording to that maxim by which you can at the same time will that it should become a universal law </p>

  848. 

  849. <p>For many philosophy students, this is the first and last time they see the word ‘maxim’ used. It can be seen as ‘rule’.</p>

  850. 

  851. <p>So only do stuff according to rules that you'd want to apply to everyone. This is about sticking to principles. If your principle is ‘don't lie’, you should never lie, including when a lie might be beneficial to yourself or your friends. </p>

  852. 

  853. 

  854.     </div>

  855. </div>

  856. 

  857. <div class="slide slide--bordered">

  858.     <div class="slide-image">

  859.         <img src="images/images.034.jpg" alt="Image of slide number 34" />

  860.     </div>

  861.     <div class="slide-notes">

  862.               <p>So this is the process. Make a rule, for example “I'll lie when it benefits me personally”. Then the second question, would not really work as it wouldn't make sense to implement a universal law that's just about you and your benefits. </p>

  863. 

  864. <p>If we make it about “Don't steal”, yea, that would work, it would make sense to have a rule that no-one can steal.</p>

  865. 

  866. 

  867.     </div>

  868. </div>

  869. 

  870. <div class="slide slide--bordered">

  871.     <div class="slide-image">

  872.         <img src="images/images.035.jpg" alt="Image of slide number 35" />

  873.     </div>

  874.     <div class="slide-notes">

  875.               <p>The difference between morality and prudence is important for Kant, too.</p>

  876. 

  877. <p>In Kants ethics, acting out of self interest can't be moral, you should always act out of principles. If you're a baker and you don't add poison into your bread because you don't want to lose clients, that is a prudential motivation. It has no meaning on the scale of morality. A moral reason would be something like “Don't poison your clients”.</p>

  878. 

  879. <p>Applied to accessibility, for Kant, we would improve the accessibility of our sites because we think that's how sites should be, this is how the web was intended. If you would do it only because it makes your company more profit, Kant wouldn't classify that as moral.</p>

  880. 

  881. 

  882.     </div>

  883. </div>

  884. 

  885. <div class="slide slide--bordered">

  886.     <div class="slide-image">

  887.         <img src="images/images.036.jpg" alt="Image of slide number 36" />

  888.     </div>

  889.     <div class="slide-notes">

  890.               <p>Most ethicists today will think of themselves as Kantian or utilitarian. So, making another huge jump in history, let’s look at what that means. This is Jeremy Bentham.</p>

  891. 

  892. <p>Utilitarianists decide what the right thing is by looking at outcomes, or the contribution of our actions on the world’s total happiness. The best way to act is the way that increases happiness the most. </p>

  893. 

  894. 

  895.     </div>

  896. </div>

  897. 

  898. <div class="slide slide--bordered">

  899.     <div class="slide-image">

  900.         <img src="images/images.037.jpg" alt="Image of slide number 37" />

  901.     </div>

  902.     <div class="slide-notes">

  903.               <p>Jeremy Bentham came up with what he called the greatest happiness principle. According to it, actions are right if they promote happiness, wrong if they promote the reverse of happiness. </p>

  904. 

  905.     </div>

  906. </div>

  907. 

  908. <div class="slide slide--bordered">

  909.     <div class="slide-image">

  910.         <img src="images/images.038.jpg" alt="Image of slide number 38" />

  911.     </div>

  912.     <div class="slide-notes">

  913.               <p>So the question to ask is: does my action increase the world's total happiness? It's like regarding the world's happiness as a basket and thinking of your actions as potential things you could put in there.</p>

  914. 

  915.     </div>

  916. </div>

  917. 

  918. <div class="slide slide--bordered">

  919.     <div class="slide-image">

  920.         <img src="images/images.039.jpg" alt="Image of slide number 39" />

  921.     </div>

  922.     <div class="slide-notes">

  923.               <p>The question that many utilitarians disagree about is what an increase in happiness means. Is it your own happiness, your company's happiness? Well for us, it is probably user happiness. </p>

  924. 

  925.     </div>

  926. </div>

  927. 

  928. <div class="slide slide--bordered">

  929.     <div class="slide-image">

  930.         <img src="images/images.040.jpg" alt="Image of slide number 40" />

  931.     </div>

  932.     <div class="slide-notes">

  933.               <p>The lesson for web accessibility that we can learn here is: make changes that increase happiness, avoid those that don't.</p>

  934. 

  935.     </div>

  936. </div>

  937. 

  938. <div class="slide slide--bordered">

  939.     <div class="slide-image">

  940.         <img src="images/images.041.jpg" alt="Image of slide number 41" />

  941.     </div>

  942.     <div class="slide-notes">

  943.               <p>For example, Twitter used to have a thing where you could see how many characters you had left. They have replaced this the other day with a donut chart. </p>

  944. 

  945. <p>Did it increase total happiness? Well, let's see how people responded. (I apologise in advance to those who have worked on this, I mean, it was probably a lot of work to build).</p>

  946. 

  947. 

  948.     </div>

  949. </div>

  950. 

  951. <div class="slide slide--bordered">

  952.     <div class="slide-image">

  953.         <img src="images/images.042.jpg" alt="Image of slide number 42" />

  954.     </div>

  955.     <div class="slide-notes">

  956.               <p>Alan Cooper said this is abysmally stupid and bad design, a triumph of style over substance.</p>

  957. 

  958.     </div>

  959. </div>

  960. 

  961. <div class="slide slide--bordered">

  962.     <div class="slide-image">

  963.         <img src="images/images.043.jpg" alt="Image of slide number 43" />

  964.     </div>

  965.     <div class="slide-notes">

  966.               <p>People seemed confused at best. Someone going by the name of Harvest Pixie Dream Witch said “what the heck is this gradually filling circle of tweet character doom”, to which numerous people responded that they didn't like.</p>

  967. 

  968. <p>I guess people don't like change in general. </p>

  969. 

  970. <p>Some were quick to respond and solve their issues with the thing.</p>

  971. 

  972. 

  973.     </div>

  974. </div>

  975. 

  976. <div class="slide slide--bordered">

  977.     <div class="slide-image">

  978.         <img src="images/images.044.jpg" alt="Image of slide number 44" />

  979.     </div>

  980.     <div class="slide-notes">

  981.               <p>Someone made a Chrome Extension to make the donut go away, as one does. </p>

  982. 

  983.     </div>

  984. </div>

  985. 

  986. <div class="slide slide--bordered">

  987.     <div class="slide-image">

  988.         <img src="images/images.045.jpg" alt="Image of slide number 45" />

  989.     </div>

  990.     <div class="slide-notes">

  991.               <p>So, according to utilitarianism, actions are moral when they increase happiness, they are not if they don't. </p>

  992. 

  993.     </div>

  994. </div>

  995. 

  996. <div class="slide slide--bordered">

  997.     <div class="slide-image">

  998.         <img src="images/images.046.jpg" alt="Image of slide number 46" />

  999.     </div>

  1000.     <div class="slide-notes">

  1001.               <p>Maybe we can look at this as: does my action increase the website's total accessibility? And look at this in a super broad sense. In no website, accessibility is the only aspect we worry about. In this, you can replace accessibility with performance, usability, et cetera.</p>

  1002. 

  1003. <p>And thinking about it like this, we can avoid the pitfall of thinking about accessibility as an all or nothing equation.</p>

  1004. 

  1005. 

  1006.     </div>

  1007. </div>

  1008. 

  1009. <div class="slide slide--bordered">

  1010.     <div class="slide-image">

  1011.         <img src="images/images.047.jpg" alt="Image of slide number 47" />

  1012.     </div>

  1013.     <div class="slide-notes">

  1014.               <p>As the awesome Léonie Watson likes to emphasise in her talks: “it doesn't have to be perfect, it just has to be a little bit better than yesterday”. Small improvements are helpful, they can increase the total amount of accessibility in this world.</p>

  1015. 

  1016.     </div>

  1017. </div>

  1018. 

  1019. <div class="slide slide--bordered">

  1020.     <div class="slide-image">

  1021.         <img src="images/images.048.jpg" alt="Image of slide number 48" />

  1022.     </div>

  1023.     <div class="slide-notes">

  1024.               <p>Concluding: so that is a couple of examples of attitudes philosophers have had towards ethics, how to live and deciding how to live. </p>

  1025. 

  1026. <p>Aristotle thought of it as developing certain character traits and gaining skills as it where.</p>

  1027. 

  1028. <p>Kant thought of it as a necessary, universal thing. For him motive matters. </p>

  1029. 

  1030. <p>Bentham thought of morality in terms of how their consequences: how they contribute to the world's happiness.</p>

  1031. 

  1032. 

  1033.     </div>

  1034. </div>

  1035. 

  1036. <div class="slide slide--bordered">

  1037.     <div class="slide-image">

  1038.         <img src="images/images.049.jpg" alt="Image of slide number 49" />

  1039.     </div>

  1040.     <div class="slide-notes">

  1041.               <p>So having looked at some background, let us now look at some thought experiments.</p>

  1042. 

  1043.     </div>

  1044. </div>

  1045. 

  1046. <div class="slide slide--bordered">

  1047.     <div class="slide-image">

  1048.         <img src="images/images.050.jpg" alt="Image of slide number 50" />

  1049.     </div>

  1050.     <div class="slide-notes">

  1051.               <p>This is the example:</p>

  1052. 

  1053. <p>You are looking at a trolley and as it is moving along, you notice there are five people on the track, which the trolley would kill if moving ahead. You have the chance to divert the trolley by pulling a lever. The diverted track has one person on it, and if moving ahead, that one person would get killed. Do you divert the trolley?</p>

  1054. 

  1055. <p>If you do, you save five people, but in turn you do kill one person. It's almost spreadsheet-based philosophy: the idea here is that killing one person is better than killing five.</p>

  1056. 

  1057. 

  1058.     </div>

  1059. </div>

  1060. 

  1061. <div class="slide slide--bordered">

  1062.     <div class="slide-image">

  1063.         <img src="images/images.051.jpg" alt="Image of slide number 51" />

  1064.     </div>

  1065.     <div class="slide-notes">

  1066.               <p>There's a video of the American rock star philosopher Michael Sandel who asks his students this question: what would you do? At this Harvard event, the majority of people put there hand up and voted for choosing to kill the one person, only a handful would drive ahead. </p>

  1067. 

  1068. <p>It seems that helping as many people as possible fits our moral intuitions.</p>

  1069. 

  1070. 

  1071.     </div>

  1072. </div>

  1073. 

  1074. <div class="slide slide--bordered">

  1075.     <div class="slide-image">

  1076.         <img src="images/images.052.jpg" alt="Image of slide number 52" />

  1077.     </div>

  1078.     <div class="slide-notes">

  1079.               <p>There is a variation on this, where there is only one track. A trolley approaches five people, who are tied to the track. You are standing on a bridge over the railway and you can see what is going to happen. The trolley is going to drive over those five people, and they will likely die. Now there is a man on the bridge and you are able to push him in front of the trolley. That would cause it to stop and save five lives. What would you do?</p>

  1080. 

  1081. <p>And what if the person you're pushing was actually a doctor? Or a recruiter?</p>

  1082. 

  1083. 

  1084.     </div>

  1085. </div>

  1086. 

  1087. <div class="slide slide--bordered">

  1088.     <div class="slide-image">

  1089.         <img src="images/images.053.jpg" alt="Image of slide number 53" />

  1090.     </div>

  1091.     <div class="slide-notes">

  1092.               <p>There's also the libertarian variation, where there are two tracks, again, and you can pull a liver to divert the trolley, however now the trolley would drive onto a road that is in fact private property and has a sign ‘no trespassing’.</p>

  1093. 

  1094.     </div>

  1095. </div>

  1096. 

  1097. <div class="slide slide--bordered">

  1098.     <div class="slide-image">

  1099.         <img src="images/images.054.jpg" alt="Image of slide number 54" />

  1100.     </div>

  1101.     <div class="slide-notes">

  1102.               <p>These examples are all about making the right choices, it is about making the right decisions.</p>

  1103. 

  1104.     </div>

  1105. </div>

  1106. 

  1107. <div class="slide slide--bordered">

  1108.     <div class="slide-image">

  1109.         <img src="images/images.055.jpg" alt="Image of slide number 55" />

  1110.     </div>

  1111.     <div class="slide-notes">

  1112.               <p>For example, maybe one of your team members love subtle. They love to go to restaurants with subtle names, wear subtle clothes and have subtle art on their walls. When they design an interface, they also like to use subtle shades of grey on a black background. It looks beautiful. </p>

  1113. 

  1114. <p>However, there might be another person who cannot use the subtle interface, because they are working on a train, their computer is on battery power and the brightness is set to low to save energy. They require contrast.</p>

  1115. 

  1116. <p>thz</p>

  1117. 

  1118. 

  1119.     </div>

  1120. </div>

  1121. 

  1122. <div class="slide slide--bordered">

  1123.     <div class="slide-image">

  1124.         <img src="images/images.056.jpg" alt="Image of slide number 56" />

  1125.     </div>

  1126.     <div class="slide-notes">

  1127.               <p>The good news is, in web accessibility, you do not need to kill either of these people. </p>

  1128. 

  1129. <p>But as you will likely only build one interface, you will need to choose between having lots of contrast or going for subtle.</p>

  1130. 

  1131. 

  1132.     </div>

  1133. </div>

  1134. 

  1135. <div class="slide slide--bordered">

  1136.     <div class="slide-image">

  1137.         <img src="images/images.057.jpg" alt="Image of slide number 57" />

  1138.     </div>

  1139.     <div class="slide-notes">

  1140.               <p>In this screenshot you can see a link that has focus. If you don't like the way this looks, you can choose between two solutions.</p>

  1141. 

  1142.     </div>

  1143. </div>

  1144. 

  1145. <div class="slide slide--bordered">

  1146.     <div class="slide-image">

  1147.         <img src="images/images.058.jpg" alt="Image of slide number 58" />

  1148.     </div>

  1149.     <div class="slide-notes">

  1150.               <p>You can set focus styles to outline: none in CSS. This removes the outline all together. But this makes the site unusable to some of your users. Or you can design a prettier focus indicator.</p>

  1151. 

  1152.     </div>

  1153. </div>

  1154. 

  1155. <div class="slide slide--bordered">

  1156.     <div class="slide-image">

  1157.         <img src="images/images.059.jpg" alt="Image of slide number 59" />

  1158.     </div>

  1159.     <div class="slide-notes">

  1160.               <p>As a web team working on digital interface, this is a lever you can pull! You can choose to make inclusive decisions. Consider how you can make your product usable for as many people as possible. </p>

  1161. 

  1162.     </div>

  1163. </div>

  1164. 

  1165. <div class="slide slide--bordered">

  1166.     <div class="slide-image">

  1167.         <img src="images/images.060.jpg" alt="Image of slide number 60" />

  1168.     </div>

  1169.     <div class="slide-notes">

  1170.               <p>Here's the second example, John Rawls' Veil of Ignorance, also known as the Original Position.</p>

  1171. 

  1172.     </div>

  1173. </div>

  1174. 

  1175. <div class="slide slide--bordered">

  1176.     <div class="slide-image">

  1177.         <img src="images/images.061.jpg" alt="Image of slide number 61" />

  1178.     </div>

  1179.     <div class="slide-notes">

  1180.               <p>Imagine a group of people is asked to come up with the fairest way to organise society, they can distribute wealth and justice in any way they would like. However, they are under a ‘veil’ and have no idea what their position in live would be. Rawls calls this the “original position”. They wouldn't know if they would live as a CEO of a multinational, as a care worker, or as the King. </p>

  1181. 

  1182.     </div>

  1183. </div>

  1184. 

  1185. <div class="slide slide--bordered">

  1186.     <div class="slide-image">

  1187.         <img src="images/images.062.jpg" alt="Image of slide number 62" />

  1188.     </div>

  1189.     <div class="slide-notes">

  1190.               <p>So this is the idea. “Amongst the essential features of this situation is that no one knows his place in society, his class position or social status, nor does any one know his fortune in the distribution of natural assets and abilities, his intelligence, strength and the like.”</p>

  1191. 

  1192. <p>This thought experiment assumes we are all rational human beings, and act in our own interest. The idea of the experiment is that if you don't know your specific situation in society, which he called “the original position”, you will make all accommodations to have an equal world. </p>

  1193. 

  1194. <p>You can't take your privilege, or lack thereof, into account, as you don't know about it just yet. It's got to be fair, even if you decide from self-interest. If you come up with a system that favours one sex, that would be against your interests if you end up being a member of the least favoured sex.</p>

  1195. 

  1196. <p>According to Rawls, if people take the Original Position, two principles will influence their decisions.</p>

  1197. 

  1198. 

  1199.     </div>

  1200. </div>

  1201. 

  1202. <div class="slide slide--bordered">

  1203.     <div class="slide-image">

  1204.         <img src="images/images.063.jpg" alt="Image of slide number 63" />

  1205.     </div>

  1206.     <div class="slide-notes">

  1207.               <p>The principle of equal liberty is that all of us should get as many liberties as possible, as long as everyone gets the same amount of them (as long as they are equally distributed).  </p>

  1208. 

  1209.     </div>

  1210. </div>

  1211. 

  1212. <div class="slide slide--bordered">

  1213.     <div class="slide-image">

  1214.         <img src="images/images.064.jpg" alt="Image of slide number 64" />

  1215.     </div>

  1216.     <div class="slide-notes">

  1217.               <p>If there is any inequality, this can be just, as long as it causes the least advantaged person to still be better off than without the inequality.</p>

  1218. 

  1219.     </div>

  1220. </div>

  1221. 

  1222. <div class="slide slide--bordered">

  1223.     <div class="slide-image">

  1224.         <img src="images/images.065.jpg" alt="Image of slide number 65" />

  1225.     </div>

  1226.     <div class="slide-notes">

  1227.               <p>This case is about taking away any advantages (or disadvantages) we have from our reasoning about how we should do things. When thinking about our digital projects, we should think from the original position. To put it bluntly: leave our privilege at home. </p>

  1228. 

  1229.     </div>

  1230. </div>

  1231. 

  1232. <div class="slide slide--bordered">

  1233.     <div class="slide-image">

  1234.         <img src="images/images.066.jpg" alt="Image of slide number 66" />

  1235.     </div>

  1236.     <div class="slide-notes">

  1237.               <p>Think beyond your own retina screen, beyond where you were born and beyond your own fast office WiFi. If you suffer from no colour blindness, leave that fact out of any arguments about colour choices.</p>

  1238. 

  1239.     </div>

  1240. </div>

  1241. 

  1242. <div class="slide slide--bordered">

  1243.     <div class="slide-image">

  1244.         <img src="images/images.067.jpg" alt="Image of slide number 67" />

  1245.     </div>

  1246.     <div class="slide-notes">

  1247.               <p>This example isn't really from philosophical ethics, it is from game theory, which has its origins in computer science, mathematics and economics. Let's look at it anyway.</p>

  1248. 

  1249.     </div>

  1250. </div>

  1251. 

  1252. <div class="slide slide--bordered">

  1253.     <div class="slide-image">

  1254.         <img src="images/images.068.jpg" alt="Image of slide number 68" />

  1255.     </div>

  1256.     <div class="slide-notes">

  1257.               <p>Two members of the same gang are taken to prison, and they have been locked separately, with no means to contact each other. They are in separate cells.</p>

  1258. 

  1259. <p>The prosecutor's don't have too much evidence against them, but enough to put them away for 1 year each. However, they decide to offer them a one year reduction, if they betray their friend. The friend would then get 3 years in prison, and they would walk out free. If they both take up on the offer, they would both get 2 years.</p>

  1260. 

  1261. 

  1262.     </div>

  1263. </div>

  1264. 

  1265. <div class="slide slide--bordered">

  1266.     <div class="slide-image">

  1267.         <img src="images/images.069.jpg" alt="Image of slide number 69" />

  1268.     </div>

  1269.     <div class="slide-notes">

  1270.               <p>The matrix looks something like this. Betraying gives more reward than staying silent, unless they both betray, in which case they would both be worse off.</p>

  1271. 

  1272.     </div>

  1273. </div>

  1274. 

  1275. <div class="slide slide--bordered">

  1276.     <div class="slide-image">

  1277.         <img src="images/images.070.jpg" alt="Image of slide number 70" />

  1278.     </div>

  1279.     <div class="slide-notes">

  1280.               <p>So you could say this problem is about conflicting interests that are leveraged unexpectedly.</p>

  1281. 

  1282. <p>We have lots of interests in our projects, don't we? I have gathered a couple of conversations that I have seen in my work. They might be familiar.</p>

  1283. 

  1284. 

  1285.     </div>

  1286. </div>

  1287. 

  1288. <div class="slide slide--bordered">

  1289.     <div class="slide-image">

  1290.         <img src="images/images.071.jpg" alt="Image of slide number 71" />

  1291.     </div>

  1292.     <div class="slide-notes">

  1293.               <p>In a project I worked on, the front-end dev said “Let's keep the focus indicator in place”. The designer argued against this, it wouldn't look good on their portfolio.</p>

  1294. 

  1295.     </div>

  1296. </div>

  1297. 

  1298. <div class="slide slide--bordered">

  1299.     <div class="slide-image">

  1300.         <img src="images/images.072.jpg" alt="Image of slide number 72" />

  1301.     </div>

  1302.     <div class="slide-notes">

  1303.               <p>There've been SEO experts dictating header structures that I wouldn't approve of as an accessibility nerd.</p>

  1304. 

  1305.     </div>

  1306. </div>

  1307. 

  1308. <div class="slide slide--bordered">

  1309.     <div class="slide-image">

  1310.         <img src="images/images.073.jpg" alt="Image of slide number 73" />

  1311.     </div>

  1312.     <div class="slide-notes">

  1313.               <p>Maybe management will say they are not convinced to let the team spend extra time on making accessibility improvements, as that costs money they would rather send on tv advertising.</p>

  1314. 

  1315.     </div>

  1316. </div>

  1317. 

  1318. <div class="slide slide--bordered">

  1319.     <div class="slide-image">

  1320.         <img src="images/images.074.jpg" alt="Image of slide number 74" />

  1321.     </div>

  1322.     <div class="slide-notes">

  1323.               <p>Interests and knowing about them can also work in our advantage. Sometimes lining up interests can be a method to achieve web accessibility. It isn't my favourite way to argue for accessibility, but… with the new Europe-wide accessibility legislation, governments and others have to follow WCAG2. </p>

  1324. 

  1325. <p>Making it accessible costs exponentially more when done in retrospective, it is cheaper to bake it in from the start.</p>

  1326. 

  1327. 

  1328.     </div>

  1329. </div>

  1330. 

  1331. <div class="slide slide--bordered">

  1332.     <div class="slide-image">

  1333.         <img src="images/images.075.jpg" alt="Image of slide number 75" />

  1334.     </div>

  1335.     <div class="slide-notes">

  1336.               <p>A good way to line up interests is to make a business case. This sounds boring… </p>

  1337. 

  1338.     </div>

  1339. </div>

  1340. 

  1341. <div class="slide slide--bordered">

  1342.     <div class="slide-image">

  1343.         <img src="images/images.076.jpg" alt="Image of slide number 76" />

  1344.     </div>

  1345.     <div class="slide-notes">

  1346.               <p>But it is not, as is proven by Alice Bartlett's fantastic talk about this at Fronteers 2015.</p>

  1347. 

  1348. <p>It's good for us people who make websites to learn and speak the language of people who pay for them. Also if we want to argue for accessibility.</p>

  1349. 

  1350. 

  1351.     </div>

  1352. </div>

  1353. 

  1354. <div class="slide slide--bordered">

  1355.     <div class="slide-image">

  1356.         <img src="images/images.077.jpg" alt="Image of slide number 77" />

  1357.     </div>

  1358.     <div class="slide-notes">

  1359.               <p>So to go back to the prisoner's dilemma… in the real world, you can often see the other person. They aren't locked somewhere, you can go and talk to them. Or at least figure out about their motives and their interests.</p>

  1360. 

  1361. <p>I've found this is a great way to get accessibility done in the places where I work. There are always overlapping interests, and they can be used to promote accessibility. </p>

  1362. 

  1363. 

  1364.     </div>

  1365. </div>

  1366. 

  1367. <div class="slide slide--bordered">

  1368.     <div class="slide-image">

  1369.         <img src="images/images.078.jpg" alt="Image of slide number 78" />

  1370.     </div>

  1371.     <div class="slide-notes">

  1372.               <p>Ok, those are the three thought experiments I've wanted to share with you today.</p>

  1373. 

  1374.     </div>

  1375. </div>

  1376. 

  1377. <div class="slide slide--bordered">

  1378.     <div class="slide-image">

  1379.         <img src="images/images.079.jpg" alt="Image of slide number 79" />

  1380.     </div>

  1381.     <div class="slide-notes">

  1382.               <p>So, in conclusion, when stretching the examples all the way from their original meaning towards a plan for more accesibility, these are my three takeways. </p>

  1383. 

  1384. <p>Make good choices, choose the inclusive thing. Divert the trolley into the inclusive direction and you don't even have to kill anyone! </p>

  1385. 

  1386. <p>Think beyond your own privilege. This can be quite hard. The other day I was building a sticky sidebar and while it was in progress I had hooked it onto the scroll event, for those of you who are also developers, that is terrible for performance. But I have a fast computer and it worked fine on that</p>

  1387. 

  1388. <p>Line up interests! Figure out what the interests are of the people who are blocking you from making accessible products, if there are any. </p>

  1389. 

  1390. 

  1391.     </div>

  1392. </div>

  1393. 

  1394. <div class="slide slide--bordered">

  1395.     <div class="slide-image">

  1396.         <img src="images/images.080.jpg" alt="Image of slide number 80" />

  1397.     </div>

  1398.     <div class="slide-notes">

  1399. 

  1400.     </div>

  1401. </div>

  1402. 

  1403. <div class="slide slide--bordered">

  1404.     <div class="slide-image">

  1405.         <img src="images/images.081.jpg" alt="Image of slide number 81" />

  1406.     </div>

  1407.     <div class="slide-notes">

  1408.               <p>The book Justice by American rock star philosopher Michael Sandel is quite an accessible introduction in questions around what the right thing to do is. There is also a video course with the same name.</p>

  1409. 

  1410.     </div>

  1411. </div>

  1412. 

  1413. <div class="slide slide--bordered">

  1414.     <div class="slide-image">

  1415.         <img src="images/images.082.jpg" alt="Image of slide number 82" />

  1416.     </div>

  1417.     <div class="slide-notes">

  1418.               <p>Ethics: The Essential Writings has a number of original texts, each introduced by Gordon Marino.</p>

  1419. 

  1420.     </div>

  1421. </div>

  1422. 

  1423. <div class="slide slide--bordered">

  1424.     <div class="slide-image">

  1425.         <img src="images/images.083.jpg" alt="Image of slide number 83" />

  1426.     </div>

  1427.     <div class="slide-notes">

  1428. 

  1429.     </div>

  1430. </div>

  1431.   </article>

  1432. </section>

  1433. 

  1434. 

  1435. <nav id="jumpto">

  1436.   <p>

  1437.     <a href="/david/blog/">Accueil du blog</a> |

  1438.     <a href="https://hiddedevries.nl/en/talks/2017-11-16-a11y-ethics/">Source originale</a> |

  1439.     <a href="/david/stream/2019/">Accueil du flux</a>

  1440.   </p>

  1441. </nav>

  1442. 

  1443. <footer>

  1444.   <div>

  1445.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  1446.     <p>

  1447.       Bonjour/Hi!

  1448.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  1449.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  1450.     </p>

  1451.     <p>

  1452.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  1453.     </p>

  1454.     

  1455.     <p>

  1456.       Voici quelques articles choisis :

  1457.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  1458.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  1459.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  1460.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  1461.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  1462.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  1463.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  1464.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  1465.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  1466.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  1467.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  1468.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  1469.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  1470.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  1471.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  1472.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  1473.     </p>

  1474.     <p>

  1475.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  1476.     </p>

  1477.     <p>

  1478.       Je ne traque pas ta navigation mais mon

  1479.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  1480.       conserve des logs d’accès.

  1481.     </p>

  1482.   </div>

  1483. </footer>

  1484. <script type="text/javascript">

  1485.   ;(_ => {

  1486.     const jumper = document.getElementById('jumper')

  1487.     jumper.addEventListener('click', e => {

  1488.       e.preventDefault()

  1489.       const anchor = e.target.getAttribute('href')

  1490.       const targetEl = document.getElementById(anchor.substring(1))

  1491.       targetEl.scrollIntoView({behavior: 'smooth'})

  1492.     })

  1493.   })()

  1494. </script>