Equal Rights & Inclusion for All

Username

blog.prototypr.io

•

5 years ago

Published on | Prototyping: From UX to Front End — Medium Aria Live <img class="rounded" src="https://cdn-images-1.medium.com/max/1200/1*V474p217CFoPRAdN4XK3cg.png"/></a><div class="py-6"><a class="underline text-gray-600 font-semibold" href="https://blog.prototypr.io/equal-rights-inclusion-for-all-ba6029ede1ed?source=rss----eb297ea1161a---4" target="_blank">Read more</a></div></div></div></div><div class="col-span-full mb-6 lg:mb-0 lg:col-span-3 order-last lg:order-last lg:block"><div class="sm:hidden block lg:block"><div class="bg-white border-gray-300 p-5 rounded-lg flex flex-row sm:flex-col"><a href="https://open.prototypr.io"><div class="relative rounded mb-2 w-full" style="height:148px"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" loading="lazy"/></noscript></span></div></a><div class="flex-col sm:px-0 px-4"><a href="https://open.prototypr.io" class="block sm:mt-1"><div class="text-sm cursor-pointer leading-5 font-medium text-gray-800"><p>We're an Open Source, Web Monetized project. Learn how to build your own Web Monetized website.</p> </div></a></div></div></div><div class="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16"><h1 class="text-sm font-semibold font-noto-serif mb-3">Top Stories</h1><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Design System to ‘NFT Design System’: Creating TinyFaces</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Neurodiversity and Inclusion: Choosing Kinder Design</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Web5 is here. Goodbye Web3? TBD." src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Web5 is here. Goodbye Web3? TBD." srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Web5 is here. Goodbye Web3? TBD.</div></div></div></div></div></div></div></div></main></div><footer class="bg-accent-1 border-accent-2"><div class="xl:container mx-auto px-3 pb-8 xl:px-8" style="max-width:1200px"><div class="w-full max-w-screen-xl relative mx-auto py-16 px-6"><div class="flex flex-wrap"><div class="w-full md:w-6/12"><p class="text-xl font-semibold">Get Prototypr Weekly</p><input class="hidden" value="hello@prototypr.io"/><p class="text-base mt-0 text-gray-700">Top articles and tools every week  💌</p><div class="rounded-md mb-12 lg:mb-0"><div><form class="sm:flex w-11/12 mt-5"><div class="sm:flex-1 sm:max-w-xs w-full"><label for="Email" class="sr-only ">Enter your email address</label><input type="text" id="Email" style="font-size:.875rem" placeholder="Enter your email address" name="emailRequired" class="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"/></div><div class="hidden email-octopus-form-row-hp" aria-hidden="true"><input type="text" name="hp1cc5fdf6-63b5-11ea-a3d0-06b4694bee2a" tabindex="-1" autoComplete="nope"/></div><div class="flex flex-col "><button aria-label="Sign up for newsletter" class="flex justify-center md:text-left items-center md:justify-between w-full px-5 py-3 mt-4 font-medium text-white bg-blue-default rounded-lg sm:w-auto sm:mt-0 sm:ml-3 hover:bg-blue-600" type="submit">Sign up<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-4 h-4 ml-3"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></button></div></form><div class="px-1 w-10/12 mx-auto"></div></div></div><p class="text-sm mt-6 text-gray-800 font-semibold">Created by <a class="text-blue-800 underline" href="https://twitter.com/annchichii">Ann</a>, <a class="text-blue-800 underline" href="https://twitter.com/graeme_fulton">Graeme</a>, and <a class="text-blue-800 underline" href="https://twitter.com/iamsofiamm">Sofia</a>. Illustrations by <a class="text-blue-800 underline" href="https://twitter.com/thisismimiespi">Mimi</a>.</p><p class="text-sm text-gray-700 font-semibold mt-2"> © 2020 Prototpyr, All rights reserved.</p></div><div class="w-full md:w-6/12"><div class="flex flex-wrap items-top mb-6"><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Good Stuff</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://github.com/Prototypr" target="_blank">Open Source</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" href="/posts">Prototypr Open</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://twitter.com/prototypr" target="_blank">Twitter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://instagram.com/prototyprio" target="_blank">Instagram</a></li></ul></div><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Other Resources</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://adobe.com/products/xd/adobe-fund.html" target="_blank">Adobe Fund for Design</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://grantfortheweb.org" target="_blank">Grant for the Web</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://interledger.org/" target="_blank">Web Monetization</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://letter.so" target="_blank">Mail by Letter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://prototypr.io/privacy-policy/" target="_blank">Privacy Policy</a></li></ul></div></div></div></div></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"preview":null,"post":{"attributes":{"title":"Equal Rights \u0026 Inclusion for All","slug":"equal-rights-inclusion-for-all","content":"\u003cp\u003ePublished on \u003ca href=\"https://blog.prototypr.io/equal-rights-inclusion-for-all-ba6029ede1ed?source=rss----eb297ea1161a---4\"\u003e| Prototyping: From UX to Front End \u0026mdash; Medium\u003c/a\u003e Aria Live \u003ciframe src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FlXiRH1QLEIocarBK0%2Ftwitter%2Fiframe\u0026amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Flgbt-pride-rainbow-flag-lXiRH1QLEIocarBK0\u0026#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FlXiRH1QLEIocarBK0%2Fgiphy.gif\u0026amp;key=a19fcc184b9711e1b4764040d3dc5c07\u0026amp;type=text%2Fhtml\u0026amp;schema=giphy\" width=\"435\" height=\"265\" frameborder=\"0\"\u003e\u003ca href=\"https://medium.com/media/379588f6e07d39956902d73ffc0044a7/href\"\u003ehttps://medium.com/media/379588f6e07d39956902d73ffc0044a7/href\u003c/a\u003e\u003c/iframe\u003e\u003c/p\u003e\n\u003cp\u003eWhen I was a young boy 👦🏽, new to this country 🇺🇸 I recall the nervousness of starting at a new school where I did not speak the language and knew no one. I remember having moments where I felt so alone and out of place that I dreaded going to school. It’s been a very long time since I’ve thought about this, even now I can still feel that loneliness deep down. But the truth is–all it takes is for one person to come along and say “hello 👋🏻” to change this narrative. It’s incredible how something so simple at such a young age can be so significant. Thinking about accessibility, inclusion, and equal rights reminded me of this part of my life and what it’s like to not be thought of or included. Now, Let’s pause for one minute here, close your eyes and remember a moment in your life when you felt this way.\u003c/p\u003e\n\u003cp\u003eSo…this accessibility audit for the \u003ca href=\"https://www.unfe.org/\"\u003eUnited Nations, Free \u0026amp; Equal organization\u003c/a\u003e 🌈 is my way to contribute to their mission of equal rights and inclusion. Now, with all that being said, let’s begin. (See Fig. 1)\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*V474p217CFoPRAdN4XK3cg.png\"\u003eUnited Nations Free \u0026amp; Equal — Homepage (Fig. 1)\u003c/p\u003e\n\u003cp\u003eThere are typically three things that I can quickly do to see how accessible a site is.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe first is tabbing through the website to see if there are visual cues to help people navigate.\u003c/li\u003e\n\u003cli\u003eThe second is to look at the colors and visuals to see if there are any potential issues with contrast.\u003c/li\u003e\n\u003cli\u003eThe last thing is to look at the source code to make sure it is semantically structured, which is important for assistive technologies, such as screen readers, to properly read content.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eHere are some of the nifty \u003c/strong\u003e👍🏽 \u003cstrong\u003eweb accessibility features \u003c/strong\u003e\u003ca href=\"https://www.unfe.org/\"\u003e\u003cstrong\u003eFree \u0026amp; Equal\u003c/strong\u003e\u003c/a\u003e\u003cstrong\u003e \u003c/strong\u003e🌈 \u003cstrong\u003eare doing on their homepage:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e👍🏽 The navigation links, when they are grey text on a white background have \u003ca href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=767575,bg=FFFFFF\"\u003egreat contrast\u003c/a\u003e. (Fig. 2)\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*dC6pGFOpp28WvN7zGShR_w.png\"\u003eGrey Links on White Background — Color Contrast (Fig. 2)\u003c/p\u003e\n\u003cp\u003e👍🏽 The large black icons hover state on the blue image/background have \u003ca href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=000000,bg=5C799F\"\u003egreat contrast\u003c/a\u003e. (Fig. 3)\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/924/1*irw5_8Nztj22qEi2y4dweA.png\"\u003eBlack Icons on Blue Images — Color Contrast (Fig. 3)\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eNow here are some small and easy fixes I’d recommend updating to make the site even more accessible to users:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThere were a few things I found when tabbing that are simple fixes.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e⚠️ There are no visual cues when tabbing through the \u0026lt;a\u0026gt; tags aka anchor links making it challenging for some users who may need them to access content. (Fig. 4)\u003cbr /\u003e✅ I would recommend adding some CSS to make the links have cues. \u003ca href=\"https://codepen.io/RodrigoSanchez/project/full/XqOkkW\"\u003eHere is a CodePen example of how to do this\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*ePnfnUoJdIp8eZdUqAc3_g.png\"\u003eVisual Cues (Fig. 4)\u003c/p\u003e\n\u003cp\u003e⚠️ The navigation’s blue text on a white background has low contrast which could make it difficult for users to read. (Fig. 5)\u003cbr /\u003e✅ Here I would recommend making the text colors darker, as the blue is a bit too subtle. Here is a tool to help with figuring out the contrasts for the \u003ca href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=489DD6,bg=FFFFFF\"\u003eblue\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*MJUhn8AoqCCdTfayN3hgng.png\"\u003eColor Contrast (Fig. 5)\u003c/p\u003e\n\u003cp\u003e⚠️ The search icon must have discernible text. (Fig. 6)\u003cbr /\u003e✅ Here I would recommend adding an aria-label that describes the search.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*Cl0inTUbfVP-fmHCbrXoow.png\"\u003eDiscernable Text (Fig. 6)\u003c/p\u003e\n\u003cp\u003e⚠️ The footer’s “Stand up 4 human rights” link must have discernible text. (Fig. 7)\u003cbr /\u003e✅ Here I would recommend adding alt text that describes the graphic.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*OKuGJRRC0Lf2cCYHWUFUeA.png\"\u003eDiscernable Text (Fig. 7)\u003c/p\u003e\n\u003cp\u003e⚠️ The footer’s social media icon links must have discernible text. (Fig. 8)\u003cbr /\u003e✅ Here I would recommend adding alt text that describes the graphic.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*k071lyamEUvh1xqN0geTwA.png\"\u003eDiscernable Text (Fig. 8)\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThere were a few things I found with the masthead video.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e⚠️ The is no pause button which could make it challenging for some users to navigate through items layered on top of the video, such as links and copy. (Fig. 9)\u003cbr /\u003e✅ Here I would recommend the ability to pause the video by adding a button.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*MvOQ6L2BSQ715ifJOoV2_g.png\"\u003eVideo (Fig. 9)\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eWith regards to color contrast there are a few other small things.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e⚠️ The language selection link does not have enough contrast which could make it difficult for users to read. (Fig. 10)\u003cbr /\u003e✅ Here I would recommend making the text colors darker, as the white is a bit too subtle. Here is a tool to help with figuring out the contrasts for the \u003ca href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=489DD6\"\u003ewhite\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*03v9CGvaoH6KouFzF29Zzg.png\"\u003eLow Contrast (Fig. 10)\u003c/p\u003e\n\u003cp\u003e⚠️ All the white text on the blue backgrounds, blue tinted image backgrounds, and white text over most images do not have enough contrast which could make it difficult for users to read. (Fig. 11, Fig. 12 \u0026amp; Fig. 13)\u003cbr /\u003e✅ Here I would recommend making the text colors darker or lighter depending on the background, as the white is a bit too subtle. Here is a tool to help with figuring out the contrasts for the \u003ca href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=489DD6\"\u003ewhite\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*aSfqDP_Dy-qadSqaLprTew.png\"\u003eLow Contrast (Fig. 11)\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*4kuqNkwfZpRXSTM67IXhcg.png\"\u003eLow Contrast Footer (Fig. 12)\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*EngaPl7-Zj9Kwg-bbPeYPw.png\"\u003eLow Contrast Carousel (Fig. 13)\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThe Code:\u003cbr /\u003e\u003c/strong\u003e\u003cem\u003eI came across some things that would be easy fixes that could make a big difference for people.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e⚠️ The Slider headers aren’t actual headers but instead wrapped in a \u0026lt;div\u0026gt; (Fig. 14)\u003cbr /\u003e✅ Here I would recommend making the \u0026lt;div\u0026gt;\u0026lt;h\u0026gt; tags, making it easier for users to find content through the semantic structure.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*mOg5_KY6lqjApCoOcvhIDA.png\"\u003eSemantics (Fig. 14)\u003c/p\u003e\n\u003cp\u003e⚠️ The Slider paragraph content is wrapped in an \u0026lt;h1\u0026gt; instead of \u0026lt;p\u0026gt; which could lead to loss of headers relevancy with dense copy being wrapped in a header tag. (Fig. 15)\u003cbr /\u003e✅ Here I would recommend making the \u0026lt;h1\u0026gt; a \u0026lt;p\u0026gt; tag, since the content isn’t an actual header.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*NQK1vMgdzR1lLj89MY9UoQ.png\"\u003eSemantics (Fig. 15)\u003c/p\u003e\n\u003cp\u003eI hope this post will help you, developers, designers, and product managers when it comes to building your digital products. May this help you better understand how you can build a solid foundation using simple methods for your products. The ultimate goal is to make your products accessible to able body and disabled people, which in turn will save you money and make your product even better.\u003c/p\u003e\n\u003cp\u003eSee you very soon for another quick-fix accessibility audit! Can we fix it? Yes we can!\u003c/p\u003e\n\u003cblockquote\u003e\u003cp\u003e\u003cstrong\u003eAbout the organization:\u003cbr /\u003e\u003c/strong\u003eUN Free \u0026amp; Equal is the United Nations’ global campaign against homophobia and transphobia.\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003eInterested in donating today? \u003ca href=\"https://act.unfoundation.org/onlineactions/6iUbMBJAT0efv0YgjpxK1A2?ms=ConvioRedirect\"\u003eDonate here now\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eAbout me:\u003cbr /\u003e\u003c/strong\u003eI’m a Full-Stack Designer at \u003ca href=\"http://flightstudio1.com/index.html\"\u003eFlight Studio 1\u003c/a\u003e, where I focus on accessibility (a11y) as part of the user experience, front-end development, and graphic design. While understanding the interconnectedness and impact on society–which in turn, can help your business grow sustainably.\u003c/p\u003e\n\u003cp\u003eYou can also catch me working with my good friends at \u003ca href=\"https://equalentry.com/\"\u003eEqual Entry\u003c/a\u003e where we partner to ensure technology provides equivalent access to people of diverse abilities.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*WrJxlYPnO5ZjIMS_05whgQ.jpeg\"\u003eHi 👋🏽, I’m Rodrigo Sanchez.\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=ba6029ede1ed\" width=\"1\" height=\"1\" alt=\"stat?event=post.clientViewed\u0026amp;referrerSou\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://blog.prototypr.io/equal-rights-inclusion-for-all-ba6029ede1ed\"\u003eEqual Rights \u0026amp; Inclusion for All\u003c/a\u003e was originally published in \u003ca href=\"https://blog.prototypr.io\"\u003ePrototypr\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","seo":{"metaDesc":"","canonical":"https://prototypr.io/blog/equal-rights-inclusion-for-all/","opengraphModifiedTime":null,"opengraphPublishedTime":null,"opengraphTitle":"Equal Rights \u0026 Inclusion for All - Prototypr | Prototyping","opengraphDescription":"Published on | Prototyping: From UX to Front End \u0026mdash; Medium Aria Live https://medium.com/media/379588f6e07d39956902d73ffc0044a7/href When I was a young boy 👦🏽, new to this country 🇺🇸 I recall the nervousness of starting at a new school where I did not speak the language and knew no one. I remember having moments where I felt so [\u0026hellip;]","opengraphImage":null},"link":null,"date":"2017-11-30T04:47:54.000Z","legacyAttributes":{"link":"https://blog.prototypr.io/equal-rights-inclusion-for-all-ba6029ede1ed?source=rss----eb297ea1161a---4","imgUrl":null,"ogImage":"https://cdn-images-1.medium.com/max/1200/1*V474p217CFoPRAdN4XK3cg.png"},"ogImage":{"opengraphImage":null},"tags":{"data":[]},"legacyFeaturedImage":{"id":"3910","mediaItemUrl":null,"thumb":null},"featuredImage":{"data":null},"relatedArticles":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}],"author":{"data":null}}},"domain":"blog.prototypr.io","link":"https://blog.prototypr.io/equal-rights-inclusion-for-all-ba6029ede1ed?source=rss----eb297ea1161a---4","postDate":"\"2017-11-30T04:47:54.000Z\"","morePosts":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}]},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"equal-rights-inclusion-for-all"},"buildId":"ObAzqkbZVJyJ9VZeDkJMU","runtimeConfig":{"nextPlausiblePublicProxyOptions":{"customDomain":"https://analytics.prototypr.io","domain":"4.prototypr.io","selfHosted":true,"trailingSlash":false}},"isFallback":false,"dynamicIds":[7765,1477,7134,5683,5348,8721,8460,6675,9250],"gsp":true,"locale":"en-US","locales":["en-US","es-ES"],"defaultLocale":"en-US","scriptLoader":[]}</script></body></html>