Eating Your Own Dog Food as an Accessibility Consulting Company

As an accessibility consulting company we really want to "Eat our own dog food" and set a good example for how to build an accessible website. In this post we'll cover some of the CSS, JavaScript, HTML4/5, and ARIA accessibility features built into our website to make sure we lead by example. When we tell our clients they need to implement accessibility we want to make sure we've also followed the same requirements, AKA "Ate our own dog food".

Accessible Hamburger Menu

Our hamburger navigation menu has an accessible name, expanded/collapsed state via aria-expanded, keyboard focusability, operability, and focus outline.

Accessible Contact Forms

Our contact forms use connected labels, HTML5 required validation with useful error messages, accessible CAPTCHA, JavaScript error validation, HTML4 fieldset/legend semantics, etc.

Text Resizing

Our mobile website does not block pinch to zoom so users can increase the webpage size on mobile devices or control/command + + to browser zoom on desktop.

Color Contrast

We made sure to choose foreground text colors that have sufficient conrast on top of their background colors.

Even our placeholder text was customized with CSS to ensure it passes WCAG 2.0 AA!

Keyboard Focus Outlines

We also enhanced the keyboard focus outline when tabbing using a highly visible CSS focus outline style.