Forem: Erika with a 'k'

What is A11y and Why We Should Focus On It

Erika with a 'k' — Wed, 26 Jun 2019 21:19:46 +0000

Have you ever thought that you had a decent grasp on a subject, started digging around, barely scratched the surface and then realized you don't know your ass from your elbow when it comes to the subject at hand? This isn't a "me neither' situation. This is me. Waving my hand high. I am ashamed to admit that as an aspiring front end developer I really don't know much about accessibility. To be fair to myself, not enough people know enough. But that's okay because starting today we are going to work through it and become better together. My goal is to start with a high level overview of accessibility, walk through some code challenges and tutorials of building my portfolio and drop some (hopefully) helpful resources that you can start using to make the web awesome for all. Sound good? Good.

Ok, so what is Accessibility then?

According to W3.org in a nutshell, the web is designed to work for everyone, regardless of hardware, software, language, location or ability. When the web is meeting this goal it is accessible to a diverse and large variety of individuals and all is well. When the web doesn't meet this goal, people in certain demographics are excluded and lack the ability to participate equally, and that my friends is when we have a problem.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Basically, A11y is making sure everyone has equal access to the information we provide.

Who should practice Accessibility?

Everyone should. To which you would probably (rightfully) ask me why haven't I been implementing it myself? Well, I don't think I have a great answer, but my honest answer is simply put, ignorance. Most tutorials never make any mention of accessibility implementations, and when they do its maybe using Semantic HTML or adding vague image alt tags. Accessibility (or #A11y)is one of those topics that is portrayed as a niche developer skill, when in reality it is something we can all start implementing today to make the web a better place. There's tons of great information available, so no more excuses.

Who benefits from Accessibility?

Everyone. That's it. That's the answer. When most people think of accessibility they may think of technology such as screen readers or text to voice assistants which is just one population of people who need accessible products. We also want to include people who may have temporary disabilities- which can be things such as recovering from a recent illness or injury which can affect physical function.

Accessibility doesn't just include disabilities, we also want to consider situational factors and find ways to make sure that end user can still utilize our product. Language barriers and assumption of literacy can inadvertently exclude certain individuals. I'm currently in Paris, France and while I don't speak French, using systems and interpreting signs is so much more easier when there are intuitive icons to assist the user with understanding content. We also want to develop with users in mind who may have slower internet connections, by not weighing down an application with heavy and unnecessary images.

Where can I learn more about Accessibility?

I hope this brief overview has piqued your interest and also encouraged you to learn more about incorporating accessibility into your designs and projects. This of course if not an all inclusive list as there are many resources available to learn more, but these are good starting points to learn the basics.

Learning Resources

Google Developers https://developers.google.com/web/fundamentals/accessibility/

University of California at Berkeley https://webaccess.berkeley.edu/resources/tips/web-accessibility

Mozilla/MDN
https://developer.mozilla.org/en-US/docs/Web/Accessibility

W3C.org
https://www.w3.org/WAI/fundamentals/accessibility-intro/

The A11y Project
http://a11yproject.com/

Design Tools

Adobe
https://www.adobe.com/accessibility.html

Color Safe Accessible Color Palettes
http://colorsafe.co/

Auditing Tools

A11y Checker HTML checker
https://github.com/Muhnad/a11y-checker

A11y Color Contrast Accessibility Validator
https://color.a11y.com/?wc3

WAVE Web Accessibility Evaluation Tool
https://wave.webaim.org/

Thanks for reading, and I hope you join me for my future A11y posts. If you have any resources or best practices I'd love to hear about them so please leave them in the comments below!

My (Awesome) Experience With REFACTR.TECH 2019

Erika with a 'k' — Mon, 10 Jun 2019 02:40:17 +0000

This weekend I had the pleasure of attending REFACTR.TECH 2019 in Atlanta. This was a three day conference focused on providing technical content in a diverse and inclusive environment.
From their site,

REFACTR.TECH is all about growing and showcasing powerful voices of marginalized people and allies in tech. For three days, REFACTR.TECH focuses on technology while creating a safe space or thoughtful and nuanced conversations around diversity, inclusion, and intersectionality in tech.

Based on my experience I'd say they definitely met their goal! There were attendees from all ways of life, identities, skill levels and professions. As an up and coming Junior Developer I always felt comfortable asking (and answering!) questions without any fear of ridicule or feeling I didn't belong. I learned so much this weekend, so let's recap, shall we?

Day 1

Day 1 consisted of a variety of full day workshops including the free Vue Vixens workshop and AMP Roadshow. Vue Vixens is an initiative that aims to create workshops to teach Vue.js in a cool and fun way to foxy people who identify as women. AMP is short for Accelerated Mobile Pages, and The AMP Project is an open source initiative aimed at making the web awesome for everyone by providing consistently fast, beautiful and high performing sites across devices and platforms. I did not attend those, but I know people who did and walked away quite the wiser and filled with new information to implement.

I attended the Gatsby Workshop hosted by the awesome Brandon Kearns of Home Depot. At first, I was nervous because I only knew the very basics of React and the only thing I knew about Gatsby is that it's a "Blazing fast static site generator". My fears were quickly put aside as Brandon made sure no one was left behind and we learned how to get the environment up and running and before we knew it we were well on our way to creating our first Gatsby site. Thanks to this workshop I learned that Gatsby v=can be used for so much more and that when paired with GraphQL it can be a very powerful tool to have under your belt. I look forward to incorporating the knowledge I learned into my personal site later this year.

You can find full descriptions of the workshops and the presenters here.

Day 2

Day 2 consisted of a variety of 45 minute talks broken down into tracks such as Front End Engineering, Software Engineering, Product/UX/UI, Social Impact and Community, Career and Leadership, and Cool Shit. The coolest part is that you didn't have to commit to just one track, so people like myself with a variety of interests could take in as much as you could fit into your schedule. There were more talks than you could shake a stick at and for a full overview go here.

I mainly focused on the Front End Engineering track, and started off with a presentation on Progressive Web Apps (PWAs) by Mike Hartington. I'd always heard of the phrase but never really knew what they were, so that was pretty cool. Next, I attended the React Accessibility talk by Tae'lur Alexis Founder of Codeeveryday.io.

Tae'lur Alexis ⚛️🦄

@taeluralexis

My talk at @RefactrTech on Accessibility in React!

I did it! Executed the plan. I presented in front of a packed audience (who were all engaged & supportive). I met w/ ppl who've been following my journey on Twitter & hearing how my transparency inspires them was everything 💕🤓

16:50 PM - 06 Jun 2019

45 478

Billions of people use the internet with new people having their first experience every day, and it's crucial that we as developers make sure that everyone has the same experiences when they access our products.Accessibility is not something that is taught as part of the basics and going forward I am pledging to make sure I am making accessible products and teaching/engaging others on it's importance.

By the end of day 3 my mind was overflowing with information, but I was ready for more (and a nap).

Day 3

Day three consisted of more keynotes and breakout sessions.

Tying into the fact that billions now have access to the web with new people gaining access daily, did you know that mobile/tablet usage amongst internet users has now surpassed desktop? Planet of the API's by Henri Helvetica addressed this and focused on API's that we can use to measure and increase the efficacy of our applications resource loading and page renders which is highly important since we want people to have speedy mobile user experiences amongst differing networks and devices.

I knew VSCode was awesome but on day 3 I learned I was definitely not using it to its full capacity in the workshop Visual Studio Code Sparks Joy by Craig Rodrigues. I definitely picked up a few extensions such as Prettier and useful hints and tips that I will be incorporating into my workflow. Work smarter, not harder amirite?

I'm not quite ready to start interviewing yet, but I am more than prepared thanks to A React Developer’s Guide to Tech Interviews by Salesloft UI Engineer Adrianna Valdivia. If you're waiting until you start applying for jobs to begin your interview prep you're too late. Start early by incorporating common interview items into your learning paths so you can really get acquainted.

Summary

All in all I had an absolute blast at REFACTR.TECH 2019. I learned SO much and met so many amazing people. If you attended this year I'd love to hear about your experience, and if you didn't attend but are interested I highly recommend attending next year April 22-24, 2020.
Erica Stanley, Beth Laing and Angel Banks put so much effort into this conference and made it into a truly amazing experience.

REFACTR.TECH

@refactrtech

We'll see everyone next year at REFACTR.TECH 2020! Join our newsletter for updates! buff.ly/2SAkBva #refactr #diversity #inclusion #tech #atlanta #conference #refactrtech

20:35 PM - 07 Jun 2019

10 33