davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Accessibility according to actual people with disabilities (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://axesslab.com/accessibility-according-to-pwd/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Accessibility according to actual people with disabilities (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://axesslab.com/accessibility-according-to-pwd/">Source originale du contenu</a></h3>
    <p>In this article I’ll summarize and group the main topics that people bring up in the thread.</p>

<p>But do click on the tweet and read through all the answers. It’s an awesome read for anyone interested in making the web a better place for all. And, in my opinion, a far better place to learn about accessibility than reading any checklist or standard.</p>

<h2 tabindex="-1" id="lack-of-captions">Lack of captions</h2>

<p>Videos without captions (subtitles) was by far the obstacle that most people commented on. Here is what a few had to say:</p>

<blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Being deaf, got to say captioning videos is number one issue for me</p><p>— Jay Jackson (@jjackson) <a href="https://twitter.com/jjackson/status/871209439856009216">4 juni 2017</a></p></blockquote>

<p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Video/audio with no captioning or transcript.</p><p>— Katelyn Reilly (@k_hack) <a href="https://twitter.com/k_hack/status/871189568187322368">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I’m hard of hearing so big pain for me is video with no captions. tweet or article just says “can u believe he said this?” &amp; no summary</p><p>— Carol Carpenter (@carolmcarpenter) <a href="https://twitter.com/carolmcarpenter/status/871067344038219776">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Also, my sister says that she hates it when she comes across videos that are not closed captioned. She’s Deaf.</p><p>— Erica Boleyn (@radcrochetqueer) <a href="https://twitter.com/radcrochetqueer/status/871104664544137216">3 juni 2017</a></p></blockquote><p/><p>Non-existing captions is something that can completely exclude users who are deaf or hard of hearing. But it affects many others as well. Anyone on the bus who forgot their headphones. Or some autistic users:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">I’m Autistic and when I get overloaded, it’s harder to process auditory input. Especially if the person talking is offscreen or something</p><p>— act up, fight back (@UntoNuggan) <a href="https://twitter.com/UntoNuggan/status/871063283951960064">3 juni 2017</a></p></blockquote><p><br/>
Many are hoping that automatic captioning solves this problem. But alas, not yet!</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Not really YouTube’s auto subtitling is not accurate enough.</p><p>— Robin (@tohereknowswhe) <a href="https://twitter.com/tohereknowswhe/status/871067630165270528">3 juni 2017</a></p></blockquote><p><br/>
And the auto-captioning feature sadly isn’t available for most languages. So it’s still up to the video creators to caption.</p><h2 tabindex="-1" id="motion-animations-and-cluttered-pages">Motion, animations and cluttered pages</h2><p>Motion and animation can be annoying to anyone, but is extra frustrating to many users with cognitive impairments:</p><blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="sv"><p dir="ltr" lang="en">ADHD: If there’s a “subtle” animation always running, I cannot focus. Biggest offender: <a href="https://t.co/KgfCA4a7lB">https://t.co/KgfCA4a7lB</a>‘s header gradient</p><p>— Taylor Hunt (@tigt_) <a href="https://twitter.com/tigt_/status/871061419600510978">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Assuming ADHD counts, it’s hard to locate content on overly busy pages and animations are a nightmare of distraction. <a href="https://twitter.com/hashtag/clickthemonkey?src=hash">#clickthemonkey</a></p><p>— mkb (@mojinations) <a href="https://twitter.com/mojinations/status/871173727601307648">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">related, I’m also autistic and can get frustrated with, or repelled by, glitzy mouseover effects/animations, sudden autoplay, etc.</p><p>— back at the holler (@elementnumber46) <a href="https://twitter.com/elementnumber46/status/871065807165558786">3 juni 2017</a></p></blockquote><p/><p>Do your users a favor by not distracting them with autoplaying videos, advertisements or image carousels.</p><h2 tabindex="-1" id="wall-of-text">Wall of text</h2><p>Many replies, especially from people with dyslexia or cognitive impairments, were about large chunks of text.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Dyslexic – not really seen as a disability, but large walls of text is painful.<br/>
Also never ending sentences and over complicated language.</p><p>— Mustafa Kurtuldu (@Mustafa_x) <a href="https://twitter.com/Mustafa_x/status/871138503408615428">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">When ppl type large blocks of text w/ no spaces added</p><p>— Dead Ass (@MeBeShe4815) <a href="https://twitter.com/MeBeShe4815/status/871082326578548736">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Huge paragraphs. A page on Wikipedia often consists of many long paragraphs with long sentences. I lose my place within seconds.</p><p>— Ava Jarvis Art (@AvaJarvisArt) <a href="https://twitter.com/AvaJarvisArt/status/871057896267694080">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">ADHD + large, uninterrupted blocks of text or small bits of animation not part of the main content of a page</p><p>— back at the holler (@elementnumber46) <a href="https://twitter.com/elementnumber46/status/871064762481872897">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Large paragraphs, too many moving images, too much content as videos (especially help files), no subtitles, pages with too much going on.</p><p>— Polenth Blake (@Polenth) <a href="https://twitter.com/Polenth/status/871080703370424321">3 juni 2017</a></p></blockquote><p/><p>The solution is so simple. Just create more paragraphs and sub-headings! And throw in more bullet-lists. Voilà!</p><h2 tabindex="-1" id="small-font-size">Small font size</h2><p>Amazingly there’s no minimum font size requirement in the Web Content Accessibility Guidelines. Even though it affects so many low-vision users.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Nearly blind in my left eye. Tiny, thin font with low contrast to the background</p><p>— ⚡️Andrew So⚡️ (@AndrewDixonSo) <a href="https://twitter.com/AndrewDixonSo/status/871062142799142913">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Fonts are often too small and sites break when I increase font sizes.</p><p>— Brandon Savage (@brandonsavage) <a href="https://twitter.com/brandonsavage/status/871067906414608387">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Tiny font size and certain animations.</p><p>— Morgan Estes (@morganestes) <a href="https://twitter.com/morganestes/status/871070319129145348">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="zooming-problems">Zooming problems</h2><p>Some users with low vision point to layout and navigation problems when zooming or increasing font-size.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">My daughter has low vision and has to use 300-500% magnification. Many web sites are hard to navigate at this level</p><p>— Kir Kolyshkin (@kolyshkin) <a href="https://twitter.com/kolyshkin/status/871118386754801664">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Neurological vision problems due to CFS/ME. Small fonts, I browse everything with fonts enlarged, but sometimes it screws up the layout.</p><p>— Maija Haavisto (@DiamonDie) <a href="https://twitter.com/DiamonDie/status/871064350097854464">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">for visually challenged, it is understanding the layout</p><p>— VAMSI KRISHNA (@VamsiJKrishna) <a href="https://twitter.com/VamsiJKrishna/status/871081499608588288">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="low-contrasts-and-image-of-text">Low contrasts and image of text</h2><p>One of the cornerstones of accessibility, color contrast, is still a major problem in a lot of interfaces.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Lack of contrast between font color and background color. Photo backgrounds that overpower the text on top of them.</p><p>— Megan Lynch (@may_gun) <a href="https://twitter.com/may_gun/status/871175194328539136">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Text rendered as graphics instead of text with no alt tags, no image description. From websites to memes.</p><p>— Megan Lynch (@may_gun) <a href="https://twitter.com/may_gun/status/871175540849364992">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">That’s definitely lack of contrasts in colors</p><p>— charles dominic (@gamescharlie79) <a href="https://twitter.com/gamescharlie79/status/871069372655087617">3 juni 2017</a></p></blockquote><p/><p>So it is vital for web designers and art directors to understand how to measure and create accessible color schemes. Check out our list of <a href="http://axesslab.com/top-color-contrast-checkers/">seven great, free color contrasts tools</a>.</p><h2 tabindex="-1" id="bright-color-schemes">Bright color schemes</h2><p>Bright color schemes can be a big problem for users with low vision and is something that gets too little focus in accessibility discussions. It was interesting how many commented on it in the thread, and the different strategies they had to get around the problem:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">(cont) so this is fairly simple but I really appreciate the “night” modes that some things have. Less eye strain that way.</p><p>— Callie 🌈 (@cxllielayne) <a href="https://twitter.com/cxllielayne/status/871211274582937601">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">re: frequent &amp; debilitating migraines, so many sites are coded with light color scheme&amp;I can’t use them even w/ sunglasses on &amp; monitors dim</p><p>— Pyrrh-T900XV1 (@xpyrrh) <a href="https://twitter.com/xpyrrh/status/871085248250957824">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I need to be able to get the article onto my Kindle Oasis to avoid backlight. I’ve also found the reader feature to be hit-and-miss.</p><p>— Kal Cobalt (@kalcobalt) <a href="https://twitter.com/kalcobalt/status/871192692310409216">4 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="relying-only-on-color">Relying only on color</h2><p>This is also a cornerstone of accessibility that so many miss.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Colourblind. Text on background is usually fine, but things like colour-coded toggles, heatmaps, etc can be hard.</p><p>— Dan 🇪🇺 (@phrawzty) <a href="https://twitter.com/phrawzty/status/871279577758392321">4 juni 2017</a></p></blockquote><p/><p>It’s really easy to test, just view your site in greyscale. Here’s an example of a toggle that’s really difficult to understand when you take colors away. Which one is on and which one is off?</p><p/></div><div class="grid site-content"><p>And it’s not only people who are color-blind who need information to be conveyed in other ways than color:</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Sleep disorder: I have to read after 5pm with f.lux cranked up all the way, so sites that assume hyperlinks can be blue w/no underline…</p><p>— Taylor Hunt (@tigt_) <a href="https://twitter.com/tigt_/status/871061632155340800">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="mouse-focused-sites">Mouse-focused sites</h2><p>Even in this day of the touch-screen-revolution, too many sites still rely on mouse interaction. Especially for navigation on large screens. That needs to change.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I don’t have one but my mother has Parkinson diseas and mouse Interactions are really hard for​ her</p><p>— A dev has no name (@KodierKroete) <a href="https://twitter.com/KodierKroete/status/871175620146982912">4 juni 2017</a></p></blockquote><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">The number of sites which insist on using mouse over as the only means of menu triggering.</p><p>— Zack (@zkline) <a href="https://twitter.com/zkline/status/871063757715193856">3 juni 2017</a></p></blockquote><p>For some users with motor impairments that navigate using only their keyboard, a clear <a href="http://www.outlinenone.com/">focus outline</a> is vital to being able to navigate the web.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Lack of focus outlines. Especially on links (they look ugly to most designers so they remove them) and custom components (eg dropdowns).</p><p>— nuton.dev (@NutonDev) <a href="https://twitter.com/NutonDev/status/871096476423925761">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="too-small-touch-targets">Too small touch-targets</h2><p>This topic is related to the mouse-focused heading above. Many people bring up the problem with too small touch targets.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">My brother-in-law has cerebral palsy, buttons and links are too small for him to use. He can only use touch because he can’t hold a mouse.</p><p>— Gary Rozanc (@garyrozanc) <a href="https://twitter.com/garyrozanc/status/871061173545963522">3 juni 2017</a></p></blockquote><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Mobile twitter is also rly hard bc I have a tremor + visual-spatial processing issues. Often will click on the wrong thing by mistake.</p><p>— (((self crytptid))) (@plathituudes) <a href="https://twitter.com/plathituudes/status/871083069008228352">3 juni 2017</a></p></blockquote><p>A great new insight for me came from Dave Ross who brought up the problem of too large click targets:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">(Sometimes I have hand tics that make precise mouse control hard or I tap a touchscreen screen unnecessarily)</p><p>— Dave Ross (@csixty4) <a href="https://twitter.com/csixty4/status/871116621548486657">3 juni 2017</a></p></blockquote><p>Multi-touch gestures are also a deal-breaker for some users.</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">Yes! Kindle app has this “tap twice &amp; hold” to get to the menu 4 display settings on books and it is super difficult. (Hand deformity)</p><p>— Kristen Anne Strater (@KristenAnneSF) <a href="https://twitter.com/KristenAnneSF/status/871230651357331460">4 juni 2017</a></p></blockquote><h2 tabindex="-1" id="captchas">CAPTCHAS</h2><p>Finally, we end with a classic accessibility failure: the dreaded CAPTCHA. Annoying everyone who comes across it, but completely locking out many with visual impairments or learning disabilities.</p></div><div class="grid site-content"><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">As to what drives her nuts, non-accessible captchas are the top. It can severely limit which services are available to her.</p><p>— Danny Does Code (@DannyDoesCode) <a href="https://twitter.com/DannyDoesCode/status/871083590456492032">3 juni 2017</a></p></blockquote><h2 tabindex="-1" id="final-thoughts">Final thoughts</h2><p>Reflecting on the answers to this thread, a few things become clear:</p><ul><li>Web accessibility is about so much more than just blind people with screen readers.</li><li>Basically everything that people with disabilities comment on are things that annoy everyone, so fixing these issues makes your interface better for all users!</li><li>A lot of what people comment on is not covered by the <a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines</a>. So you need to <a href="http://axesslab.com/skip-the-wcag-user-test-with-people-with-disabilities-instead/">test with users with disabilities</a>!</li></ul><p>So thank you Safia Abdalla for tweeting your question. And thanks for everyone who responded and taught me (<a href="https://twitter.com/hampelusken">@hampelusken</a>), and many others, a lot about accessibility.</p><h2>Get notified when we write new stuff</h2><p>About once a week we write an article about accessibility or usability, that’s just as awesome as this one (#HumbleBrag)!</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://axesslab.com/accessibility-according-to-pwd/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>