Your quick #a11y cheat sheet

Recently, in one of those Youtube dives everyone gets in every now and then, I stumbled upon an old Apple comercial about accessibility and it struck a chord in ways I hadn't even considered before.

“Get over it — accessibility is not optional”.- Jenny Lay-Flurrie, Chief Accessibility Officer at Microsoft.

When starting your coding path and diving into basic website making, there's not a lot of content about how to make your website a11y friendly in these stages when you're not really sure what to look for, what to learn first and you're mainly worrying about why your css is not linking correctly. (Guilty as charged)

So, what does web accessibility even means?

W3C defines Web accessibility as websites, tools, and technologies are designed and developed so that people with disabilities can use them.

What kind of conditions do you need to take in consideration?

• Visual: partial or total inability to see or perceive colors.
• Motor skills: making precise movements is hard (using a mouse)
• Hearing: reduced or non-existing ability to hear.
• Photosensitive seizures: Flashing lights in animations can trigger epilepsy episodes.

Why is it important?

By doing some small tweaks on your code, you'll be able to make the user experience as equally as possible so every person will be able to interact, understand, navigate, contribute to the web no matter their circumstances or abilities.

You can help someone feel welcome and included, wouldn't that be great?

Not only people with disabilities would be benefitted from this. Web accessibility is used by people using mobile devices or slow network connections. Also, this overlaps with good code practices (yay!)

Tips you can implement now

• Add Alt text to images
  Captions are great but in case your image were not to be loaded, how would the user know what it's looking at?
  
  Screen readers also benefit from it.
  Bonus: alt text can also improve your SEO! Make sure to write descriptively and use keywords that make sense.

• Be smart with your colors
  Red background and green text isn't the greatest choice out there. The contrast you use are important to how much of your page can actually be seen and understood. You can do a quick check up for your color scheme here

• Use headers in your favor
  Give your website a correct flow and structure with the right header tag. As a recommendation, only your main title should go with H1 and then use your subheaders accordingly to their importance or relevance.

• Use title tag
  It's very helpful for screen readers and helps structure your content. Use a short title that tells what your site is about.

• Labels can still be cool
  While placeholders look very good on forms instead of labels, in some screen readers they're ignored so the user reaches a text field that has no description. I'm not telling you to stop using them (I have a soft spot for them) but to include a label even if it's hidden for this purpose. Make sure the label and placeholder have the same text.

• Be friends with Aria-label attribute
  Accessible Rich Internet Applications (ARIA) is a set of HTML attributes that define ways to make Web content and Web applications more accessible to people with disabilities. You can look into more info on how to use it here.

Is my website a11y friendly?

You can check how your website rates in accessibility (speed, security and more) over here.

Got anymore to add? Please feel free to reach out for any question, comment or meme.