Consultancy for accessible coding

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.

Zwei sich diagonal überschneidende Wireframe-Illustrationen mit HTML-Elementen. Links das Beispiel, wie man es nicht machen sollte, gekennzeichnet durch eine rote Hand mit dem Daumen nach unten. Rechts sehen Sie ein Beispiel für die richtigen semantischen HTML-Elemente. Diese ist durch eine grüne Hand mit erhobenem Daumen gekennzeichnet.

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.

“Can you remove those ugly blue lines, please?”

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.

Book a free introductory call

The “Pick a date” link below takes you to my Calendly page. If you have issues scheduling there, please send me an E-mail.

Pick a date

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 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?

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.