Often heard: “There’s so much to learn about accessible code, I don’t even know where to start.”
Don’t worry! You really don’t have to memorize the contents of dozens of textbooks. You will simply learn to ask yourself the right questions when creating a website or web store. The routine of using the right code comes with experience.
If it looks like a duck, swims like a duck, and quacks like a duck, it probably is a duck. But when it comes to web accessibility, it’s often not really a duck.
For someone who relies on assistive technologies, such as keyboard navigation and/or screen readers, said duck doesn’t swim and quack the same way it does for you.
It’s all about the basics. Frameworks are a wonderful thing. Yet the basics – HTML5 semantic elements – are easily forgotten by developers using these frameworks. I would even venture to say that the younger generation of frontend developers are unconsciously poorly informed about semantic elements. This can be quickly remedied.
This request is a classic. The first example below will show you why. By the way, the examples below are mostly in technical jargon. If you’d like me to explain it to you in everyday language, don’t hesitate to schedule a free introductory call with me.
I mean the blue lines around links and elements that can receive focus. Such as links styled as buttons, images linked to some place, etc.
There’s a way to style those to be in harmony with your design! Removing focus chases a lot of visitors off your site.
Not just the ones depending on assistive technology full time.
Have you ever tried navigating your site by keyboard, because your mouse was broken?
That is bad in itself, but it’s also a lost sales opportunity when that link goes to a product page.
Wrapping a link in an element that is not intended for regular linking, like <button> or a div that has been assigned the button role is what can happen when you use certain page builders.
When the error message is either unclear or not announced properly, for example, you whack the door in someone’s face.
And to think there’s really not that much to creating great error messages, using native HTML elements and to include programmatic labels.