About accessible coding in general
You can quickly get to grips with accessible web development
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.
Back to:
If both the developers and web designers have accessibility in mind, you’re a winning team!
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.
Under the hood, an accessible website starts with clean, semantic HTML
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.
The visitor can’t tab through the menu because the focus has intentionally been set to zero.
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 harmonize 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?
The link in the CTA does not appear in a screen reader’s link list because it’s wrapped in a button element
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 a customer can’t pay because the form in the checkout keeps throwing errors that can't be resolved
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.
Breaking it down makes it easier
Once you understand where the part of the designer ends and your part starts, and where you can support each other in your processes, converting an accessible design into accessible functionalities is surprisingly straightforward. Before you know it, it will become your second nature.
Back to: