Madalyn Parker's Blog RSS

Choreographing Productivity

Sat, 22 Aug 2020 00:00:00 GMT

Every framework has fundamentals that fit together to make a larger picture. Once you learn the rules, you can bend them to work best for you.

My brain has a difficult time staying focused. My ADHD (diagnosed just this year) skews heavily to the “inattentive” type. It’s not that I’m not paying attention, it’s just that my brain is either:

thinking of 20 things at once that it has identified as equally important, causing it to
- get overwhelmed and do absolutely nothing
- alternate between things in 5 second increments, accomplishing none of them
telling me mean things about myself (that usually aren’t true)
so absorbed by a singular task that everything else ceases to exist

When it’s doing any of these things, my brain does not register current events. It does not commit them to memory. It does not allow me to participate in my life. It makes me feel terrible.

Since my diagnosis, the two things that have helped me manage my ADHD the most are eerily similar and yet nothing alike.

Healthy Distraction

I picked up brush calligraphy as a therapeutic exercise in self compassion, forgiveness, and distraction. Distraction is a useful coping mechanism for anxiety, and, as it turns out, ADHD. When part of my mind is going down the wrong path towards self hate or worry, I can redirect it to something more productive, allowing the rest of my mind to actually focus. It’s the reason I knit. Replace “I hate you, I hate you, I hate you” with “knit 2, purl 2, knit 2, purl 2” and suddenly I’m able to both participate in a meeting and create the brim of a hat.

Idle doodling during calls leads me to write things like “no one wants to hear what you have to say, Madalyn” and “HELP ME” repeatedly. Productive distraction needs to be challenging enough to actually override the negative self talk but not interesting enough to require my full attention.

Brush lettering is not calligraphy. It’s not handwriting. It’s illustration. It’s just shapes.

Learn the handful of basic strokes (upstroke, downstroke, underturn, overturn, compound curve, oval, ascending loop, and descending loop) and you can build any letter or word.

This requires focus, consistency, and training in the form of drills.

I created an Instagram account and called it “Imperfect Affirmations” to track my progress as I learned the fundamentals, accepted my words despite their flaws, and wrote myself nice things.

As I practiced, I learned my favorite way to make each of the basic strokes.

I learned how to combine my version of them to make words that I thought looked good. I learned how to see the message and not the mismatched angles, variable thicknesses, misspellings. And in doing so, I was able to quiet that cruel voice in my head so I could put my energy towards more important things.

Productivity

The other foundational tool in managing my ADHD, particularly at work, has been a Notion template and accompanying workflow gifted to me by my friend Amberley.

Some combination of my mental illnesses effectively ensures I do not have a reliable memory. They get together and actively delete events and facts from my brain. They distract me so I don’t even notice others. I cannot count on myself to be able to recall conversations, pairing sessions, or meetings with coworkers. I cannot remember the events of yesterday. I have conversations with my husband where I excitedly tell him about some new thing I’ve learned and find out that he’d told me about that thing last week or about a movie I’d like to watch only to learn that we’d watched that movie together months ago.

This means I have to be vigilant about having records of everything. It’s why I’m so meticulous about notes around medication changes. It’s why I track my moods. If I don’t write it down it might as well have not have happened.

This presents major difficulties when faced with daily engineering standups and longer term retrospectives. What did I do yesterday? Did I accomplish anything? How long did that task take me? How long should I plan for next time?

It’s a total black box for me.

Memory isn’t the only thing that keeps me from being productive, though. My inattentiveness and anxiety play a huge part here too. Every notification requires immediate attention. Every item in my backlog, every Issue I’m assigned to, every feature on the roadmap weighs on me. I cannot prioritize effectively because in my mind everything is equally important. I cannot prioritize effectively because thinking about all of the requirements of the end product keep me from starting on step one for fear of getting it wrong. (This is also a huge problem for technical coding interviews, but that’s not what we’re focusing on here.)

And then Amberley changed everything for me. She showed me her personal workflow for tracking her work. Not only did she give me the framework, but she taught me the choreography to use it. And then, like with my lettering, I adapted each basic part to work the way my brain does, allowing me to feel confidence in my work for the first time in a long time.

It was like moving into a new home and putting your things into the kitchen exactly where you’d go to look for them if you were a guest. Everything suddenly became focused and simplified and manageable. I wasn’t stuck in place worrying about starting because I knew the steps.

Amberley’s Notion Standup Template functions much like a bullet journal. This is funny because a lot of people get into Brush Lettering specifically to make bullet journaling more aesthetically pleasing, and here I am keeping them totally separate.

The Framework

Everything in this template is manageable because it’s chunked into incredibly bare bones, simplified pieces. Every bit of information has a purpose and a home.

Days

The tiniest building block for this is a “Toggle List” (a collapsible bulleted list) that acts as your running backlog of tasks. If a list is a box that you put your todos in, a toggle list is a box with a lid.

A Day is a Toggle List named for the date and contains two Toggle Lists itself:

What did you do today?
What will you do today?

Weeks

A Week is a Toggle List where each item is a Day.

Sections

Current Week: This is the main section and where most of your interactions with the Page happen. An empty Toggle List sits at the top of this section named with the current week’s dates (e.g. “Week of 8.20.2020 - 8.24.2020”)
Goals: where you can put big picture items like “Ship x feature” or “Demonstrate that I deserve a promotion”
Last Week: When a week is over, it stays on the main Page so you can easily refer to notes
Projects: Every project has a subsection for related Pull Requests (PRs) and tickets

The Choreography

The very first thing to do is to add things to the list of “What will you do today?“. Write down everything you want to accomplish.

Then, throughout the day, drag items from “What will you do” to “What did you do” as they get done.

At the end of the day you’ll have completed some of your todos but probably not all of them.

At this time (or the next morning, if you’re like me):

copy the completed Day
rename it with the next day’s date
clear out the “What did you do” Toggle list for the new Day
delete the “What will you do” Toggle list from the completed Day

Now you’ve kept everything you didn’t do from the previous day so you can do it the next day (very bullet journal like) and have kept track of what you already did!

I like to think of this flow like keeping the “will do” box from the day, but putting a lid on the “did do” box and setting an empty “did do” box on top of it.

At the end of the week:

follow the end of day procedure
create an empty Toggle List at the top of the section with the week’s dates
drag that Toggle List to the “Last Week” section (where the previous week already is)
select the entire week’s worth of Days
drag those days to that Toggle List
drag the current “Last Week” Toggle List to the “Standup Archive” Page Link
update the heading for the current week with next week’s dates

Rearranging the Cupboards

I moved a few things around and added some extra sections to help me compartmentalize my thoughts better.

Space and Sections

In order to maximize space and make the page look more even, I moved the right column of stuff up higher and gave it the title “In Flight.” This is where I have subsections for:

Current Open PRs: a list of my open pull requests with links to GitHub
- I also added a Page Link for “PR Archive” with the other archive links so I can track my own closed/merged PRs
Goals: same as the original
Last Week: same as the original, but with a heading
A11y Things to Keep an Eye On: general “back burner items” that I know I want to tackle and need to be reminded of so I can prioritize them during project planning

I also added an empty Toggle List with the current week’s dates under the Archives list so I can easily copy it and make my end-of-week flow a little faster.

I added a few bits of flair to help me even more. Under the Archives list I added a reminder to myself: “Keep track of 🍅 (25 min) and ✅ (real quick)“.

Tomatoes and Check Marks

One thing I’ve heard a lot of productivity enthusiasts and ADHD-ers swear by is the Pomodoro technique. It’s named for the tomato-shaped kitchen timer (Pomodoro is “tomato” in Italian!) that its inventor used to track his time.

I won’t explain it in detail, but I use it to both motivate me and track my time. The general idea is that you work 25 minutes on, 5 minutes off (resting or doing something not at your desk). I have a hard time starting things because perfectionism and distraction get in the way, but I can get myself to focus on a task if I know I only have to do it for 25 minutes (the length of a traditional pomodoro).

I set a timer, and when it goes off I can stop whatever I’m doing and rest, or decide to reset it and go again. Usually once I’m working on something, I’ve hit my groove and want to continue. Each time the timer rings, I am reminded that taking a break is an option, which is necessary because I will hyperfocus on a task and not move for hours otherwise. I bought an adorable visual timer that displays animals instead of numbers to keep my productivity whimsical and to make it easy for me to tell how much time I have left.

Now, when I want to work on a task in the “Will Do” list, I move it up to the “Did Do” list and start my timer for 25 minutes.

When the timer goes off, I put a tomato emoji next to that task in Notion.

If the task isn’t done, I’ll keep setting the timer and adding tomatoes next to it for each pomodoro. Sometimes I’ll need to copy that task and keep doing it the next day. This way I know how many tomatoes in total I needed to complete that task.

If I’m sick of a task, I can switch to a new task and try that for 25 minutes. I can use this technique to track how long I spend debugging something, how long answering emails takes, and how much time went into a particular PR or feature. I also use it on non-work time to motivate myself to do household tasks that I procrastinate on (e.g. folding laundry or tidying). Again, I can do anything for 25 minutes.

Some tasks don’t require a whole 25 minutes though. A task like “expense internet” or “unload dishwasher” can be done during 5-minute breaks or outside of a pomodoro entirely. I still track these, and put a green check mark emoji next to them.

This technique has helped me get unstuck when I don’t want to do something and to remind me to get up and stretch when I’ve put 4 tomatoes next to a task and haven’t moved.

Here is my Standup Template if you’d like to try out my flow!

Closing

This year has been a trying one, but it also has led me to learn new skills that allow me to adapt and work with my brain instead of fighting against it.

I’ve learned that thinking outside of the “rules” or “proper procedure” can have a major positive impact on me. If I step back and think about what parts are most useful to me, bring me the most joy, and minimize stress, I can usually find a way to achieve what I want. I just need to know the steps first. Having no steps at all is overwhelming and I feel lost. When I’m managing spoons on top of managing time, it’s important for me to find a way to spend my energy in a way that is sustainable.

I’m immensely grateful for Amberley gifting me her standup template, and for the brush lettering Instagram community that inspired me to try things out and create my own style. Both have played a key part in me being able to participate in my work life and home life to the fullest.

My mind absolutely still wanders. I still struggle with memory and inattentiveness. I still forget conversations I’ve had. But it no longer feels impossible and I no longer feel completely at odds with my brain. I’m not buried under my pile of empty check boxes feeling like nothing is accomplishable. I’m not writing “shut up” repeatedly in my notebook.

I have to be tremendously intentional, but when I am…

Accessibility Testing is like Making Coffee

Wed, 12 Aug 2020 00:00:00 GMT

Some Background

I had the privilege of creating course material to teach accessibility testing for work this past quarter.

I agonized over what to include, how to deliver it, how to make it approachable. I decided that I wanted to center everything around tools and processes, teaching about what sorts of violations each are intended for, what they catch, and what they miss.

I envisioned handing my trainees funnels that were narrower and narrower, allowing increasingly smaller violations pass through.

Tooling overwhelm is real when it comes to anything, but I find that this is particularly true when those tools determine whether something is safe or legal. I aim to minimize hesitation to choose a tool and do the testing at all for fear of choosing the wrong one. And for that, I sat with the concepts and played with metaphors until I found something that fit.

And I arrived at:

I could have used any metaphor that involves scaling quality of experience. I could talk about audio or image formats, but I chose coffee because it’s tangible, because I love coffee, and because I think most people have a frame of reference for it. Also, I believe this idea was partially incepted into my brain thanks to Amberley Romo, creator of a11y.coffee (which is an incredible resource - go check it out for further hesitation reduction).

In accessibility testing, and when making coffee, we are shooting for the smoothest experience. We want to get to the essence of the thing we’re making. We want to filter out the grit and bitterness and include everything that makes our final product enjoyable.

Coffee Methods

So let’s talk about coffee! There are a lot of ways to make coffee and people have a lot of opinions about which way is The Best Way. The thing is, the best way is whatever makes the experience best for whoever is drinking the coffee.

I make my coffee one way, my husband makes it his way. And we both order entirely differently if we go out and have someone else make us coffee.

There are many different types of coffee-making implements and each spits out slightly different coffee.

Some things that can affect the quality of coffee are:

how finely the coffee beans are ground (more oils make it into the final product with a finer grind, meaning you get nuanced flavor)
filtration system (paper filters catch and spread those oils)
time spent on the process

I’ve split accessibility testing tools into four categories, so I’ll talk about four ways to make coffee.

French Press === Automated Testing

French press coffee is nice because:

it’s fairly hands-off (set a timer, walk away, come back!)
uses one pot and no extra filter, making cleanup a breeze!
uses a course grind (quick to grind, no fancy tools necessary!)

However it also has some draw backs:

can get gritty or sludgey
unfiltered coffee tends to be on the bitter side and misses nuanced flavors

Like the French Press, automated testing lets grit through. Automated testing can only reliably identify a small subset of accessibility violations (I’ve heard numbers between 10% and 30%). For some people, the violations caught by automated testing will give them a good experience on your site. For others, it won’t find even half of the violations that render it inaccessible. Automated testing is also relatively quick and hands off, but it only gains you so much.

Some wonderful automated tools include:

axe - this is what sits under most automated tooling. You can leverage it directly in your code using the axe-core API or use their browser extensions to run on rendered pages.
Lighthouse includes accessibility auditing and runs axe. It’s shipped right in Chrome DevTools and also has a CI integration you can add to your pipeline.
Accessibility Insights is my all time favorite accessibility testing tool. It’s built by Microsoft and has versions for Android, web, and Windows. I’ll be talking about their Chrome extension, which also uses axe, but all of these are top notch amazing for auditing. There are a lot of moving pieces to this tool, and its “Fastpass” feature fits the “French Press” bill.
WAVE Web Accessibility Evaluation Tool is created by WebAIM, which is an incredible organization responsible for a lot of accessibility usage and demographic data, approachable documentation, and a variety of services for education and evaluation. They have their own API and this tool can either be run from their website or as a browser extension.

Aeropress === Semi-automated Testing

One step up from the French Press is the Aeropress.

Aeropress coffee is nice because:

it’s super quick (the longest step is waiting for water to boil!)
it uses a filter (get some of those good coffee bean oils without much effort)
uses a finer grind (again with the oils!)
customizable (can make “espresso” or cold brew with it)

But it also has some draw backs:

can still get sludgey
only makes one cup at a time
takes physical strength
finicky

Like the Aeropress improves upon French Press coffee by giving you a smoother brew with more nuance, semi-automated testing will catch more accessibility violations. But also like the Aeropress, it’ll take some extra work from you. These tools flag possible violations and highlight features that potentially create issues. They require you to use your judgement to decide what is a bug and what is indeed a feature. I’ll also include integration tests in this category, as you have to simulate user interaction in order to catch violations.

These tools include:

WAVE Tool (again!) because:
- its “Alerts” section flags potential violations
- it surfaces all elements using WAI-ARIA, which needs to be used mindfully and intentionally and should always be looked at critically
- it shows page structure with Headings and Landmarks but leaves it up to you to determine whether they meet standards
Accessibility Insights (also again!) because:
- its “Tab Stops” feature requires you to actually tab through the page manually to verify that tab order follows both reading order and DOM order
- its “Ad hoc tools” surface structure similarly to the WAVE tool
Integration Tests can be used to run a11y checks, interact with the UI, and run them again, verify that focus is where it should be (e.g. is it moved to the modal when the modal is opened?)
- pa11y
- cypress-axe

Pour Over === Manual Testing

The Pour Over is the generally accepted Best Way to Make Smooth Coffee. There are a lot of variables to get right (weight, temperature, humidity, time, technique), but once you’ve perfected the art you’re left with a bright cup of very smooth Joe. Want to use a finer grind? It’s going to take more time. Pour Over coffee involves hovering over your Chemex or other implement and drizzle boiling water in a circular motion in order to lengthen the “blooming” process, allowing for trapped gases, that might make the coffee harsh, to escape.

truly the smoothest brew
bright flavors and highlighted fruity notes

Trade Offs:

isn’t as bold as the coffee you would get from a French Press
requires time and attention
easy to mess up

With manual testing, you have to roll up your sleeves and spend time with your product. You have to be present and interact with it. But you’ll catch things that nothing else will. I cannot stress this enough: you cannot determine if your site is accessible without manual testing.

Manual testing means adopting workflows that disabled people use and determining if your site is usable. Practice makes approximate here; you’ll never use a screen reader the way someone who relies on one does. And screen reader users are not a monolith anyhow. Data shows that most people who regularly use assistive technology customize it to suit their very specific needs.

So these tools are:

navigating with your keyboard
using a screen reader
turning your screen magnification way up (300%+)
using a site with audio muted
verifying that the prefers reduced motion setting is respected

I will also add Accessibility Insights into this list because it will walk you, step-by-step, through an accessibility audit. It provides documentation and all the scaffolding you need to make sure that a site is compliant. And that is so powerful!

However, these workflows are difficult to adopt and attempt if you don’t understand the use cases behind them or what success criteria are. And that’s why none of these methods or tools are as good as user testing.

Going to a Cafe === User Testing

User testing means you get to understand and witness the barriers to access that disabled people encounter when they use your site. You’ll be able to make note of their workflows so you can approximate them in future manual tests. We cannot talk about accessibility if we don’t also talk about disability. You’ll know you have an accessible site when you know that disabled people can use it and have a good experience.

And this is going to a cafe. Can I make my Aeropress every morning and be happy with my coffee? Sure. But if I go to a cafe they have all the ways to make coffee and many I’ve never even heard of. They can make an Oat Milk Latte with Cayenne for my husband, a Pour Over for my friend, and a Cafe Au Lait for me. We don’t have to make the coffee but we do have to leave the house. That extra effort is worth it when everyone gets exactly what they want.

There are many accessibility testing services like Fable that will connect you with disabled people for on-demand user testing and research.

Closing

I hope this metaphor helped break down how you might use different tools in accessibility testing. Some tools can cover a lot of ground.

I have a blog post on how to get set up for manual accessibility testing and another on using a screen reader and the keyboard that will hopefully make manual testing even more approachable.

I’ll shout out a11y.coffee again as another amazing resource to cut down on overwhelm.

I think overwhelm keeps people from choosing their tools and trying them out. They’ll either choose instant coffee as the easier option (no testing) or go straight to the cafe (hire someone else). I’d like to advocate for trying some new tools out and seeing what kind of experience you can create with them.

Using Notion for Personal Health Tracking

Tue, 11 Aug 2020 00:00:00 GMT

Having treatment resistant depression, or any chronic illness, often means trying a lot of different medications and changing them frequently.

This process started many years ago for me, long before I realized it’d be a long-term struggle to find something that worked. I can’t recall anything I used to be on, what dosages I was on, or whether we tapered responsibly. I’ve been keeping a written log of changes like this since 2017 and recently requested my pharmacy history from Walgreens, giving me access to records from before I was diagnosed (I even know the very first birth control I was on!).

I haven’t found a single app that lets me keep this information straight, so I spent some time doing it myself in Notion.

Intro to Notion Databases

Notion can get really powerful when it comes to data. If you know what properties a piece of data should have, you can create a database out of it. If “database” sounds complicated and overwhelming, Notion should make it less so.

Views

Databases are collections of data where each piece of data is a Notion Page. They organize these pages a few different ways through “views”, each helping you understand your data slightly differently:

The default view (Table view) is what comes to mind when I think of “database”. It’s like an Excel spreadsheet, with properties listed on the first row.
Calendar view helps you see data that has Date properties over time
List view is helpful for seeing the list of pages without all the extra data surfaced
Board view collects and sorts data based on a specific property, most typically “status” for project planning
Gallery view creates a “Card” for each page and displays them in a visually pleasing grid, making it ideal for mood boards and photos

Template Pages

No matter what, you’ll create template Pages with Properties so you can quickly add new items to your database.

A database to track fabrics you own for future projects could have these properties:

Name (text)
Color (multi-select)
Yardage (number)
Substrate (multi-select)
Where you bought it (select)
Width (number)
Date you bought it (Date)
Wash instructions (multi-select)
Dry instructions (multi-select)

Here’s an example of that database so you can get an idea what it looks like.

Example Fabric Database

You can even create Pages with default data filled in. For example, our fabric database could have a “100% cotton” template that already fills in the substrate and care instructions and another “quilting” template with size, fabric, and care all filled in.

Connecting Data

The most powerful thing about Notion is that you can connect your data!

Let’s say you create another database to track sewing projects. This database might include these properties:

Name (text)
Pattern (link/file)
Status (select)
Type (select)
Gift (checkbox)

And that database can also have a property named “Fabric” that is type relation. And then you can select your fabrics database and connect specific fabrics to the projects they are used in.

You can also create something called a “Linked Database”, which copies an entire database and lets you filter and sort it to show only the entries you care about.

For this example, you could create a linked database based on your projects and filter by projects with “Type” equal to “mask”. And then you’d see data for all of the masks you’re making.

You could even add a Board view and look at the projects grouped by status.

I used both relations and linked databases for my personal health tracking.

Using Notion Databases for Personal Tracking

Medications (Database)

First, I made a database for basic medication information for each medication I’ve been on.

My database has the following fields:

Name
Generic Name
Gene Interaction (from my GeneSight results)
Medication Class
Link to drugs.com info page for that med
Whether I’m currently taking the medication

Medications Database Template

Med List (Linked Database based on Medications)

Then I created a new page that displayed my Medications database filtered by currently taken and voila! I had my current medication list.

Med List Template

Med Log (Database with relation to Medications)

Then I created a new database with a relation to the medications database to track every time I change medications. This keeps track of when I start a new med, change the dosage, stop a med, accidentally miss one, or take an as-needed medication.

Med Log Template

Medication Page (Linked Database based on Med Log)

Then I can create pages for each medication I want to see over time. For example, I’ve weaned on and off Lamictal multiple times.

I created a linked database by typing /link and selecting “Create Linked Database”, linking my Med Log, and then filtering by Medication Name.

Medication Page Template

I can add additional views for each of these, choosing “Add a view” and selecting to see them in Calendar format, for example.

Additionally, I want to track my moods along with environmental factors that might affect how I’m feeling. I used to use Daylio for this, but since everything lives in Notion now, I created a similar system here.

Daily Data (Database)

I created pre-filled selects for things like Weather and Pain and left check boxes for activities (though I could create a similar list and then select all the activities I did that day, like in Daylio). This allows me to look at how the weather affects my mood, how often I shower, how often I do things that bring me joy like singing, in a calendar view. I also journal in the comments. I rate my mood out of 10 and post Fitbit sleep data too.

Daily Data Template

Putting it all together

Want to adopt my entire system? All the pages are nested under a single page here:

Full Tracking Template

I hope this proves helpful for someone like me, who wants a little more control and organization around managing and tracking health.

Accessibility Improvements to Client Side Routing in Gatsby - Available in 2.19.8

Mon, 10 Feb 2020 00:00:00 GMT

Note: This was originally posted on Gatsby’s blog

We recently released accessibility improvements to client side routing in Gatsby core, building on previous focus management improvements released in version 2.13.2. These improvements enable people relying on screen readers to successfully navigate sites built with Gatsby. If you’d like an in-depth look at how we made incremental changes to get to this release, have a look at the conversation in this issue about assistive technology and navigation. It was opened way back in May 2018.

In July of 2019, Marcy Sutton teamed up with Fable Tech Labs to conduct user testing to determine the best user experience for navigating JavaScript applications. Marcy wrote a thorough blog post about that research. This left us with some concrete recommendations to execute on:

Provide a skip link that takes focus on a route change within the site, with a label that indicates what the link will do when activated: e.g. “skip to main navigation”.
Include an ARIA Live Region on page load. On a route change, append text to it indicating the current page, e.g. “Portfolio page”.

Some Background

Our first step to addressing focus management (the first recommendation, above) was switching to @reach/router. This got us part of the way there out-of-the-box. However, Gatsby’s implementation of @reach/router isn’t idiomatic in that Gatsby puts everything on a single, catch-all route. This means that every page is technically on the same route and route changes weren’t getting picked up by @reach/router. Our improvements in 2.13.2 made sure that every time a route changed, we reset focus on a wrapping div. These changes also ensure that our single, catch-all route is dynamic so we can register changes and take advantage of @reach/router’s strengths. Both of these changes were a major improvement for most users, but because some assistive technologies (NVDA and VoiceOver in particular) were still not working, we kept issue 5581 open and continued to make incremental changes over time.

While this work prioritizes screen reader users, we are still far from the most accessible solution for other disabilities. For example, users who rely on magnification, voice navigation users, and users relying on switches (devices that replace the need to use a keyboard or a mouse) have a hard time orienting themselves on a new page if focus is set on too large of an element or an inoperable element (like our wrapper div). Sending focus directly to a smaller, interactive control like a skip link is ideal. Unfortunately, we’re limited with what we can programmatically achieve at the framework level (we have no way of knowing if a skip link exists on site pages from our Router).

For this reason, we recommend that developers take control of focus themselves and assert the functionality in automated tests. We encourage you to take advantage of @reach/router’s skip nav functionality (or implement a skip link yourself) on your site.

//in layout.js
import { SkipNavLink, SkipNavContent } from "@reach/skip-nav"
import "@reach/skip-nav/styles.css" //this will auto show and hide the link on focus
const Layout = ({ children }) => {
  return (
    <>
        <SkipNavLink />
        <header>
          <h3>Welcome to my site</h3>
        </header>
        <SkipNavContent/>
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Then you can make sure focus is directed there in your gatsby-browser.js file:

// in gatsby-browser.js
exports.onRouteUpdate = ({ location, prevLocation }) => {
  if (prevLocation !== null) {
    const skipLink = document.querySelector('#reach-skip-nav')
    if (skipLink) {
      skipLink.focus()
    }
  }
}

Note: After noticing that Gatsby’s .org site was missing this, I whipped up a Pull Request to facilitate a design discussion and work through real-world feedback. Incremental improvements are so important!

New Improvements

The changes that were shipped in PR #19290 address the recommendation to add an ARIA live region that announces route changes. Using @reach-router alone got us most of the way there depending on which browser and screen reader combination someone is using; for most combinations, page content would be communicated when changing routes. However, we found that two of the most popular combinations (NVDA with FireFox and VoiceOver with Safari) weren’t announcing anything at all on client-side route changes. This leads to a confusing experience where users are unsure which page they are on and unsure if links are working. Implementing our ARIA live region ensures that there is consistent and reliable behavior regardless of the technologies used.

Our solution appends a RouteAnnouncer component as a sibling of our main focus wrapper.

<React.Fragment>
  {this.props.children} //gatsby-focus-wrapper
  <RouteAnnouncer location={location} />
</React.Fragment>

The RouteAnnouncer is a component that renders an ARIA live region. This region has aria-live set to assertive because we want route changes to always interrupt whatever the screen reader is currently doing. We’ve also set aria-atomic to true because we want every change to the content of this div to be announced. Our ARIA live region has inline styles to hide it visually, as recommended by WebAIM.

<div
  id='gatsby-announcer'
  style={{
    position: `absolute`,
    top: 0,
    width: 1,
    height: 1,
    padding: 0,
    overflow: `hidden`,
    clip: `rect(0, 0, 0, 0)`,
    whiteSpace: `nowrap`,
    border: 0,
  }}
  aria-live='assertive'
  aria-atomic='true'
  ref={this.announcementRef}
></div>

This component sets the content to be announced (e.g. “Navigated to Gatsby Blog”) by targeting the innerText on the gatsby-announcer div, selected by ref. Using a React ref and only updating the announcement text if it is different from the current announcement text prevents screen readers from repeating announcements if the page renders multiple times.

One limitation of implementing this at the framework level is that we don’t have access to what ultimately ends up on the pages, as they can be sourced from anywhere. For this reason, the announcement will always start with “Navigated to”, followed by either the content of the first h1 on the page, the title of the page, or location.path depending on what is present. Additionally, the differences between framework level and “userland” changes were evident when testing behavior compared to sites implementing similar changes themselves (e.g. Marcy Sutton’s example solution as part of her gatsby-a11y-workshop) and finding that the framework-level implementation had less consistent behavior and bugs with repetition.

What’s Next

Now that this large improvement is shipped, we’ll continue building on our progress. Right now the English words “Navigated to” appear in every announcement. Because accessible solutions are meant to be understandable, we aim to localize this string based on the language in which a user is navigating the web in (see issue 20801). Additionally, we would like to offer additional customization for users, offering the option to specify an element to grab announcement text from instead of the h1 or title on the page (see issue 21059).

As always, we’d love to hear ideas and suggestions from the community on existing and/or new issues in the Gatsby GitHub repo.

5 Things You Need to Know About Manual Accessibility Testing with the Keyboard and Screen Readers

Sat, 21 Dec 2019 00:00:00 GMT

Note: As part of the Manual Accessibility Testing Manual, this will cover keyboard testing with free screen readers.

1. Keyboard testing is vital in ensuring a site is accessible.

Accessibility of a site is determined based on the Web Content Accessibility Guidelines (WCAG). These rely on four principles that every accessible site should have, often referred to by the acronym “POUR”:

Perceivable
Operable
Understandable
Robust

While automated tests can mostly verify that a site has perceivable content (e.g. color contrast meets standards, non-text content is presented with text alternatives, etc.), the majority of these principles rely on the actual experience of the site.

The second principle, “Operable,” explicitly calls out keyboard accessibility. In order to be WCAG compliant, a site must:

make all content and functionality operable from the keyboard without special timing of strokes
ensure there are no keyboard traps (situations where focus can be moved to a component using the keyboard but cannot leave the component using the keyboard)

You’ll need to test that manually. It also calls out navigation in general and gives explicit points that you can test against manually. The main one that will come into play here is focus order.

Keyboard testing will also help you identify violations in the “predictable” section of the “Understandable” principle. This section focuses mainly on preventing unexpected context changes. Context changes happen when content changes on a page without alerting the user, which can cause disorientation to someone unable to view the whole page at once. For example, think of chat boxes that autofocus your cursor when they have a new message. This is helpful to users who can see the entire page simultaneously, but would be confusing for a screen reader user who was previously navigating another part of the page.

2. The `tab`, `space`, `enter`, `shift`, and `pageup`/`pagedown` keys will get you most of the way there.

tab will take you to the next focusable element. shift + tab will take you to the previous one.
enter will “click” an interactive element
pageup/pagedown or shift + space/space will scroll page content

If there is an interactive or focusable element you cannot reach or select, debug from there to figure out why. Are there clear focus indicators on those elements?

3. Screen readers super power your keyboard.

Your tab key will continue to help you navigate the page, but as soon as you fire up your screen reader you will have a whole host of new ways to reach content.

Each screen reader has its own list of specialized shortcuts. Deque has a nice consolidated list of shortcuts by platform and screen reader with a handy single-page cheat sheet for each. Their survival guide is a great place to start.
Across the board, screen readers have shortcuts that enable you to navigate by headings and tables. Windows screen readers additionally let you navigate by landmark/region. Navigating by landmarks in VoiceOver is possible, but takes an extra couple steps and will be covered later.
Screen readers will also allow you to “navigate” what is being read, choosing to read as granularly as you’d like by paragraph, line, sentence, word, or even character.

If you’re using VoiceOver, you’ll have to use the VO (VoiceOver) keys (Control + Option) a lot. I recommend either binding them to a single key on your keyboard or “locking” them using Control + Option + ;. Locking the keys means they are implicitly pressed and you can invoke commands without them (e.g. Control + Option + Command + H becomes Command + H to reach the next heading). Narrator and NVDA also have modifier keys, which default to the insert keys but can be changed in settings.

Screen Reader	Headings	Tables	Landmarks	Lists
NVDA	`H`	`T`	`D`	`L`
VoiceOver	`VO + Command + H`	`VO + Command + T`	see below	`VO + Command + X`
Narrator (while in scan mode using `Caps Lock + Space`)	`H`	`T`	`D`	`K`

4. The `find` function is your friend.

If you know what you’re looking for, sometimes a page search is the easiest way to navigate to that content. Screen readers allow for finding keywords, which can be pretty powerful if you’re looking for that “Contact” link or something even more particular without having to manually read the entire page. The commands are slightly different depending on the screen reader:

Screen Reader	Open Find Dialog	Find Next	Find Previous
NVDA	`NVDA modifier key + Control + F`	`NVDA modifier key + F3`	`NVDA modifier key + Shift + F3`
VoiceOver	`VO + Shift + F`	`VO + down arrow`	`VO + up arrow`
Narrator	`Narrator modifier key + Control + F`	`Narrator modifier key + F3`	`Narrator modifier key + Shift + F3`

The implementation is slightly different for each screen reader, but they all allow you to access a list of page elements. They essentially pop up a consolidated menu of elements. You can then select what types of elements you’d like to list (e.g. landmarks, headings, links) and then quickly skip to those elements. This makes navigating a page really fast.

This is helpful in testing for a few reasons:

you can ensure that all of the important information on your page correctly appears in that list
you can choose how you would like to browse the page
it approximates the experience of users who can visually scan the entire page to pick out the important information

NVDA

NVDA calls this the Elements List. It can be pulled up using the NVDA modifier key + F7. It defaults to showing a list of links. From there you can use the arrow keys to cycle through elements. If you’d like to change the type of elements you’d like to list, you can tab through until you reach the “Type” radio buttons, which allow selection of Links, Headings, Form Fields, Buttons, and Landmarks.

VoiceOver

In VoiceOver, menus for common actions like this are called “rotors”, and this is called the Web Item rotor. This is how you can navigate by landmark in VoiceOver. You can open the web item rotor by pressing VO + U. Move through elements using the up and down arrow keys and select other types of items using the right and left arrow keys. This rotor includes links, headings, landmarks, sections, form controls, “web spots”, and more.

Web spots are groups of UI elements that VoiceOver has determined go together based on design. You can edit the list of web spots by removing web spots (VO + Command + Shift + {), create new web spots (VO + Command + Shift + }), and even set one as a “sweet spot” (VO + Command + Shift + } + }) to have it always show up first in the list.

Narrator

Narrator calls this feature “Views”. You can switch between views using Narrator modifier key + pageup and Narrator modifier key + pagedown and navigate elements using Narrator modifier key + left arrow and Narrator modifier key + right arrow. Types of Views include links, headings, landmarks, form fields, tables, paragraphs, lines, words, and characters. There isn’t a graphical interface for Narrator Views so I don’t have a picture of them.

6. (Bonus!) Practice makes approximate.

As you become more comfortable testing with your keyboard and screen reader, you will develop habits and fall into a groove for what works best for you. Keep in mind that your set of self-imposed constraints while testing will likely widely differ from those experienced by daily assistive technology users. Screen readers are highly customizable, meaning that every user could be using wildly different settings and workflows.

Up Next

There will be more posts in this series to equip you to manually test the accessibility of websites. For now, topics and timing are still up for discussion.

I hope to cover topics like:

Screen reader tips tricks
Testing techniques and methods
Other assistive technologies

What would you like to see? Do you have tips you’d like to share?

Be sure to check out the first post in this series on Getting Set Up to Manually Test Web Accessibility!

Getting Set Up to Manually Test Accessibility

Wed, 13 Nov 2019 00:00:00 GMT

The Basics

When I sat down with my brand new work computer, I wanted to get set up to manually test accessibility using as many browsers as I could. This meant keeping in mind a few key things and going through some extra steps. These steps are for using free screen readers with a Mac development environment.

I’m going to lay out:

Free Screen Readers
Browser/Screen Reader combinations
Extra configuration needed to test your project on different platforms

While this post will focus solely on setup, later posts in this series will cover other parts of accessibility manual testing.

Please reach out if there are other topics you’d like to hear about!

Screen Readers

Windows

Narrator (made by Microsoft, pre-installed)
NVDA (most popular free solution)

OSX

VoiceOver (made by Apple, pre-installed)

iOS

VoiceOver (made by Apple, pre-installed)

Android

TalkBack (made by Google, pre-installed)

Browser/Screen Reader Besties

When working on a11y at a previous company, I worked closely with a team at Microsoft. They recommended that I only test Internet Explorer with NVDA and Edge with Narrator. This notion of technology pairings is important for testing since some combinations do not play well together and some combinations aren’t widely used.

Below are pairings in order of usage (omitting paid screen readers) according to a September 2019 survey of screen reader users:

NVDA & Firefox
NVDA & Chrome
VoiceOver & Safari
VoiceOver & Chrome
NVDA & Internet Explorer

Narrator & Edge is not explicitly in the survey but I think it’s still worth testing as Edge’s adoption increases.

Extra configuration

Browsers

Safari requires an extra setting to allow keyboard navigation:

Open up Preferences > Advanced in Safari
check “Press Tab to highlight each item on a webpage” under the “Accessibility” section

Mobile Devices

If you have an IRL mobile device you’d like to use to test out mobile screen readers and other assistive apps you can reach localhost there too!

Android

To access localhost from your Android device you’ll need to do (more than) a few things:

First off, make sure your phone has developer options. You can do this by navigating to Settings > System > About Phone and then tapping Build number (the very bottom entry) seven times.
Now there should be a new list of settings under Settings > System > Advanced > Developer Options. Go here and enable USB Debugging
Connect your device to your development machine via USB.
From Chrome, access chrome://inspect/#devices.
You should see that there is a pending device at the top of the list of devices. Your phone should have a pop-up prompt asking you to accept remote debugging. Accept remote debugging from your phone.
Now you need to enable Port Forwarding from Settings in the Remote devices tab in DevTools. (Settings are at the very bottom of the list of devices so you may have to scroll down to find them.) Check the box to enable it and then click the Add Rule button to create a port for your phone to access what’s in your browser. Type in the port you want to use on your phone on one side (e.g. 3000) and the local address you want to access from your computer (e.g. localhost:9000 for a served Gatsby site)
Boom! If you go to localhost:3000 on your phone you’ll see your site!

iOS

Make sure both your device and your computer are on the same WiFi network.
Make sure you specify the host as 0.0.0.0 when you run your server. (e.g. gatsby serve --host=0.0.0.0)
On your Mac, go to Settings > Sharing. You can find the address for your computer’s localhost in fine print under where it says “Computer Name.” It will be in the format of computer-name.local. You can edit this address by clicking the “Edit…” button. (e.g. I changed mine to gatsby.local so it would be easier to type on my device)
On your iOS device, navigate to the address determined in the previous step with your port specified. (e.g. gatsby.local:9000)

NOTE: My device tried to fill in the URL by adding www. at the beginning. If you’re having trouble reaching your localhost, make sure there is no www. in your address bar.

Virtual Environments

VirtualBox

I downloaded a Windows 10 virtual machine from the Windows Dev Center

You can access your host computer’s localhost from 10.0.2.2.

Parallels

Parallels is a paid product, but since it requires extra configuration to access localhost I figured I’d cover that here too.

When serving your site, make sure you are hosting it on 0.0.0.0. For example, if I am running a Gatsby site I’d do gatsby serve --host=0.0.0.0

Then, from your Parallels machine you can access localhost from 10.211.55.2

Up Next

There will be more posts in this series to equip you to manually test the accessibility of websites. For now, topics and timing are still up for discussion.

I hope to cover topics like:

Navigating the web using the keyboard
Screen reader tips and shortcuts
Testing techniques and methods
Other assistive technologies

What would you like to see? Do you have tips you’d like to share?

Finding Balance

Wed, 30 Aug 2017 00:00:00 GMT

TW: depression, anxiety, burnout, stress

Hi! I’m Madalyn

I struggle with mental illness. It’s a part of me but it isn’t me.

I have chronic depression, for which I have yet to find effective treatment. This makes it very difficult for me to connect with my surroundings, even things I know I love like my partner and live music.

I have anxiety, which looms over me and makes me afraid of everything. My body literally enters fight or flight mode and my thoughts become scattered and panicked.

I suffer from PTSD from an abusive relationship. This means I rarely sleep through the night thanks to endless nightmares.

Obviously, these are things that affect my work from time to time.

However, those are just facets of myself. These are other facets that also contribute to my personality and sense of self, and yes: my work.

software engineer, coding since 2007
coffee drinker
music lover
climber
rabbit owner (Toby and Ares)
gamer
foodie

One quick thing: I am not a mental health professional. I don’t even have my own mental illnesses under control most of the time, and definitely am not qualified to give medical advice. I’m going to talk about my personal experience, some of which might be very applicable to your life and some of which won’t. While I wish I could tell you how to overcome your obstacles, both internal and interpersonal, every situation is different and things that worked for me might not work for you. That said, I hope this talk empowers you to improve your work environment, both for you and for the people you work with.

A tweet of mine went viral after I was open about Mental Illness at work. I tweeted out this exchange between the CEO of my company and myself because I wanted to send a message:

Mental Health is Health
Wearing masks at work is exhausting
Supportive management matters
Things are getting better

People liked my message. They shared it and conversed about it.

What does this have to do with me?

Mental illness isn’t something everyone can necessarily relate to. However, life is messy. LOTS of things can seep from your home life into your work life. And the other way around. Let’s talk about that.

Is this you?

You do a lot, but have little interest in what you’re doing
Your to-do list is never-ending
You are constantly connected to work via your smartphone, from when you wake up to when you go to bed. This includes evenings, weekends, and even vacation.
Your body is starting to show signs of wear. You don’t eat well, you don’t exercise, and you don’t get enough sleep.

These are symptoms of “brownout” which is the stage before your work-life balance goes into full burnout and you need to take drastic measures to address them.

This is what it looks like when your body is doing its best to tolerate the stress it is under.

Brownout will build on itself and feed into burnout if you don’t intervene.

Burnout is a vicious cycle.

No amount of coffee or sleep gives you enough energy to get through the day.

Your exhaustion leaves you detached from your work. You go in later and later.

Because you’re interacting with work in a different way, you feel ineffective and like your work might not even matter.

And then it starts again.

How do you stop that vicious cycle?

Self awareness! You are the expert on you.

There’s a lot within your control, you just have to take the time to introspect and answer some questions. Knowing yourself is an important part of alleviating emotional distress. I’m a pretty introspective person, so this is intuitive for me, but if it’s not something you regularly do try to take time to think about what you’re experiencing and identify possible opportunities for relief.

I’ve found that organizing my thoughts and finding ways to accurately articulate what I’m going through has helped immensely. I try to journal and just vent there since I’m so uncomfortable with worrying anyone with my issues. I also see a therapist weekly to further sort my thoughts.

Because of this I’m able to tweak my environment to benefit my mood. I know that isolation is bad for me, so I create opportunities for pair programming or ask colleagues to discuss new technologies with me. I know that I’m not good at being productive when tasks are ill-defined or open-ended, or when I feel like I’m spinning my wheels so I work on todo lists with easy-to-check-off items. For example, I’d include making the todo list, defining my tasks, double checking my schedule, and answering emails as list items. I break larger tasks into smaller ones so I can check my progress and feel like I’m accomplishing things, which energizes me. I know that I’ll start to feel unproductive if I spend too much time on one task so I give myself more breaks for making coffee, going on walks, or attending to my pets.

Introspection

Now I’m going to ask you some questions. The answers to these questions will equip you with the information you need to overcome your stress.

What activities give you energy? Check out the responses to this tweet to get some ideas going!
What activities take energy away from you? Note that we aren’t labeling these as good or bad; we’re just looking at how these activities affect your energy levels. Moderating meetings takes energy from me, but it also makes me feel competent and I find it really rewarding, for example.
What time of day do you have the most energy?
Do people give you energy or take it away? Are there certain people that go against that general rule?
How do you respond to stress?

hiding
fleeing
screaming/yelling
crying
freezing
pushing through
shaking

How does stress make you feel?

overwhelmed
anxious
excited
tired
guilty
scared
energized

What do you have the power to change? (e.g. how you spend your free time)
What do you need to accept as is? (e.g. you can’t do everything)

Once you understand how you process stress, you can identify when you’re dealing with it more than usual.

This identification will allow you to accept that you’re dealing with stress and empower you to change the things you can to make them less stressful.

Okay, but how?

Maybe you’re just nodding along in your seat right now because what I’m saying logically makes sense.

Unfortunately “self awareness” is a pretty abstract concept and it helps to have real ways to apply it.

You have all of this information about yourself. What do you do with it?

If you’ve identified that you’re under more stress than normal, take care of your body first.

How is your physical self? Are you sick? Getting sick?
Have you eaten enough?
How are mind-altering substances (caffeine, cigarettes, etc.) affecting you?
Have you gotten enough sleep?
Have you exercised lately?

Set yourself up for successful sleep Make your bedroom as comfortable as possible:

cool temperature
As dark as possible
minimize noise

Only use your bed for bed-specific activities:

No working from bed
No watching television

If you’re having trouble getting to sleep (or back to sleep), get up and do something out of your room for 20 minutes

Avoid mind-altering substances for ~6 hrs before sleep

Stay in the Zone

Do at least one thing each day to give you a sense of accomplishment

Don’t set yourself up for failure, but do things that challenge and interest you

Do things that make you feel competent and effective

Cut yourself some slack

Once you’ve identified what you can do to ease your discomfort, remember to cut yourself some slack and tap into what makes you happy.

Sometimes I have to count just getting out of bed as a win. Some days I sleep until noon, check my email, and work on a craft project and that has to be good enough. In the long run, not stressing about everything I need to do and setting my focus on self care will help me be productive.

The first thing I ever cross-stitched: “Okay, but first coffee”Remind yourself that you’re doing the best you can, and that others will understand. You wouldn’t be expected to crank out code if you were vomiting so much you couldn’t eat or sleep. Just because your symptoms are mental does not make them invalid.

Sometimes when my brain is foggy and stuck, I have to remind myself that my coworkers want to see me succeed and are willing to help me get there. If I’m spinning my wheels on a task, I can ask them to pair program with me. If something I’m working on drains my energy, I can ask to offload that task so I can pick up something that will make me feel productive and successful.

Accumulate Positivity

List pleasant activities that make you feel good. Here’s a start:

dance to music
go to the driving range (golf)
video games
gardening
coloring/crafting

If you’re having trouble coming up with things, there are lists of hundreds of “pleasant activities”. I recommend this one.

Once you’ve got your list, make a plan.

Short term

Do pleasant things that are possible now

go on a walk
make some tea
look at cute animals on the internet
journal
sit in the sun

Long Term

Make room in your life for recurring positive events. Find something to look forward to that will continue to give you positive feelings over time.

get your nails done (now I get happy every time I look at my hands!)
weekly desk tidy (my coworker does this and feels centered every time he sees his desk)
subscribe to a podcast
study a foreign language
Skype dates

Plan for when things go wrong

Make a self-care kit (use all your senses)

Something to look at - cute pictures, family pictures, favorite vacation spots
Something to listen to - music, soothing sounds, call a friend
Something to smell - fresh flowers, an orange, coffee, lotion
Something to feel - a soft scarf, sticky tape, stress ball, craft project
Something to taste - some candy, lip balm, gum, favorite tea

(this section is thanks to Sarah Betts)

There are smaller ways to do this, too.

For example, I know that when I’m anxious I pick at my nails. I also know that traffic makes me really anxious.

I keep a little nail care kit and cuticle cream in my purse specifically for when I’m stuck in traffic. No more hangnails - only very well manicured hands!

Time (Energy) management

I’m going to take you through my process. It might not work for everyone, but it’s helped me reason about energy and time a lot.

List out activities you do for your job and outside your job. Include both things you must do and things you do anyway.

Job:

Write code
Talk to customers
Attend meetings
Debug quirky customer issues
Respond to emails
Prepare support documentation
Coordinate with stakeholders

Outside Job:

Pay bills
Clean
Pet Rabbits
Knitting
Exercise
Video Games
Listen to Music

(Both of these lists are much longer. List as many things as you can!)

Figure out whether each task gives you energy or takes energy away from you.

I’m going to denote this with a ”+” for positive energy, ”–” for negative energy, and ”|” for neutral energy. Again remember that you’re not judging these tasks as good or bad, just noticing how they affect your energy. I’m also using neutral here to stand for “it depends”. For example, sometimes writing code can make me feel like a total badass and give me a lot of energy but others it can cause me to spin my wheels and really drain me.

Job:

| Write code
+ Talk to customers
– Attend meetings
- Debug quirky customer issues
| Respond to emails
+ Prepare support documentation
| Coordinate with stakeholders

Outside Job:

- Pay bills
- Clean
+ Pet Rabbits
+ Knitting
| Exercise
| Video Games
+ Listen to Music

Stack tasks in your favor Look at what you have control over and what you don’t. For example, on Mondays have meetings scheduled at 11:30, 1, & 1:30 so my time is spoken for at those times. The rest of this time, I can organize to maximize my energy.

Here’s my todo list for this past Monday:

Fill in meeting docs
Write Feature A Blog Post
Write Feature B Documentation
Coordinate Feature A with Support Team
Fix code for Feature A
Coordinate Feature B with engineers
Ship Experiment Code
Meetings

I know what tasks take energy and which tasks give me energy so I can label them as such:

- Fill in meeting docs
+ Write Feature A Blog Post
+ Write Feature B Documentation
| Coordinate Feature A with Support Team
| Fix code for Feature A
| Coordinate Feature B with engineers
+ Ship Experiment Code
- Meetings

Also, I can work in non-job tasks to give me energy where my job is taking it. Additionally, schedule in breaks! If video games - fun things! - tell you to take a break (e.g. Navi in Ocarina of Time), you should definitely take a break from work.

I’ll add these to my todo list:

| Eat lunch
+ Go on a walk
+ Listen to music
+ Knit

I stack my tasks so that things that give me energy sandwich or coincide with things that deplete me. My Monday turned out pretty well!

Recognize Wins Answer these questions:

What difficult tasks did you complete today?
Did any of your colleagues go out of their way to help you?
Did you see any of your colleagues do something awesome?

Keep a record of the answers.

I have a running list of things I’ve accomplished every day. My manager and I actually have a pact to keep a list and share the results with each other to hold ourselves accountable.

Share that record. Olark Live Chat’s Monday Team Syncs start with our Kudos section. This is where we call out things that others did throughout the previous week that helped us or were especially extraordinary. Give each other pats on the back. Remind your teammates that they are awesome.

Bring the donuts.

Did you all pull a late night to meet a deadline? Celebrate that it’s over! Bring coffee or donuts. Or be like the VP of Engineering at Kickstarter, Lara Hogan, and literally buy yourself a donut when you achieve something really difficult.

I hope this was helpful in guiding you towards healthy work/life balance.

This was originally given as a presentation to PRIME Research on 8/30/2017 in Ann Arbor, MI and later published on Medium

The Virtue of Knowing Your Limits

Tue, 16 Feb 2016 00:00:00 GMT

On December 31, 2015, I sat down to write out my year in review. I slogged through my calendar, day by day, and dutifully recorded the most significant events on a timeline. Long before I’d reached December, it became painfully apparent that the last year had been mostly marked by notable negatives: two terrible breakups with the same wonderful person, an extended month-long departure from work thanks to one week spent in the psych ward and a follow-up two-week intensive partial hospitalization program necessitated by my obsession with suicide, a brand-new diagnosis of PTSD (on top of my existing Generalized Anxiety Disorder and Depression diagnoses), several failed medication trials, the list goes on.

While bitterly compiling that summary of 365 very troubled days, I felt empty, alone, and hollow. I was completely unable to pick out any triumphs. During the first six weeks of 2016 I’ve tried to look over my timeline and find beauty and strength within all of that failure, and I think I’ve succeeded.

I look at my easily-digestible version of 2015 and there, hidden between the scrawled lines of missed engagements and disappointments, is a newly-discovered skill. For all of my setbacks and tribulations, I finally learned how to ask for help.

I’ve always been extremely prideful of my self-sufficiency. From a very young age I’ve preferred to learn new things on my own and at my own pace. And I’ve always felt great shame in admitting my faults, even if the standards and expectations I have for myself are much, much higher than those I hold for others. I’ve always taken on a lot at once and have largely gone unpunished for that behavior since I (luckily) have a natural aptitude for academia.

This past year saw many instances of me skirting the very edge of disaster. I could feel myself being effective: getting things done (both at work and at home), taking on more — but there was always a sneaking feeling that at any moment things could go horribly off the rails. I felt like I was holding a multitude of loose threads, every now and then acquiring new ones. I’d succeeded in keeping everything untangled and tidy, but each new addition threatened to throw the whole of my existence into chaos.

And then it did.

After having been at my lowest, planning unspeakable events, hospitalized, barred from access to even my spiral-bound notebook, I can now discern when I’ve surpassed my personal bandwidth. I can look at what’s currently sitting on my plate and be able to say, “goodness, I can’t eat all of this on my own!” And here’s the kicker: people tell me they actually admire that trait.

Despite my knee-jerk reaction and initial disgust towards parading my vulnerabilities, it is in fact liberating and allows me to veritably be stronger. It seems counter-intuitive, even now, but makes a lot of sense if you allow logic to take over. If you are able to ask for help and receive some reinforcement, of course you’ll be more robust and able to withstand more.

While I have to constantly remind myself of this because drawing attention to my weaknesses still feels unnatural to me, I know I’m better for it. My life feels more balanced and others trust my judgement more. 2015 was one for the books. However, I’m going to try to remember it not as my resentful, December 31st self did, but as The Year I Learned To Ask For Help.

This was originally published on Medium

Overcoming Mental Health Hurdles at Work

Wed, 18 Mar 2015 00:00:00 GMT

TRIGGER WARNING: depression, anxiety, suicidal thoughts

Some Background

I’ve lived with anxiety for as long as I can remember. I was the child who cried during emergency drills at school because my brain actually went into emergency mode; I couldn’t handle the thought of not being able to say goodbye to loved ones. I would become physically ill worrying about the well-being of others, things I had done wrong, and internally-fabricated impending doom. For the most part, it didn’t really have a major impact on my life until high school when I started experiencing panic attacks. My condition worsened through college (exacerbated by an abusive relationship), incorporating a depression component, and by my fourth year I was on prescribed medication and seeing a therapist once a week. These helped immensely, but I barely made it to graduation.

I spent much of my time either exhausted and unable to concentrate thanks to anxiety-induced insomnia, or too empty to interact with my surroundings, let alone absorb knowledge. This was so strange to me as someone who spent the majority of childhood with my nose in a book, thirsty for new information. I was always a high-functioning, type-A personality and now that part of myself had taken a big step back. I’d try to tap into it, getting excited about projects and keeping myself busy only to crumble under the weight of my tasks’ collective responsibilities. Every day was a constant battle where I would either be feeling too many emotions at once or none at all.

Despite these struggles I somehow managed to land my dream job just after graduation. Things fell into place. I had renewed hope. I excelled during the first six months at my new job. I soaked up information and threw myself into implementing new features and fixing bugs. I made great work relationships and felt comfortable and well-supported with my colleagues. I was living the life I had been dreaming of during those dark college days.

And then my medication stopped working.

Reaching out is scary

This was my posting on a depression forum from June 2014, when I started noticing my mental health having a significant impact on my work:

This is my first real job out of college and I absolutely love the work I do as well as my colleagues. However, I still feel useless and listless. All I have energy and motivation to do is sleep. I can easily sleep 18+ hrs a day. Some days I knock things out of the park; I make it to work, get tons done, help others, etc. Most days I feel like a waste of space.
I’m in a mental space where I don’t like myself at all. I don’t feel good. I feel detached and empty. I spend the majority of what little energy I have (no will/interest in eating either, heh) on trying my best to pretend that everything is fine.
I don’t want my colleagues to think that I don’t like or care about my job. It’s literally perfect. I don’t like how little I’ve been able to accomplish lately. How can I have an honest and frank discussion with my superiors about my mental state and still have them trust me to get things done and value me as an employee?
I’m feeling so lost here and this job is seriously the best thing I have in my life. What do I do?

The overwhelming response to this post was essentially, “don’t do it; you could get fired.”

My mental health continued to deteriorate and the additional anxiety from feigning effectiveness crushed me completely. I stopped getting out of bed. I stopped eating. I obsessed about suicide options. I wrote goodbye letters.

You told your boss WHAT?!

After looking at my workplace and determining, as detailed below, that it is probably unlike other places that might let the stigma of mental illness affect their treatment of employees, I decided to approach one of our founders (Matt). I did this outside of any depressive episode, so I felt that I had a handle on things and felt comfortable talking about my struggles in somewhat past tense.

This interaction set the precedent for all other experiences I’ve had with sharing my obstacles with my colleagues. I brought it up somewhat casually, as it’s difficult to admit these kinds of problems to people when you are so used to internalizing them. I explained my anguish over my technical performance and how passionate I was about my job. Matt didn’t mention my performance at all. The conversation was quickly focused on my well-being and health, and the team’s willingness to work with me during my low points. The title of this section is inspired by my mother’s reaction to my telling her I came clean about my struggles with one of the founders. She was absolutely horrified that I would put myself at risk for marginalization. It took a lot of reassuring her that my case was different.

Internal improvements

Our talk spurred a team-wide conversation about mental and emotional obstacles. Another coworker joined Matt and I in presenting our experiences with bipolar disorder, burnout, and anxiety and depression, respectively. We talked about what we go through, what it looks like from the outside (so it would be easier for our colleagues to infer what might be happening based on our behavior), how to be helpful during episodes, and different treatment options. We also did some work on our policies on medical leave to explicitly include mental and emotional problems.

“Mental health and emotional struggles are treated like any other illness, because that is what they are.”

Confidence in my work environment

I feel incredibly lucky that my personal experience has played out this way. I know that it is more the exception than the rule. However, I’d like to offer my story as an instance of successful mental health management in the workplace as I didn’t really have any encouraging examples when I was making my decision to be open about my struggle. The following section details some markers I relied on to give me the confidence to come forward about my personal problems. I think they are pretty indicative of a positive work environment and are certainly a good start if you’re looking for things to push for at your own workplace.

Vibrant internal culture

Chilling out at our company retreat We have a strong focus on internal culture; we want our team to feel happy and balanced. This is best demonstrated through our Core Values, which are guidelines we live by at work. They help foster the supportive, empathetic, empowering atmosphere that I’ve come to know and love. They are:

Chill out
Help each other
Assume good faith
Make it happen
Practice empathy
Speak your mind These come through constantly during my work days. On Mondays during our team meeting we start with a “kudos” section where we mention things others did during the week that we appreciated. During code reviews or project meetings, everyone’s voices are heard without losing sight of our common goals. The internal presentation on mental health was met with nothing but support from my teammates.

Flexibility

Flexibility at work is something that I’ve always used as a good indicator of companies who care about their employees. Productivity isn’t attained by some one-size-fits-all environment. My needs change day-to-day, even. Some days I need to sit at a desk in the office with other people to energize and motivate me. Other days my anxiety prevents me from effectively interacting with people and I work best in bed with a cat next to me.

Working at the office and working at home. I’m usually most effective working on the couch. I have the freedom to choose which hours I work and where I work them. If I’m sick, I don’t have to feel guilty about taking that time off. Our policies offer a lot of opportunities to customize work environments and achieve healthy work/life balance. We even have a vacation incentive, rewarding people for taking a consecutive work week completely off the grid, to prevent burnout.

I prevented burnout last year at Sasquatch Music Festival in Washington I think this deviation from strict work practices shows support of individualism and creativity and demonstrates its recognition that work/life balance is important. These policies encouraged me to take care of myself, and made me feel that they genuinely wanted me to feel well and do well.

Focus on people

Where our flexibility and internal culture were no-brainers when I was thinking of things that made me comfortable enough to share such personal details of my life, our focus on people is something I recognized after-the-fact as a factor in my decision. We’ve been working really hard to craft a mission statement lately, and all of the language is tightly focused on people, both inside and outside of our organization.

Our collective mission is three-fold:

To help people make Happy Customers through personality, authenticity, and mutual understanding
To be active in the communities around us by learning from and sharing lessons with everyone we meet
To exemplify a positive organization by creating a safe space to speak, listen, empathize, and build each other up I knew that my teammates cared about me personally based on my previous observations, but the realization that Olark’s concern could be generalized and applied to all people really made me feel safe.

A work in progress

To be honest, writing this was extremely difficult for me. I was amidst one of the longest and most severe depressive episodes I’ve experienced. I by no means claim to be an authority on mental health or overcoming its effects. I’ve spent a large portion of this past year feeling disconnected from the world, hollow and apathetic. I’ve stopped attending to even my most basic needs for weeks at a time. I’ve removed myself from social situations, including interactions with my coworkers, friends, and even family. I’ve stayed up till the wee hours of the morning, gripped by anxiety, unable to sleep or move or think.

I struggle with illness. Just as the flu would prevent me from completing my work, so do my depression and anxiety.

I have gotten to a place where I feel comfortable sharing my experience and letting people know when I’m not doing well. I have shorn that source of stress and no longer worry about others, especially at my job, thinking I don’t care or don’t like what I am doing.

It feels so good to know how well-supported I am at work, and that I really do have the power to make things happen.

After repeatedly being told to keep my problems to myself for fear of discrimination, it’s good to know that it actually is possible to be open about mental health (even at work!) and have healthier relationships and less stress for it.

Since AlterConf

I was in a pretty dark place from late-December until mid-February. AlterConf (Jan 31) was a ray of light thanks to the outpouring of support I received from attendees and my coworkers. However, chronic depression and anxiety don’t really take cues from life events. My depressive episode stretched on.

Intrusive suicidal thoughts pressed into my daily life nearly constantly. I was spinning my wheels on my current project at work. My living situation was detrimental to my mental health. Traveling and the holidays had prevented me from seeing my therapist for three weeks in a row. I just wanted to give up.

During this episode, Olark lived up to its words and worked to help me improve my mental state. Matt made a lot of adjustments to help me get healthy again. He started checking in with me daily to see how I was doing and whether he could help. He encouraged me to transition onto another project that would provide me with easily identifiable action items and more resources if I needed help. He also reminded me to take time to decompress and recharge.

I don’t think I’m ever going to be 100% mentally healthy. This is going to be a lifelong struggle for me. However, I’ve seen first-hand that mental health can be recognized and managed in all facets of life, including the professional sphere.

If you struggle with mental illness, know that there are people out there who strive to make their workplace empathetic and supportive. You should never feel like you can’t address your emotional well-being because “it’s just not something you talk about at work.”

This was originally given as a talk at AlterConf in Oakland, CA and then published on Medium

Madalyn Parker's Blog RSS

Choreographing Productivity

Healthy Distraction

Productivity

The Framework

Days

Weeks

Sections

Archives

The Choreography

Rearranging the Cupboards

Space and Sections

Tomatoes and Check Marks

Closing

Accessibility Testing is like Making Coffee

Some Background

Coffee Methods

French Press === Automated Testing

Aeropress === Semi-automated Testing

Pour Over === Manual Testing

Going to a Cafe === User Testing

Closing

Using Notion for Personal Health Tracking

Intro to Notion Databases

Views

Template Pages

Connecting Data

Using Notion Databases for Personal Tracking

Medications (Database)

Med List (Linked Database based on Medications)

Med Log (Database with relation to Medications)

Medication Page (Linked Database based on Med Log)

Daily Data (Database)

Putting it all together

Accessibility Improvements to Client Side Routing in Gatsby - Available in 2.19.8

Some Background

New Improvements

What’s Next

5 Things You Need to Know About Manual Accessibility Testing with the Keyboard and Screen Readers

1. Keyboard testing is vital in ensuring a site is accessible.

3. Screen readers super power your keyboard.

4. The .css-1k5tpfj{border-radius:0.3em;color:var(--theme-ui-colors-secondary,text);background-color:var(--theme-ui-colors-highlight,#fcede8);padding-top:0.15em;padding-bottom:0.05em;padding-left:0.2em;padding-right:0.2em;}find function is your friend.

5. Screen readers supply a summary of page elements to ease navigation.

NVDA

VoiceOver

Narrator

6. (Bonus!) Practice makes approximate.

Up Next

Getting Set Up to Manually Test Accessibility

The Basics

Screen Readers

Browser/Screen Reader Besties

Extra configuration

Browsers

Mobile Devices

Android

iOS

Virtual Environments

VirtualBox

Parallels

Up Next

Finding Balance

What does this have to do with me?

Is this you?

Burnout is a vicious cycle.

How do you stop that vicious cycle?

Introspection

Okay, but how?

Accumulate Positivity

Short term

Long Term

Plan for when things go wrong

Time (Energy) management

The Virtue of Knowing Your Limits

Overcoming Mental Health Hurdles at Work

TRIGGER WARNING: depression, anxiety, suicidal thoughts

Some Background

Reaching out is scary

You told your boss WHAT?!

Internal improvements

4. The `find` function is your friend.