DEV Community: George Kemp

The Web is Accessible by Default, Stop Breaking It.

George Kemp — Mon, 13 Apr 2020 20:49:40 +0000

I recently came across the following website, Mother Fucking Website (Warning: Contains Bad Language). The general thesis of this site, is that the web was designed, structured and standardised to be accessible, lightweight, and responsive by default. This got me thinking a little more about how I thought about the web, my responsibility as a web developer, and the best practices and processes I use in my current role as web developer.

Despite knowing full well that a plain un-styled, un-scripted HTML website was of course fast and accessible, it challenged a paradigm I held as a developer, that it was my responsibility to make a website accessible, lightweight and responsive rather than to avoid making things inaccessible in the first place.

To truly be mindful of accessibility and develop first class accessible applications, websites and digital content, we need to challenge our way of thinking. We must develop with accessibility as one of our primary focuses. We should instead shift our thinking to how best to create new functionality, components or features without breaking the existing accessibility of the site. It's my belief that by adopting this new paradigm we can develop accessible websites with far more efficiency, and with far less accessibility issues.

Not only will this provide a great deal of value to your development team, your organisation will immediately see the benefits with a more user friendly, SEO friendly and navigable website.

So next time someone tells you to make things accessible, tell them that instead you don't intent to make it inaccessible in the first place.

A11y Hook for Hiding Outlines

George Kemp — Thu, 10 Oct 2019 15:27:06 +0000

Ever wish you could hide those pesky outlines that appear around all your inputs when they're focused, but also want to make sure your app caters to all users, the following hook listens to mouse click vs tab events to determine if a user is interacting with your site using keyboard or mouse and returns a boolean that you can use to control the outline on your components! Enjoy!

import { useEffect, useState } from "react";

export const useA11yOutline = () => {
  const [outline, setOutline] = useState(false);
  const handleKeydown = (e) => {
    const isTabEvent = e.keyCode === 9;

    if (isTabEvent) {
      setOutline(true);
    }
  }
  const handleClick = (e) => {
    setOutline(false);
  }
  useEffect(() => {
    window.addEventListener('keydown', handleKeydown);
    window.addEventListener('click', handleClick);
    return () => {
      window.removeEventListener('keydown', handleKeydown);
      window.removeEventListener('click', handleClick);
    }
  });
  return outline;
};

How do you handle incidence response?

George Kemp — Thu, 19 Sep 2019 21:05:11 +0000

How does everybody document and handle incidence response, especially within smaller team? (i.e. If everybody from the sub-team is on vacation how do you document steps to debug, troubleshoot, and fix issues and where does that documentation live, do you give non developers the ability to roll back deploys if issues arise or provide ways to remotely monitor your applications)

I'm trying to design and implement a procedure in which if an issue arises and the immediate developers aren't available, we target the right person to resolve the issue and provide them with all the resources required to resolve the issue or escalate it to us on vacation if the issue is critical.