a11ydetective

Hey howdy hey, dear reader. Welcome to a blog all about Web Accessibility. Take note that the word accessibility is often shortened to a11y. A11y is a numeronym.

What is web a11y you might ask?

Web a11y is all about making sites and applications usable to as many people as possible no matter how they are differently abled. This noble pursuit involves automated testing, manual testing, and lots of collaboration!

In this blog you will find helpful tips, tricks, gotchas, and other examples of how to make a website or web application accessible for all!

A note concerning package.json and yarn.lock

Please note that you must push your package.json AND yarn.lock files. If you do not, the deploy will fail.

A note on Node and 11ty

Please note that 11ty requires Node version 18 or newer.

Coming from npm world?

Check out this helpful cheatsheet showing npm commands and their yarn equivalents.

Tools used

• git
• github
• github pages
• Netlify
• JAMstack (JavaScript, APIs, and Markup)
• nvm
• Yarn
• 11ty
• HTML
• Nunjucks
• Markdown
• CSS
• JS
• Web Componets
• ES Modules
• Typescript
• Cypress
• Vitest
• ARIA
• W3C Design Patterns
• aXe DevTools
• NVDA
• JAWS
• VoiceOver
• TalkBack
• Lighthouse CI
• Code bundler

File structure

/project root/ -> /a11ydetective/
|
|-- /build/ - Build scripts
|  |-- gulpfile.js - The tasks for the main build process
|  |-- util.js - Utilities used by the tasks
|
|-- /src/ - Your code
|  |-- `index.md`
|  |-- `style.css` - The raw CSS input, or pre-processor equivalent
|  |-- `script.js` - The raw JavaScript input, or pre-processor equivalent
|
|-- /dist/ - The compiled output after running `yarn run build`
|  |-- `index.html`
|  |-- `script.js`
|  |-- `style.css`
|
|-- `.nojekyll` - Tells Github pages to NOT use Jekyll since this project will be using 11ty instead
|-- /.github/workflows/`11ty_build.yml` - Github Pages deploy yaml file
|-- `.eleventy.js` - 11ty config file
|-- `.nvmrc` - Contains node version for the project that will be used when you run `nvm use`
|-- `.gitignore` - Used to hide things from git so they are not commited to the remote repo
|-- `package.json` - Contains information about the project such as node dependencies, build scripts, etc...
|-- `yarn.lock` - Lockfile for package.json
|-- `README.md` - Documentation for how to work within the repo

Import JS files into other JS files using CommonJS

// .eleventy.js
const myModule = require("./path/to/myModule.js");

module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter("myFilter", myModule.myFunction);
};

<!-- Your template file -->
{{ "Hello" | myFilter }}

ES module example

/math.js/ (module)

// Exporting a function
export function add(a, b) {
  return a + b;
}

// Exporting a variable
export const PI = 3.14159;

/app.js/ (main app js file)

// Importing from the module
import { add, PI } from './math.js';

console.log(add(5, 3)); // 8
console.log(PI); // 3.14159

In the HTML

<script type="module" src="/path/to/app.js"></script>

Getting started

1. Open your preferred terminal (all commands will be ran in the terminal)
2. Runnvm use to make sure you are using the correct node version for the project
3. Run yarn to install the node modules
4. Run yarn start to run the local developement setup
5. Navigate to the project url in a browser - http://localhost:8080/

@todo

• [] Investigate setting up search with https://www.algolia.com/developers?utm_source=fontawesome&utm_medium=referral
  • [] Read Adding Algolia Search to Eleventy and Netlify
  • [] Read Adding search to a JAMstack site
• [] Clean up css and remove redundant code
• [] Setup domain name through porkbun and netlify
  • figure out if domain settings should go in github or in netlify or porkbun
• [] Create custom icons
• [] Convert components into vanilla web componets
  • In a blog post or posts show Lit/Vue/React/Vanilla JS versions of components
• [] Create "Course Cards" section which contains custom cards displaying courses I have completed
• [] Create a recommended course section - it will be whichever course I have completed most recently to date
  • also show course certificates
• [] Project - create a drag and drop component that is a11y, maybe a puzzle game?
• [] Create settings nav - dark/light theme toggle, reduce motion (turns off animations), reading mode, text highlight mode (as you move your cursor or finger or stylus across text highlight it)
• [] Create video component with transcript section
• [] Finish adding controls and form components
• [] Create a11y newsletter of recommended resources
  • [] Read Adding an Email Subscription to Your Jamstack Site
• [] Setup custom email hosting for ad email
• [] pre-fix components with "ad-"
• [] Convert to PWA (progressive web app) with offline mode
• [] Create tech stack page
• [] Create a11y and performance site status leaderboard
  • ex: speedlify example
    • speedlify repo
• [] Implement multi-lang site features
  • [] Read Multilingual sites with Eleventy
  • [] Read Language switcher for multilingual JAMstack sites
• [] Setup multiple authors feature
  • [] Read Supporting Multiple Authors in an Eleventy Blog
• [] Read Dynamic Short URLs with Eleventy
• [] Read Building a Database Driven Eleventy Site
• [] Read Eleventy Guide: A Framework-Agnostic Static Site Generator
• [] Read A Site for Front-End Development Conferences (Built with 11ty on Netlify)
• [] Finish Turn static HTML/CSS into a blog with CMS using the JAMStack
• [] Convert project to use ES modules and Typescript
  • [] Finish Get 11ty 3.0 and ESM
  • [] Read Eleventy Use ES modules
• Read The What, Why and How of JavaScript bundlers
• [] Implement 11ty code bundling
  • [] Read Bundling JS in Eleventy with ESBuild
  • [] Read Even Better JS Bundling in Eleventy
  • [] Watch Bundle JavaScript for 11ty with esbuild
  • [] Add "favorite things page" ie. fav video game, fave online course, fave movies, etc..
  • [] Make a free clawberta clone
  • [] Try tailwind