šŸ¤·ā€ā™‚ļø W1y d2s a11y h2e to be so b4y c9d a1d i10e? šŸ‘æ

GrahamTheDev - May 1 '21 - - Dev Community

A short and simple post today, I want to know whether people agree or disagree with me on the sentiment of my question: why does accessibility have to be so bloody complicated and inaccessible? (W1y d2s a11y h2e to be so b4y c9d a1d i10e).

I especially want to hear from people who are new to development. Have you come across accessibility yet? Do you find it confusing? etc.

Start of my rant!

I mean accessibility (ensuring end products are usable by people with disabilities) isn't actually that difficult, it requires a breadth of knowledge but things are actually pretty easy once you understand them.

But...between using the least accessible way possible to describe the practice, (the numeronym a11y instead of just "accessibility") through to the horrendous task of trying to understand the Web Content Accessibility Guidelines (WCAG) why do we make it so difficult?

And if you don't think WCAG is hard to understand then see this answer I gave on StackOverflow to the simple question:

"Does using a placeholder as a label comply with WCAG 2?"

Read first: this is not a suggestion that you should use a placeholder instead of a label, more of a thought experiment as to whether a placeholder is sufficient under WCAG guidance. If you do use a placeholder instead of a label then your site is not accessible as Iā€¦

</p>
Enter fullscreen mode Exit fullscreen mode



It shouldn't have taken me 1500 words to answer that question, the answer should be simple.


No.


(ironically I landed on "technically yes" which is unreal, read it and see if you agree!)

The basics are easy but we over complicate things!

I mean here is all you need to know to solve 90% of accessibility issues I see every day:

  1. Use semantic elements such as <nav>, <main> etc.
  2. Add alt attributes to images that describe the image in context.
  3. Add properly associated labels to forms
  4. Don't skip heading levels on a page.
  5. Don't use poor contrasting colours - use a contrast checker

That is it! If you somehow manage to do those 5 items your site / web app / app will be 90% accessible.

If you are new to development then learning those 5 things will make you a better developer (in my eyes) than many "senior" devs who still use <div> soup to structure their documents!

And the best thing? You can learn all 5 of them in less than a day!

I mean don't get me wrong, the final 10% does require a lot more knowledge, but that is all, knowledge. If the documentation was easier I am sure more people would look it up and implement it.

Do you think we can do better?

So what do you think? Confused by WAI-ARIA, WCAG, ATAG, VPAT etc? I know that even now I can really get bogged down in everything, I hate to think what people just starting out learning about accessibility feel!

I am hoping WCAG 3.0 (formerly WCAG project Silver) will fix a lot of these issues but that is over 8 years away before it becomes the standard according to current plans!

"WCAG 3 is not expected to be a completed W3C standard for a few more years. WCAG 3 will not supersede WCAG 2, and WCAG 2 will not be deprecated, for at least several years after WCAG 3 is finalized." - source WCAG 3.0 Introduction on W3

So in the mean time I suppose what I am asking is: what would you like to see / do you need that would make it easier for you to learn / implement accessibility?

Oh and what do you think about converting the tag a11y to accessibility and making them synonyms on dev.to?

I look forward to your thoughts and ideas! Any good ones I will turn into a post / series!

/end rant šŸ˜‹

p.s. I really struggled to find a meaningful cover image for this article, anyone seen a better one I can use for inspiration that isn't using the stereotypical "person in wheelchair" to denote accessibility??

Edit: thanks to @devlorenzo for finding an image that helped me pick a better one! ā¤ļø

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .