If you've been working in web accessibility for a while, you know there are many foundational quick-wins that can go a long way. If you're new to web accessibility, hopefully this doesn't come as a surprise! There are definitely challenging aspects to web accessibility, but it's not all that way. And lucky for us, a lot of the quick-wins are also quick and easy to identify with some automated tools! [`pa11y-ci`](https://github.com/pa11y/pa11y-ci) is just one of those tools.

In this post, I'll show you how I set up a [GitHub Action](https://github.com/features/actions) that runs `pa11y-ci` as a pull request check. The check will run against a Vercel deploy preview, and then the results will be shared as a comment on the pull request for easy visibility.

If at any point you find yourself stuck or needing to troubleshoot, check out a GitHub repository I created that represents the end-result of this guide: https://github.com/ashleemboyer/pa11y-ci-test-app.

## Step 1 (optional): Create a Next.js App

If you don't already have a Next.js App to follow along with, I recommend creating one. There are multiple ways of doing this detailed on [the Next.js Getting Started page](https://nextjs.org/docs/getting-started). To keep things simple for this example, I'm using the Automatic Setup approach.

**To create the Next.js app:**

1. Open a terminal
2. Run `npx create-next-app@latest`
3. When prompted, name the app `pa11y-ci-test-app`
4. Change directory into the new folder: `cd pa11y-ci-test-app`
5. Briefly explore the code and learn your way around

Note: I will be using `npm` instead of `yarn` for the rest of this post. If your generated project uses `yarn`, and you would also like to to use `npm` instead:

1. Run `rm yarn.lock` to delete the file
2. Run `npm install` to create a `package-lock.json` file
3. Run `npm run build` so the `package-lock.json` file can be patched if needed
4. Run `npm install` one more time to download any missing dependencies
5. Run `git add .` to stage the changed files for a commit
6. Run `git commit -m "Using npm instead of yarn"` to commit the changes

## Step 2 (optional): Create and Connect a GitHub Repository

If you followed step 1 and created a new Next.js App, you should follow this step as well. You will need a GitHub Repository for your project in order to run the GitHub Action we're creating.

**To create the GitHub Repository:**

1. Go to [github.com/new](https://github.com/new)
2. If needed, log in to your account
3. Under "Owner", select your account
4. Under "Repository name", enter `pa11y-ci-test-app`
5. Select either "Public" or "Private"
6. Click the "Create repository" button
7. Leave this page open in your browser

**To connect the GitHub Repository to your project:**

1. In a terminal, go to your project folder
2. Run `git remote add origin git@github.com:<YOUR-USERNAME>/pa11y-ci-test-app.git` after replacing `<YOUR-USERNAME>` with the GitHub username you used to create the repository. (Read about [Working with Remotes](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes) and [Remote Branches](https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches) if you're curious.)
3. Run `git push -u origin main` to push the code to the repository.
4. Verify these steps were successful by refreshing your new repository's page in your browser

## Step 3: Install and Configure `pa11y-ci`

It's always good to test new tools locally (on your machine) before testing them remotely in a place like a pull request. Testing remotely can be tedious and time consuming, and the results of the testing can also be more difficult to locate and read. And if you happen to be like me and have ADHD, all of that is a recipe for multiple distractions!

Before doing anything else, let's create a new git branch. That will be useful later when we need to create a pull request for our GitHub Action.

**To create a new `git` branch:**

1. In a terminal, go to your project folder
2. Run `git checkout -b add-pa11y-ci`

**To install `pa11y-ci`:**

1. In a terminal, go to your project folder
2. Run `npm install --save-dev pa11y-ci`
3. Open the `package.json` file in your project
4. Verify the `pa11y-ci` package is listed under `devDependencies`

**To configure `pa11y-ci` for local testing:**

1. In your project folder, create a file called `.pa11yci`
2. In the new file, paste the following JSON:

```json
{
  "urls": ["http://localhost:3000/"]
}
```

This configuration tells `pa11y-ci` exactly what `urls` in our app it needs to test.

## Step 4: Test `pa11y-ci` locally (on your machine)

Now that we have `pa11y-ci` installed and configured for local testing, we can get to testing!

1. In your project folder, open the `package.json` file
2. Under the `"scripts"` property, add a new entry: `"pa11y-ci": "pa11y-ci"`
3. Open two separate terminals to your project folder
4. In the first terminal, run `npm run dev` to start the app
5. In the second terminal, run `npm run pa11y-ci` to run the new script we added in step 2

After `pa11y-ci` has finished running, this is how the output should read:

```
> pa11y-ci-test-app@0.1.0 pa11y-ci
> pa11y-ci

Running Pa11y on 1 URLs:
 > http://localhost:3000/ - 1 errors

Errors in http://localhost:3000/:

 • The html element should have a lang or xml:lang attribute which describes the language of the document.

   (html)

   <html><head><meta name="viewport" con...</html>

✘ 0/1 URLs passed
```

Hooray! We have an error, but the good news is that means `pa11y-ci` is working! Now we can progress from local testing towards creating our GitHub Action.

## Step 5: Deploy to Vercel

Our current configuration for `pa11y-ci` only works for when we run our app locally with `npm run dev`. For remote testing, we want `pa11y-ci` to test against real builds and public-facing urls. In order to do that, we need to deploy our Next.js app. We'll use Vercel in this example.

**How to deploy to Vercel:**

1. Go to [vercel.com/new](https://vercel.com/new)
2. If needed, log in to your account
3. Under "Import Git Repository", select "Continue with GitHub"
4. Search for your new repo (mine is called `pa11y-ci-test-app`)
5. Click the Import button in-line with the repo name
6. Click the Deploy button (you should not need to change any configuration)

Once the deploy is complete, you can close this window.

## Step 6: Install and Configure `next-sitemap`

There's another way `pa11y-ci` can be used to test against urls, and that is with the `--sitemap` option. This option is nice when you have a `sitemap.xml` file on your site that updates every time a build occurs. It means you don't have to manually update the `.pa11yci` file's list of urls every time a new page is added. The tool we'll use for generating a `sitemap.xml` file is called [`next-sitemap`](https://www.npmjs.com/package/next-sitemap), which is the tool I use on my own website for `pa11y-ci` testing.

**To install `next-sitemap`:**

1. In a terminal, go to your project folder
2. Run `npm install next-sitemap`

**To configure `next-sitemap`:**

1. In your project folder, create a new file called `next-sitemap.config.js`
2. In the new file, paste the following JavaScript:

```javascript
module.exports = {
  siteUrl: process.env.VERCEL_URL
    ? `https://${process.env.VERCEL_URL}`
    : 'http://localhost:3000/',
};
```

This tells `next-sitemap` what the main url of your site is. If you use a different port number than `3000`, make sure to update the code above to match the port number you use.

## Step 7: Test `next-sitemap` locally (on your machine)

To make sure we have everything configured correctly, we're going to test `next-sitemap` locally just like we did with `pa11y-ci`.

1. In your project folder, open the `package.json` file
2. Under the `"scripts"` property, add a new entry: `"postbuild": "next-sitemap"`
3. In a terminal, go to your project folder
4. Run `npm run build`

The new `postbuild` script we added will run automatically after the `build` script has completed. You should see some new `sitemap` files in the `public` directory. We will add those to the `.gitignore` file in the next section.

You should also see something like this output in the terminal after the `build` script output:

```
> pa11y-ci-test-app@0.1.0 postbuild
> next-sitemap

✨ [next-sitemap] Loading next-sitemap config: file:///pa11y-ci-test-app/next-sitemap.config.js
✅ [next-sitemap] Generation completed
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ indexSitemaps │   1    │
│   sitemaps    │   1    │
└───────────────┴────────┘
-----------------------------------------------------
 SITEMAP INDICES
-----------------------------------------------------

   ○ http://localhost:3000/sitemap.xml


-----------------------------------------------------
 SITEMAPS
-----------------------------------------------------

   ○ http://localhost:3000/sitemap-0.xml
```

## Step 8: Prepare for and Create a New Pull Request

Hopefully you created a new git branch called `add-pa11y-ci` [in Step 3](#step-3-install-and-configure-pa11y-ci), but it's also okay if you didn't! Go ahead and create it now. We'll need a different branch off of the main one in order to create a pull request in our GitHub repository.

**To prepare for the pull request:**

1. Make sure there is a `/public/sitemap*` entry in the `.gitignore` file. We **do not** want to commit these files since they need to be generated by the Vercel build process.
2. Make sure you have all your new `pa11y-ci` and `next-sitemap` work committed. I'm committing everything at once with the message: `"Adding pa11y-ci and next-sitemap"`.
3. Run `git push --set-upstream origin add-pa11y-ci` to push your new branch up to the repository.

**To create the new pull request:**

1. Go to `github.com/<YOUR-USERNAME>/pa11y-ci-test-app/compare` after replacing `<YOUR-USERNAME>` with the GitHub username you used to create the repository
2. Change the `compare` branch to `add-pa11y-ci`
3. The page should update have at least these 5 changed files:
   - `.gitignore`
   - `.pa11yci`
   - `next-sitemap.config.js`
   - `package-lock.json`
   - `package.json`
4. Click the "Create pull request" button
5. You should see 2 text boxes: one for the name of the pull request and one for the description
6. Fill in the title and description however you need
7. Click "Create pull request"

**To verify everything is set up correctly:**

1. Wait for the `vercel` bot to comment on the new pull request
2. In the new comment, open the "Visit Preview" link in a new tab
3. You should see your app built and running
4. Go to the `/sitemap.xml` page in the same app
5. You should see an XML file with contents that look something like this:

```xml
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>YOUR-APP-URL/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>
```

## Step 9: Create the pa11y-ci GitHub Action

Now that we have a live website to have `pa11y-ci` test against, we can create the GitHub Action that runs `pa11y-ci`.

**To create the GitHub Action:**

1. In your project folder, create a new folder called `.github`
2. In the new `.github` folder, create another folder called `workflows`
3. In the new `workflows` folder, create a new file called `pa11y-ci.yml`
4. Paste the following content in your new file:

```yml
# Wait to run until after the Vercel deployment has finished
# https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#deployment_status
on: deployment_status

jobs:
  pa11y-ci:
    # Only run if the Vercel deployment was successful
    # https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#deployment_status
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest

    steps:
      # Checkout latest commit of repo
      # https://github.com/actions/checkout#checkout-v3
      - uses: actions/checkout@v3

      # Install project dependencies
      - run: npm install

      # Run pa11y-ci against the generated sitemap
      # https://github.com/pa11y/pa11y-ci#sitemaps
      - run: npm run pa11y-ci -- --sitemap ${{ github.event.deployment_status.target_url }}/sitemap.xml
```

Before committing and pushing this new file, make sure to delete the `.pa11yci` file. It's no longer needed.

**To verify the GitHub Action works:**

1. Commit and push the new `.github/workflows/pa11y-ci.yml` and the removed `.pa11yci` file
2. Go to your pull request in a browser
3. Towards the bottom of the page, wait until you see the `pa11y-ci` check finish
4. The check should fail
5. Click the "Details" link to inspect the failed check
6. You should see the same error that you saw when testing locally in [Step 4](#step-4-test-pa11y-ci-locally-on-your-machine)

## Step 10 (optional): Update the pa11y-ci GitHub Action to add a comment on pull requests

When I added this `pa11y-ci` GitHub Action to my own site's pull requests, I decided to make it also comment results on the pull request. There are a couple of reasons for this:

- Normally you have to click the "Details" link next to a failed pull request check. This takes you to another page and away from the pull request. For me, that means an opportunity to get easily distracted.
- The formatting of results in pull request checks can sometimes be difficult to read. Putting the results in a pull request comment gives an opportunity to re-format them in a more readable way.

So to update the GitHub Action to comment on pull requests, we'll need to tell the `pa11y-ci` command to output its results in a different way, and then we'll add a step to the GitHub Action that reads the output, formats it, and creates a comment.

1. Update the `pa11y-ci` `run` step in `.github/workflows/pa11y-ci.yml` to be:
   ```yml
   # Run pa11y-ci against the generated sitemap
   # https://github.com/pa11y/pa11y-ci#sitemaps
   - run: npm run pa11y-ci -- --json --sitemap ${{ github.event.deployment_status.target_url }}/sitemap.xml |& tee pa11y-output.txt
   ```
2. Add a new step at the end of the file like this:
   ```yml
   # Comment the formatted pa11y-ci results on the PR
   - uses: actions/github-script@v5
     env:
       BODY_PREFIX: ''
     with:
       script: |
         const script = require('./.github/workflows/scripts/pa11y-ci.js')
         await script({ context, core, github })
   ```
3. Add a new folder inside `.github/workflows` called `scripts`
4. Add a new file to `scripts` called `pa11y-ci.js`
5. In the new file, paste the following JavaScript:

   ````js
   const { promises: fs } = require('fs');

   module.exports = async ({ context, core, github }) => {
     // Find this PR & do nothing if this isn't a PR
     const { data } =
       await github.rest.repos.listPullRequestsAssociatedWithCommit({
         owner: context.repo.owner,
         repo: context.repo.repo,
         commit_sha: context.sha,
       });
     const prNumber = data[0] && data[0].number;
     if (!prNumber) {
       return;
     }

     // Read the pa11y output and build the comment body
     const pa11yOutput = await fs.readFile('./pa11y-output.txt', 'utf8');
     const lines = pa11yOutput.split('\n');
     const asJSON = JSON.parse(lines.find((line) => line.startsWith('{')));
     const { total, errors, results } = asJSON;

     let commentBody = `${process.env.BODY_PREFIX}\n<h2>:microscope: pa11y-ci results</h2>\n\n`;
     commentBody += `- Number of URLs tested: ${total}\n`;

     if (!errors) {
       commentBody += `- No errors were found! :tada:\n`;
     } else {
       commentBody += `- Number of errors found: ${errors}. :sob:\n`;

       let formattedOutput = '';
       Object.keys(results).forEach((urlKey) => {
         const errors = results[urlKey];
         if (errors.length < 1) {
           return;
         }

         formattedOutput += `- [${urlKey}](${urlKey}):\n\n`;
         errors.forEach((error) => {
           formattedOutput += '  ```\n';
           formattedOutput += `  ${error.message}\n\n`;
           formattedOutput += `  ${error.selector}\n\n`;
           formattedOutput += `  ${error.context}\n\n`;
           formattedOutput += `  ${error.code}\n`;
           formattedOutput += '  ```\n\n';
         });
       });

       commentBody += `<details><summary>See results :eyes:</summary>\n\n${formattedOutput}</details>`;
     }

     // Get the comments on this PR
     const { data: comments } = await github.rest.issues.listComments({
       owner: context.repo.owner,
       repo: context.repo.repo,
       issue_number: prNumber,
     });

     // Try to find an existing pa11y results comment
     const previousComment = comments.find((comment) =>
       comment.body.startsWith(process.env.BODY_PREFIX),
     );
     if (previousComment) {
       // Update the previous comment
       await github.rest.issues.updateComment({
         owner: context.repo.owner,
         repo: context.repo.repo,
         comment_id: previousComment.id,
         body: commentBody,
       });
     } else {
       // Create a new comment
       await github.rest.issues.createComment({
         owner: context.repo.owner,
         repo: context.repo.repo,
         issue_number: prNumber,
         body: commentBody,
       });
     }

     if (errors) {
       core.setFailed('Errors were found by pa11y-ci');
     }
   };
   ````

6. Commit and push the changes to `.github/workflows/pa11y-ci.yml` and the new `.github/workflows/scripts/pa11y-ci.js` file.

**To verify that everything is working as expected:**

1. Go to your pull request in your browser
2. Wait for the `pa11y-ci` check to finish
3. The check should fail just like it did before
4. Look for a comment by the `github-actions` bot that says "🔬 pa11y-ci results"
5. The comment should say that 1 error was found
6. Expand the "See results 👀" text
7. There should be one error listed that matches the same error you've been seeing

## Step 11. Celebrate! 🎉

Nicely done! You've added a `pa11y-ci` GitHub Action that runs on pull requests. You should be proud. Give yourself a pat on the back. 😊

Use pa11y-ci to test deploy previews before merging pull requests.

How I Added a pa11y-ci GitHub Action to My Next.js Site


Many sites on the web have the same content at the top of every page. The content is commonly a logo that links to the home page and then several links to the main pages of the site. If you navigate the same site regularly, you probably find these navigation links repetitive because you learn to know what's already there. Even when you follow a link to a site you've never been to before, you probably expect there to be a set of navigation links at the top. If you're just trying to read the content of the page and don't care about the header, you'll find Skip Navigation links useful.

## What are Skip Navigation Links?

Skip Navigation Link are pretty straightforward. They enable people to skip the navigation at the beginning of a site and get to the main content of the page. This is really helpful for people who navigate sites without a pointer device, such as a keyboard. Without a Skip Navigation Link, a keyboard user would have to tab through every link, button, etc. that appears before the main page content. While tabbing might not be a difficult task for you personally, it is often more difficult for disabled users, so it's necessary to prevent that difficulty.

## Are there any guidelines for Skip Navigation Links?

Skip Navigation Links fall under [Web Content Accessibility Guideline 2.4: Provide ways to help users navigate, find content and determine where they are](https://www.w3.org/WAI/GL/WCAG20/WD-UNDERSTANDING-WCAG20-20081105/navigation-mechanisms.html). The first Success Criterion for this guideline is called [Success Criterion 2.4.1: Bypass Blocks](https://www.w3.org/WAI/GL/WCAG20/WD-UNDERSTANDING-WCAG20-20081105/navigation-mechanisms-skip.html), and within that is [Technique G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G1). The writeup for Technique G1 lists the following as [requirements for Skip Navigation Links](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G1#G1-procedure) that go to the main content of a page:

1. Check that a link is the first focusable control on the Web page.
2. Check that the description of the link communicates that it links to the main content.
3. Check that the link is either always visible or visible when it has keyboard focus.
4. Check that activating the link moves the focus to the main content.
5. Check that after activating the link, the keyboard focus has moved to the main content.

## What does the code look like?

I just used a little CSS and JSX for my Skip Navigation Link, and I opted for making it visible only when it gets keyboard focus. On my site, I use [Next.js Per-Page Layouts](https://nextjs.org/docs/basic-features/layouts#per-page-layouts) to help me render repeated content, such as navigation links, on many pages. The layout I use for the navigation header is where I placed a Skip Navigation Link. The code looks something like this:

```tsx
import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div className={styles.baseLayoutContainer}>
      <a className={styles.skipNavigationLink} href="#main-content">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" className={styles.mainElement} tabIndex={-1}>
        {children}
      </main>
      <SiteFooter />
    </div>
  );
};
```

What's important to note from this code:

1. The Skip Navigation Link is before the `SiteHeader` component that I built for rendering navigation links on my site. Remember: the link must be the first focusable control on the page.
2. The Skip Navigation Link's `href` property references the `id` of the `main` element where I render the content of a page.
3. The `main` element that I'm linking to with the Skip Navigation Link has `tabIndex` set to `-1`. This makes the element focusable but does not include it in the page's tab order. Further reading from TPGi: [Using the tabindex attribute](https://www.tpgi.com/using-the-tabindex-attribute/).

After I figured out the markup, I applied CSS to hide the Skip Navigation Link when not focused and also some CSS to remove the focus outline from the `main` element. The code looks something like this:

```css
.baseLayoutContainer {
  position: relative;
}

.skipNavigationLink {
  left: -10000px;
  position: absolute;
  z-index: 1;

  &:focus {
    left: 0;
  }
}

.mainElement:focus {
  outline: none;
}
```

What's important to note from this code:

1. The parent container of the Skip Navigation Link, specified by the `baseLayoutContainer` class name, has `position: relative` set. This is important because `position: absolute` is set on the Skip Navigation Link.
2. The Skip Navigation Link has `position: absolute`, `left: -10000px`, and `z-index: 1` set. This set of properties places the link off the left side of the page by 10,000 pixels and ensures it's placed on top of other elements using `z-index`. You may have to tweak this value if you have used it in other places in your app.
3. When the Skip Navigation Link is focused, the `left` position is updated to `24px`, moving it to be in view in the page.
4. When the `main` element (specified by the `mainElement` class name) is focused, `outline` is set to `none` so that no focus outline shows on the element after navigating to it with the Skip Navigation Link.

## Conclusion and Further Reading

And that's all! Skip Navigation Links are a super quick accessibility win with a ton of value since they help so many folks. Celebrate your quick win and keep the momentum going! [Consider adding a scroll-to-top link next if you haven't already](/blog/accessible-smooth-scroll-to-top-buttons-with-little-code).

### Further reading

- [Add a "Skip Navigation" Link to Help Keyboard Users Reach Main Content Faster](https://dequeuniversity.com/tips/add-skip-navigation-link)
- [Technique G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G123.html)
- [Technique G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20081105/G124.html)


Adding a "Skip Navigation" link is as easy as adding a few lines of code.

How I Added a Skip Navigation Link to My Next.js Site


For most of 2021, I felt defeated as a disabled woman in tech. Sexism and ableism were in every part of my life at a level I'd not experienced before. I'm very used to seeing both on the internet, but even that became too much. [In a job I held for most of the year, I suffered pay discrimination, biased treatment, and sexual harassment](https://ashleemboyer.com/blog/speaking-my-truth). When I escaped that situation, I knew I'd have a lot of healing ahead of me but I had no idea how much.

One thing I've learned about what I went through is that far more people than I thought have a similar experience. What we went through may not have been very similar, but the effect of the trauma was. I think it has something to do with being in a survival mode, where all you can really think about and focus on is making it through. I think this is also a reason it can take so long to fully realize we're in traumatic situations.

As soon as we're out of immediate danger, the full gravity of a the situation can set in. We can slow down and think about what happened because we're in a place that is safer than before. In the first several weeks of my job I currently hold, I was anxious _all of the time_. The list of things contributing to that is long, but here are a few things that are top of mind:

- **Pressure to do well in a new job at a well-known company in the industry I work in.** I would consider this a normal pressure of being a working person.
- **Waiting for the other shoe to drop, because it always has.** If you don't know what this phrase means, I think [the explanation on gothamist.com](https://gothamist.com/arts-entertainment/the-phrase-waiting-for-the-other-shoe-to-drop-was-born-in-nyc) is good.
- **Expecting toxic behavior and having a guard up ready to protect myself.** In the past, I've been called names, gaslit about facts clearly backed by documentation and timestamps, bullied into changing my mind (or caving into pressure, rather), severely under-leveled and underpaid, held to different and unexplained standards than men on my team, not taken seriously when reporting issues, ignored in team channels whether asking for help or proposing a discussion, and more. These things didn't just happen at my previous job, they've happened in many places. But the level of toxicity in that environment is the highest I've experienced.

---

I've seen the same therapist since right before the pandemic started. We have talked _**endlessly**_ about the occupational dimension of wellness. We've talked about it so much, we also talk about overwhelming that dimension has been for me over the years.

> Skipping ahead in my story a tiny bit, we joked last time we spoke that we have nothing to talk about now since my work stress is very low now.

When I told my therapist about the struggles I was having, where I felt anxious immediately after sending messages in team channels, was spending a lot of time figuring out how to word messages in what should be easy conversations, she asked me if I'd heard of Brené Brown's marble jar metaphor. You can see her explain the metaphor [in a talk on her website](https://brenebrown.com/videos/anatomy-trust-video/), but the gist is this: when people do even the smallest thing that improves your trust in them, it counts as a marble towards the marble jar. The more the jar fills up with marbles, the more you trust them.

The lesson is that trust is built over time with seemingly small and insignificant moments. After taking some time to think and process the metaphor, I decided I wanted to make rebuilding trust a prioritized and visual experience. So I decided to get a jar but fill it with buttons instead of marbles. Dropping a marble in the jar would've been too noisy of an experience, and this endeavor could double as a cute and fun button-collecting journey. I picked up some regular-sized colorful buttons and some much larger diamond-looking buttons. I designated the extra special buttons for trust-building moments that made me feel incredibly valued and grateful.

---

So far, this experience has been exactly what I need. Looking for all the good in my days had a similar effect to gratitude journals, I assume. I am looking more towards the good things than the bad, but not in a way that subscribes to toxic positivity. I'm still keenly aware that some bad things might happen, but I'm not expecting them to. I'm retraining my brain to look at situations in a more balanced and healthy way.

Examples of moments that are button jar worthy:

- **Getting thanked for vulnerability from multiple managers on my team.** Many of my previous experiences involve being told that I'm too emotional. Vulnerability has been the main thing that's brought me closer to the majority of people I know, so it's a relief to know that vulnerability is so valued.
- **Teammates engaging in discussions I start, and doing so in genuine and authentic ways.** In previous experiences, I've often gotten silence or dismissive responses. When teammates engage kindly and with interest, it shows we have a mutual goal to learn together and teach one another.
- **Getting asked questions about accessibility.** This is the first time I've been asked about accessibility regularly at work. It is so refreshing to be asked questions about my area of focus that is so deeply personal to me as a disabled person.
- **Having normal conversations in code review.** Code review is one area that I have a hard time in because in my experience, they either weren't a part of the development process or they weren't done in healthy ways with the right intentions. Seeing teammates regularly give each other compliments, share resources, discuss pros and cons, and being treated with all of that same kindness... it's hard to describe how valued it makes me feel.

To add to the very last point, I even found myself putting buttons in the jar for things that had nothing to do with me directly. Seeing teammates treat each other with kindness and respect showed me how they would likely treat me as well.

---

In the new year, I plan to keep doing what I'm doing. I don't really subscribe to annual resolutions. I'll do this until it's not valuable for me anymore, which I hope is far off because I'm excited to see the jar fill up with buttons and become a really beautiful item on my desk. I want it to be a constant visual reminder of how far I've come on this journey to healing.


Workplace trauma broke my trust. I'm working to rebuild it.

What a Jar of Buttons Is Teaching Me About Trust


## In General

2021 was a difficult year, but I'm so grateful I was able to end it with a new job on a healthy team and a lot of space away from projects and social media to reflect. I'm looking forward to approaching 2022 and my projects in healthier ways.

## Posts Published

I didn't get to publish as many posts as I wanted to, but I still published 10 different posts and I'm very proud of all of them.

- [Build a Blog Site with Next.js and Firebase parts 1-5](https://ashleemboyer.com/blog/series/nextjs-firebase-blog)
- [My Writing and Planning Process](https://ashleemboyer.com/blog/my-writing-and-planning-process)
- [How to Create Your Own Next.js RSS Reader App](https://ashleemboyer.com/blog/create-your-own-nextjs-rss-reader-app)
- [How I Added an RSS Feed to My Next.js Site](https://ashleemboyer.com/blog/how-i-added-an-rss-feed-to-my-nextjs-site)
- [What the heck is "web a11y"?](https://ashleemboyer.com/blog/what-the-heck-is-web-a11y)
- [Speaking My Truth—I Did Not Leave for Personal Reasons](https://ashleemboyer.com/blog/speaking-my-truth)

## Speaking Events

I was hoping to do more speaking events this year, but a few were canceled or postponed due to the pandemic. Here is a list of the speaking events I did get to do, three of which were live streams on Twitch! I had so much fun on the streams and it's interesting to see how far I've come in public speaking. I _hated_ it in high school and most of college and used to be terrified to speak in front of groups of people.

- ["Getting started with accessibility" interview with Kevin Powell](https://www.youtube.com/watch?v=qr0ujkLLgmE)
- ["Debugging Semantic HTML Elements for Accessibility" SomeAnticsDev Twitch stream](https://www.youtube.com/watch?v=-vAo0-puheM)
- ["Accessibility August 2021 on Dev Roulette LIVE" with Stephanie Myers](https://www.youtube.com/watch?v=vWpj7t8I6SM)
- ["Build a Dark & Light Mode Switcher in React using Context", React.Indy meetup](https://github.com/ashleemboyer/react-indy-20210922)
  - _Note: I'm realizing I still have to upload the finished code from this event! I'll try to do that as soon as I can._

## Books

I am really good at starting new things, especially books. Part of my difficulty with finishing books is ADHD. It takes me a long time to get into a reading focus if I'm only reading. If I use an audiobook or speech-to-text in addition to reading, however, I have a much easier time. What's difficult about that is being deaf. If I don't have headphones to listen while I read, then I can't really listen. I've found that I can also read/listen better when I have a simple knitting project. I didn't finish a ton of books this year, but what's great is I'm learning all of these things about myself and working on carving out the right space for myself to read more.

### Books Started

This list is currently all the books I could find with my Goodreads account (I read on a Kindle). I'm 100% sure there are more books that belong here because I purchased multiple from people that self published. When I find them, I'll add them to the list.

- [It's About Damn Time: How to Turn Being Underestimated into Your Greatest Advantage](https://www.goodreads.com/book/show/48927823-it-s-about-damn-time)
- [Sissy: A Coming-of-Gender Story](https://www.goodreads.com/book/show/41646234-sissy)
- [Real Life](https://www.goodreads.com/book/show/46263943-real-life)
- [Their Eyes Were Watching God](https://www.goodreads.com/book/show/37415.Their_Eyes_Were_Watching_God)
- [Burnout: The Secret to Unlocking the Stress Cycle](https://www.goodreads.com/book/show/40651827-burnout)
- [How to Live With the Internet and Not Let It Run Your Life](https://www.goodreads.com/book/show/57000631-how-to-live-with-the-internet-and-not-let-it-run-your-life)
- [Conflict Resolution Playbook: Practical Communication Skills for Preventing, Managing, and Resolving Conflict
  ](https://www.goodreads.com/book/show/56164760-conflict-resolution-playbook)
- [In the Land of Men: A Memoir](https://www.goodreads.com/book/show/45730112-in-the-land-of-men)
- [Brag Better: Master the Art of Fearless Self-Promotion](https://www.goodreads.com/book/show/53105899-brag-better)
- [Sorry I Missed You](https://www.goodreads.com/book/show/52951550-sorry-i-missed-you)
- [Women in Tech: Practical Advice and Inspiring Stories from Successful Women in Tech to Take Your Career to the Next Level](https://www.goodreads.com/book/show/25852961-women-in-tech)
- [The Beginner's Guide to Stoicism: Tools for Emotional Resilience and Positivity](https://www.goodreads.com/book/show/52085903-the-beginner-s-guide-to-stoicism)

### Books Finished

- [Changing the Conversation: The 17 Principles of Conflict Resolution](https://www.goodreads.com/book/show/24751306-changing-the-conversation)
- [Such a Fun Age](https://www.goodreads.com/book/show/43923951-such-a-fun-age)
- [Help for Women with ADHD: My Simple Strategies for Conquering Chaos](https://www.goodreads.com/book/show/30248423-help-for-women-with-adhd)
- [Weird in a World That's Not: A Career Guide for Misfits, F\*ckups, and Failures](https://www.goodreads.com/book/show/33913476-weird-in-a-world-that-s-not)

## Projects

Like I mentioned already, I didn't get to finish as many projects as I wanted, but I'm really looking forward to getting back to all of these!

> _Note: I can't remember all my projects right now so I'll have to update this post as I remember them._

### Projects Started

**Knitting Projects**

- Socks in (yarn I can't remember the name of, I'll update ASAP)
- Triangle shawl in Cascade 220 Superwash Merino, color number 86

**Coding Projects**

- StaySemantic.com, a web accessibility resource that will have demos and explorations of various components, their properties, and how they sound with screen readers. Check out [a preview of the Disabled Button Demo](https://staysemantic-com-git-dev-ashleemboyer.vercel.app/demos).
- "Build an Accessible Blog with Next.js and Semantic HTML" course for egghead.io, which will get into the importance of semantic HTML in regards to accessibility, how to navigate documentation, and how to identify accessibility issues. I have [a GitHub repository that will get updates](https://github.com/ashleemboyer/egghead-accessible-nextjs-blog-course) as I work on the course.

### Projects Finished/Shipped

**General**

- 25-cube IKEA KALLAX shelf
- IKEA BEKANT standing desk

**Knitting Projects**

- Plain hat in Boss Kitty Hand Dyed DK Weight, Rock-A-Doodle-Doo colorway

**Coding Projects**

- What Can I Plant? For determining what you can plant in Stardew Valley and make the most money off of. _Last updated January 2021._
  - [Link to code](https://github.com/ashleemboyer/what-can-i-plant)
  - [Link to site](https://what-can-i-plant.netlify.app/)
- The Golden Girls Quotes API. Just for getting random quotes from The Golden Girls. _Last updated October 2021._
  - [Link to code](https://github.com/ashleemboyer/the-golden-girls-quotes-api)
  - [Link to site](https://the-golden-girls-quotes-api.fly.dev/)
- [React, TypeScript, Less/CSS modules, Jest, and Enzyme boilerplate.](https://github.com/ashleemboyer/webpack-typescript-jest-less) I did this for the learning experience and don't use it as a boilerplate. I mainly use Next.js for everything these days. _Last updated May 2021._
- [Discord bot for eventually doing cool things in Discord!](https://github.com/ashleemboyer/ashleemboyer-discord-bot) I like the idea of having a cool Discord server for engaging with folks. Maybe it'll happen this year? _Last updated August 2021._
- [Discord bot API for custom webhooks.](https://github.com/ashleemboyer/ashleemboyer-discord-bot-api) It currently sends various notification message in channels only I can see about my new newsletter service and subscribers. I'm hoping to have that newsletter live soon!


2021 was a wild ride. Here are some details from my year.

Ashlee M Boyer

Recommended writings

What the heck is "web a11y"?

Three Starting Points for Making Accessible Digital Content

How I Added an RSS Feed to My Next.js Site

Accessible, Smooth Scroll-to-top Buttons with Little Code

Most recent writings

How I Added a pa11y-ci GitHub Action to My Next.js Site

How I Added a Skip Navigation Link to My Next.js Site

What a Jar of Buttons Is Teaching Me About Trust

2021 in Review