You get a11y, you get a11y, everyone gets a11y!

<p><span class="drop-cap">A</span> few years ago I got interested in usability. I was interested in how a website can redefine itself to invite the user to browse it, be engaged, understand the functionality.</p> <p>I thought about my older relatives, who keep <em>misunderstanding</em> the functionality of some sites and need to ask me to help them browse the web most of the time. <em>Later on, I realized that there were other aspects to this issue</em><strong>.</strong> I thought about my dad being color blind. His colorblindness is mild, but it’s there. I asked myself, does this affect his understanding of web functionality? What about all the people I know that have other types of disabilities? Oh my. I realized that <em>most of the web was not meant for any of them</em>.</p> <blockquote> <p><strong>You cannot trust color to be the sole medium of communication</strong>.</p> </blockquote> <p>Accessibility (a11y) comes in the picture. Great people thought about this and <em>did something about it</em>. </p> <p>They established <em>guidelines</em> for us, web developers, to follow.</p> <p>Here is my small list of tips and tricks that I started gathering to learn about the subject. Hope this helps <em>you</em> in understanding this issue and invites you to do something about it too.</p> <h2>First chapter: Colors are subjective</h2> <p>I see red, you might see green, I see light blue, you might not see it at all. I learned that <strong>you cannot trust color to be the sole medium of communication</strong>.</p> <h3>When the color is meant to be the message</h3> <p>As I stated before, color cannot be the only way to transmit a message. Instead, make sure it’s used to <em>complement</em> the message you’re trying to convey by changing <em>contrast, font sizes, font styles, and adding icons (more on this later)</em>.</p> <p>The easiest example to show you is an error message:</p> <img alt="Olivero error message" data-entity-type="file" data-entity-uuid="cc75dc69-c416-46cc-acc7-3b0c398f0e70" src="/sites/default/files/inline-images/Screenshot%20from%202020-10-01%2017-47-02.png" class="align-center" width="1241" height="98" loading="lazy" /> <p>This is a screenshot of Olivero, Drupal 9’s new theme. See how the red icon lets the user know there is something wrong? What if you didn’t see red? Well, <em>the icon would still be there</em>. Here’s another screenshot of the same message, now in grayscale:</p> <img alt="Olivero error message in greyscale" data-entity-type="file" data-entity-uuid="d0d4f038-00b9-488c-b698-2b23b107f8a2" src="/sites/default/files/inline-images/Screenshot%20from%202020-10-01%2017-47-10.png" class="align-center" width="1239" height="99" loading="lazy" /> <p>Grayscale sometimes <em>is</em> what users actually see (thank you <a href="https://www.drupal.org/u/andrewmacpherson">Andrew MacPherson</a> for correcting me on this), and it helps us notice <strong>contrast</strong>, <strong>shapes</strong>, and <strong>sizes</strong>. </p> <p>Because of this, it is a good exercise to test your site in grayscale colors: can you still read and understand everything? </p> <ul> <li><em>A tip here: use <a href="https://chrome.google.com/webstore/detail/greyscale/niolddlmnndioenelnjaimkigacoejjn">Greyscale Chrome extension</a> or similar.</em></li> </ul> <h3>Talking about <strong>contrast…</strong> </h3> <p>This is one of the main accessibility concerns, I’ve seen many designs that look polished, light, and beautiful, but the color palette is just not good enough to discern a bunch of text from its background. </p> <p>There is not much I can add here but this: <strong>if the text is not readable, your users are not going to read it.</strong> </p> <p>There are cool sites like <a href="https://webaim.org/resources/contrastchecker/">https://webaim.org/resources/contrastchecker/</a>, <a href="http://colorsafe.co/">http://colorsafe.co/</a> (our main image for this post is a screenshot of their site), or <a href="http://a11yrocks.com/colorPalette/">http://a11yrocks.com/colorPalette/</a> that let you check if your colors are good enough for any user to see and distinguish well.</p> <p>A cool trick I learned is that <em>if you cannot improve contrast</em>, another option is to make the fonts bigger, so keep that in mind too.</p> <h3>User actions</h3> <p>Now, going back to the colors… Say you have a button, and when you hover on that button, it slightly changes its color to let the user know that he is interacting with it.</p> <p>If you cannot see well, that subtle hint is lost. </p> <p>If the effect would however affect another aspect of the button, like it’s <strong>border</strong>, <strong>font-style</strong>, <strong>font-size</strong>,<strong> perhaps underlining the text</strong>, it would have a much better chance of reaching your user.</p> <p>See, I'm not a designer, so this might be uneasy on the eyes. What I want to show you, is that there are many variations we can do to make the web more accessible to our users.</p> <p>In this short video, I play around with a navigation bar. I start with subtle effects on hover, and then I start increasing the changes. I then play the same video on grayscale, to show why some extra steps are really necessary.</p> <div data-oembed-url="https://youtu.be/oLaNeSqtm6M"> <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/oLaNeSqtm6M?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1"></iframe></div> </div> <p>Hope this was helpful to you, that's it for today. More tips are coming, <em>stay tuned!</em></p> <center> <h3>NEED SOME HELP?...   <button type="button">Fill Our Contact Form!</button></h3> </center> <p> </p>