I have a confession to make. While I have been a professional web developer for over 6 years, I didn't feel comfortable with JavaScript until a year and a half ago. I still don't feel like I know a lot of things. There's a lot that still confuses me. But I've grown a lot in my knowledge in the past year and a half. I wanted to share what I've learned. My goal is to get more accessibility folks into the JavaScript community. The cryptic vocabulary for JavaScript concepts is intimidating for many folks (including myself). It’s why I didn’t become a JavaScript developer until I was 4.5 years into my career. Many experts say you should know the fundamentals well before learning frameworks. But where is that boundary? What is “knowing the fundamentals?” When do you know enough to jump into…
Content Warning: This blog post contains gifs. I’ve wanted to write this blog post ever since I wrote a11y and JS - A Seemingly Unconventional Romance . I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible. According to the WebAIM Million report , “the adoption of React corresponded with 5.7% more accessibility errors than the average home page.” WebAIM Million tests the sample using the WAVE stand-alone API. The WAVE tool catches all crawlable issues, which don't involve a ton of interactivity. I’m not going to use this blog post to talk about those issues. If you’re interested in learning more about that, I’ve created an Email Course on the topic. There are two points that I want to drive home about…
I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills. Today we are going to talk about input[type="range"] . These inputs where you select a value from a slider that has a thumb on it. You start with HTML that looks like this: NOTE: I use the visually hidden class to ensure that we have a label for screen readers. Selecting a purpose for an input range slider has many possibilities. You could use it for volume decibel. You could use it for an audio player. You could use it in a survey when rating from 1-10. Many times, when people make these features custom, they don't think to use the semantic features. They make a bunch of divs, and don't think about the keyboard…
Content Warning: This blog post contains gifs. Hey friends! Today's writing is going to be a follow up to How Accessibility Taught Me to be Better At JavaScript . If you have read my content, one of my favorite topics is about JavaScript and Accessibility. I speak about how JavaScript is actually necessary to make interactive elements accessible. In my previous article, I talked about how I created a popup language menu with accessibility in mind. Making something functional and accessible was my first taste of vanilla JavaScript. The code certainly needed improvements, which we went over in the post. However, making the menu accessible started to help me understand JavaScript better. Today we are going over how I took some cringy “accordion” markup and made it accessible. Remember, an…
Hey friends! Wedding planning is starting to heat up with five months left to go. I was pretty ambitious about my writing schedule when I started my second year of blogging. I figured I had so much more free time on my hands versus what I had six months ago. But I didn’t account for the timeliness of my wedding and my other goals. Whoops. This blog is a work in progress, just like me. Anyways, about a month ago, I presented at a11yTO conference. It was the first time that I had spoken in a while. It reminded me of how much I’ve learned about accessibility beyond the web. Speaking at an accessibility conference forced me to think about my speaker tendencies. For example, I tend to forget words when I’m nervous. I wanted to make sure I wasn’t unintentionally excluding people due to my nerves…
Hey friends! I got back from Toronto last week after speaking at a11yTO, one of the only conferences where I wanted to speak! I spoke about accessibility and JavaScript. This talk was loosely based on my a11y and JS - A Seemingly Unconventional Romance post . So I'm pretty motivated to do a JavaScript-heavy blog post. One of my favorite posts that I've written was my accessible bar chart post . It's been about.... 6 months since I wrote that. So much for a series, ey? Today I am going to be going through how to make an accessible donut chart with d3. I'm not going to go through all the bells and whistles and interactions. It's going to be a donut chart with accessible data. Starting out As a disclaimer, because I am most familiar with d3, this is how I am building out my visualization. D…
Content Warning: This blog post contains gifs. Hey friends! Hope you’ve had a great week! This tweet I wrote a while back inspired me to write this blog post: One of the responses was “this would be a good blog post.” So here I am. In this post I’m going to go over: Background on my first project as the sole front end developer The requirements of that project that led me to get better at JavaScript Creating a popup menu that allowed me to start playing with JavaScript The accessibility issues I faced that I solved using JavaScript Learning about progressive enhancement How I would improve things now Background About 3-4 years ago, while I’d been in tech for a couple of years, I finally knew that I wanted to be a front end developer . I talked to my boss about owning the front end…
Hey friends! Guess what?? It’s my 30th birthday! And because I really love to be poetic, one year ago today, I decided to launch A11y with Lindsey. So my blog’s birthday is on my birthday! A lot has happened in the past year. A lot of opportunities that I’ve come across since I started blogging. A lot of mistakes I made. A lot of veering off course. A lot of personal growth. A new job that made me a better React Developer. Learning hard lessons. Having growing pains. There’s a bit of the elephant in the room. And that’s that there has been a month and a half since I last wrote a blog post. There’s a lot that happened and to be frank, a lot of my reflections in here have come from the last few months. Writing a tech blog is eye-opening The best part of writing this blog is learning about…
Content Warning: This blog post contains gifs. Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion . Quick confession: I know CSS fundamentals, but I am pretty behind on all the new stuff that has been coming out. Because my focus is usually on accessibility, I am focusing far more on HTML and JavaScript. When I focus on CSS, it's ensuring proper color contrast or custom focus states. Sometimes I use CSS to make checkboxes keyboard accessible . I always associated media queries with responsive design. I never thought of media queries as an accessibility enhancement. In this post, we are updating my blog by: Adding the prefers-reduced-motion query Adding a user-controlled setting for reducing motion. Understanding prefers…
Content Warning: This blog post contains gifs. Hey friends! Today we'll be creating custom keyboard accessible radio buttons! This blog post is a follow-up post from my accessible checkboxes post . We'll go over: The markup Creating a pseudo-element on the label in CSS Add "selected" styling in CSS Add focus styling Starting out I decided to create a simple group of radio buttons asking what your favorite animal is The fieldset groups all the radio buttons together logically. The radios inputs are all options to the question in the legend . Also, remember to associate those form labels with the radio buttons! If you don't know what that means, I suggest taking a look at my introduction to accessible labeling . I'm going to add some straightforward SCSS to clean it up a bit. I didn’t…
EDIT: I resigned from the podcast in late August 2019. The accessibility lessons I learned are still relevant if you'd like to start a podcast, but in full transparency, this post is technically out of date. If you haven’t noticed, I haven’t been around! It’s been a month since I posted, and there’s been a good reason for that. Kelly Vaughn, Ali Spittel, Emma Bostian, and I started the Ladybug Podcast. This podcast came to fruition with much labor. As a result, I’ve been figuring out how to balance this blog with that side project! Don’t worry, though, this isn’t going away. My blog is my passion project! Now that you know where I’ve been, I’ve learned a lot about podcasting and how it intersects with accessibility. I knew some of these things at a high level, but in this post, we’re going…
Last week, I got a decent amount of folks who found the aria states blog post helpful. This week I wanted to continue with that and go over something that took me a long time to understand: labeling. How do you label things? What needs labeling? What is the difference between all the ways to label things? After this post, you should have a firmer understanding of all things labels. Form Labels Lack of form labels is one of the most common places I see accessibility errors. Most people do something like this: I’m going to repeat it for those in the back: Placeholder attributes are not enough to label a field for a screen reader. To properly label this, we need to ensure that there is a that exists and is also associated with the input. The way to associate it is to give the…
Hey friends! Today’s blog post comes to you from my Patreon folks' poll. It’s a follow up from one of my previous posts about Demystifying ARIA . ARIA can be utterly mysterious and daunting, but it’s handy. One of my favorite ways to use it is to communicate state to screen readers.
I’m seeing a positive trend in the a11y community. Instead of using classes to style elements, a11y folks are styling by using ARIA attributes in the CSS. This helps enforce accessibility standards and prevent people from cheating accessibility. The attributes I’ll be going over today are aria-expanded , hidden , aria-hidden , and aria-current . The aria-expanded attribute aria-expanded is one of the few aria attributes that does not have an HTML5 equivalent. Please tweet me if I am wrong, but at the…
Content Warning: This blog post contains gifs. This post isn’t going to be a talk about speaking. I wanted to give you a glimpse because if you don’t follow me on Twitter, you would have no idea! Onto blogging! A few weeks ago, I asked people if they had an interest in my blog editing process. I’m very public about my writing process, and the idea popped into my head. I had an overwhelming response that said yes. I also asked on my Patreon. While my last post about JavaScript and Accordions won out, this topic was a close second. So here we are! Starting out First comes writing the thing. Many people have formats like writing outlines and where their points are. I wish I could say I consistently write outlines...but I don’t. I either look to Patreon, Twitter, or a long list of ideas I…
Content Warning: This blog post contains gifs. When I first wrote my post about JavaScript and Accessibility , I promised I would make it a series. I've decided to use my patreon to have votes on what my next blog post is. This topic won, and I'm finally getting more time to write about JavaScript! So this topic I am going to go into a deep dive on how to make accordions accessible! Our focus is: Accessing the accordion with a keyboard Screen reader support HTML Structure I did a few pieces of research about the HTML structure. I read the a11y project 's link to Scott O'Hara's Accordion code . I also read Don's take about aria-controls - TL;DR he thinks they're poop. I couldn't escape reading the WAI-ARIA Accordion example as they set a lot of the standards. My hope is with all the…
Hey y’all! First off, I want to thank people for their patience with this post. I had a very stressful few weeks after I published my last post. Of course, I chose to do a highly technical post in the middle of a stressful deadline at work. That deadline has since past, and I finally finished this post! I asked on Twitter what you’d like for me to write about next. Many people requested they wanted me to talk about accessibility for data visualizations. Because there’s so much that I have learned about data visualizations, I decided to make this a series. For the first part of my series, I am going to talk to you about Accessible Bar Charts! Starting out I am going to be using the d3 JavaScript library because of my familiarity with it. I am building an inline SVG, and the principles we go…
Happy Tax day (at least if you're American)! My last post was about my accessibility testing process. However, this week, I wanted to examine automated testing. I have my initial process of what I do while I am working and what I make sure I manually test. I also wrote about all the things I manually test . These days Continuous Integration is essential for large teams. To your surprise, I haven't configured accessibility CLI tools for my projects. I was the primary front end most of the time and I always manually test things out of habit, so it never felt necessary. It's time to call myself out. I absolutely should be integrating these into my tests into my projects. I used to be the only front end developer, and I took it for granted. I am now on a team where I am the accessibility…
Hi friends! It’s been a hot minute since I wrote a blog post. If you follow me on Twitter , you know that I took a very strategic break in March to work on getting ahead of things. So now I am up and running, and I asked some followers what they wanted me to write next. It sounded like people were curious about my web accessibility testing approach! So I’m going to walk you through my thought process, what I test for, how early I check, and how I test. It's like having my web accessibility testing checklist in your back pocket. Getting started My web accessibility testing process begins before I even start writing code. Hopefully, I wasn’t siloed away from the designer and had input in design decisions. Even if I didn’t have input, I start looking at the design and how I can ensure that…
Content Warning: This blog post contains gifs. I wrote a tweet thread a while back where I started talking about ways to keep accessibility in mind on the platforms we use such as Twitter. Sometimes we don’t have control over the platforms we use, and the best we can do is ensure our content is accessible. This tweet thread got a decent amount of attention, but unfortunately, it’s easy for things to get lost in the Twitterverse. I decided to write a blog post elaborating a bit more on each of the critical points I made while also ensuring that you could find them more easily. Be careful with your emoji use Marcy pointed out here how the clapping hands are actually a pain for screenreaders. Here’s what it sounds like if you turn on your screenreader: “Thank clapping hands you clapping hands…
Back in October, I wrote a post about 10 things I've learned from working remotely , and it was a big hit. It actually made the top 7 posts that week on dev.to ! I had been working remotely for about 16 months at that point, and I shared a bunch of things that I had learned. A few months ago, I got an incredible offer. It was approximately 32% more than I was making - but there was a catch. I had to go back into working at an office. The commute was about 20 minutes - so not bad at all. However, I didn’t take it with a grain of salt. The work seemed way more exciting than what I was doing at my remote job, and the money was terrific. However, I was very attached to my lifestyle as a remote employee. I decided to go for it, but it was definitely an adjustment. It’s been about 2 months…
Content Warning: This blog post contains gifs. If you didn’t know this already, I usually cross post all these on DEV . When I cross-posted about why accessibility isn’t an edge case, I got a comment wishing accessibility was more straightforward to implement. I didn’t find learning to make accessible solutions to be that challenging once I was up to date on HTML and CSS best practices, so I was genuinely curious about where they found it difficult. When they answered , it seemed like the primary pain point was ARIA. I’ve seen a ton of confusion about ARIA and when it should and shouldn’t be used. What do these ARIA attributes even mean? Is there a list of all the attributes? I am thinking about making this into a series, maybe going over a few ARIA attributes a week and how they can be…
This post was inspired by a few things. First, a few months ago Rian Rietveld announced she was resigning as the WordPress accessibility lead . I read through the post, and the reason seemed to be mainly about Gutenberg. It seemed that despite all the wpa11y’s team’s warnings, they were pushing to release it while it was almost unusable for those who need assistive devices. I found there to be a tremendous opportunity to educate communities and help to others learn. In Rian’s blog post, a few things stuck out to me as main problems (these are directly from her site): "The codebase of Gutenberg is difficult for all of us, because no one in the wpa11y team is a skilled React developer. So it was hard to implement changes and write PRs ourselves." "There was no React developer with…
Content Warning: This blog post contains gifs. When I was a Drupal developer, a great deal of interest went into Automated Accessibility Testing. I very much loved working on automation especially when it was incorporated into our Continuous Integration. This would fail builds that introduced accessibility errors, which was a great way to ensure that we were thinking about accessibility from the start and not adding new problems. However, I feel like we like to automate our problems away and it cannot fix everything for you. Automated accessibility testing catches those nitpicky HTML errors so that you can focus on the more significant and subjective items manually. Accessibility is empathy-driven, and you can not automate empathy. Automation certainly makes a lot of things easier, like…
The primary question I get from developers is “How do I get my clients on board” or sometimes “How do I convince my boss that it’s worth investing in?” I was asked this once at a panel, and my response was “I don’t, I just do it.” Because I understand accessibility pretty well and build with accessibility in mind from the start, I am usually able to solve accessibility problems relatively quickly without people even noticing that I spent extra time on it. But when developers who are still newer to accessibility are trying to convince their bosses, sometimes they clap back that “this is a low priority” or “that is an edge case.” Oh goodness, nothing gets my blood boiling more when someone dismisses the needs of their users. If your product or website doesn’t work for any one person who…
Content Warning: This blog post contains gifs. After cross-posting my last accessibility post about dropdowns on dev.to , I was reading through the comments and someone posted about :focus-within . The best thing about sharing my knowledge on the internet is learning how other people are approaching things. Quite frankly, I have never used :focus-within before, so this is me learning and testing it out. Because this blog post will primarily be based on a continuation of the previous dropdown post , I highly suggest reading that beforehand if you haven't already. As a reminder, here is the same HTML structure from the previous post: What is :focus-within :focus-within takes the :focus pseudo-class a step further. It represents an element that receives focus or if one of its…
It's that time of year where I utter the same predictable phrase: "This year feels like it's been so long and yet so short!" As some may have noticed, I took a bit of a break from blogging in December. However, the positive of that is I've had a lot of time to reflect on the year and my goals for the upcoming year. Blog This blog is something I wanted to start since April this year. I worked with my friend Raquel (link in the footer) to get the logo designed, and the color scheme decided upon. She was a fantastic resource, and I have recommended her to friends who are looking for a designer. But somewhere along the road, I got a bit slowed down by hosting costs because I was building my blog in Drupal. Drupal hosting is EXPENSIVE and considering I was not making any income from blogging, I…
Content Warning: This blog post contains gifs. Want to see this in action? I created a 6 minute video collection! Go To My Free Egghead Collection Hover navigations are pretty simple to do without JavaScript, which is how I usually see them implemented. The HTML and CSS are pretty simple. HTML: CSS: Note: I have used the visually-hidden styling instead of display: none . This is important for accessibility, and you can read more in the link above. I've taken out some of the general styling, but this CSS is what contributes to the hover effect. However, as you can see with the gif below, it doesn't work the same way if you use your tab key. Before we jump into coding, I wanted to share my approach to this problem. First, I want to solve the problem of opening the nav on not only…
Content Warning: This blog post contains gifs. I've seen a ton of designers make these GORGEOUS checkbox styles, but then you see them implemented and you can't even select it using your keyboard. Let's say we got this in our style guide from our designer. I've seen this implemented before and it looks gorgeous. However, when I press the tab key, it zips right past it. If this field is required, you're screwing over a bunch of your users. They use ::before or ::after pseudo-elements to make a pretty checkbox and use the :checked pseudo-class to determine the styling of the check itself. It looks cool, but the problem is that they use display: none on the checkbox input itself. When we do that, we make the checkbox itself invisible to the browser, making it unusable for those who…
Happy Thanksgiving to those of us in the United States! I've been in this industry now for about 4 and a half years. In the spirit of Thanksgiving (in the US), I wanted to make a specific list of what I am thankful for in my journey as a developer. Community I am very thankful for the tech communities to which I belong. I know that meeting people on the Internet was taboo at one point, but I've made so many friends online through the community. I am reasonably active in the Washington, D.C. tech community and their slacks. I have made so many friends on not only a professional level but also on a personal level. These friends I get to cheer on as they grow in their career, and they reciprocate that to me. One of my biggest supporters has been Ali Spittel whom I met online through…
Content Warning: This blog post contains gifs. As I started this blog, I began to follow specific hashtags on Twitter. I learned that last month was Dyslexia Awareness Month after following the a11y hashtags on Twitter. I’ve always said that disability isn’t always visible, mainly learning disabilities. However, this is something that Web Accessibility doesn’t cover often. I’ve found very few places that talk about web accessibility and dyslexia. Most of the resources I found focused on teaching those with dyslexia. I’ve spent the last couple of weeks researching how to make my content more accessible to those who have dyslexia. I am learning along with you in this blog post. Here is what I’ve learned: Style your copy properly There are a few things that can contribute to the readability…
I soft-launched my blog the day before my birthday, announced it on my birthday (October 3rd), and now it's 4 weeks later. It's been a very intense and rewarding process thus far, and I've taken this week to reflect on it. I wanted to share what I have learned thus far for those of you who wanted to get started but also wanted someone to keep it real. To keep it transparent, these are my motivations for actively blogging. Defining myself as a Subject Matter Expert on accessibility Tired of being rejected from my cool talk ideas. Sharing is caring and I've gotten lots of one on one feedback about how my perspective has helped them. Would love to eventually generate a side income, either from writing or where writing leads me. It is significantly more work than I thought it would be I know…
Back in fall of 2016, I spoke for the first time about accessibility. While planning my presentation and looking for a relevant case study, I stumbled upon something that was quite relevant for the time - the presidential candidates’ donation sites. Considering Section 508 applies to government agencies, I figured that their sites would be super accessible. Boy, was I wrong. The biggest issue on both Trump and Clinton’s sites were inaccessible forms. I did an evaluation of the forms of the candidates’ donation sites and if I remember correctly (it was almost 2 years ago), both had issues with all forms having missing form labels. While I don’t know what the development cycle is for candidate sites, I would assume the strategy is something like “get the site online as quickly as possible so…
I wanted to write a blog post about one of my favorite accessibility topics - keyboard accessibility! I test this so much without even trying because as a developer I use my keyboard so much. I use it to navigate around apps, within a web page, and scrolling through my millions of tabs on my browser (who else is guilty of that haha). What is Keyboard Accessibility Keyboard accessibility is ensuring that you’re not 100% reliant on your mouse at any given time. This means you’re able to get around the webpage using your keyboard. Have you ever tried that? I’m so accustomed to using my keyboard to navigate now because I hate using mouses, but I am always shocked when I hear both technical and non-technical people alike look at me in shock because they hadn’t thought about the fact that you…
If I ask anyone what accessibility means to them, usually the first thing that they can identify is “Adding alt text!” All you have to do is add alt tags to your images makes your site way more accessible, right? I love the enthusiasm to reduce accessibility errors, but I am about to give you an infuriating response. It depends . Adding alt text may mean that you don’t get pesky errors about missing alternative text on an Accessibility Scan, but it doesn’t necessarily mean that your images have a better meaning. Sometimes an empty alt tag is actually what you need for a more accessible image. Are you envisioning the mind blown emoji and/or gif yet? That’s how I felt when I was learning about it, and it made me realize how much bad advice I had given to others about fixing alt text…
This topic has the potential to be a touchy one for marketing departments and designers. There have been plenty of approved designs I have received, just to find their new branding's color scheme is not accessible. Sometimes our clients or organizations fall in love with their new brand and design, and asking them to change on the branding or the design is actually like asking them to change the new identity they just fell in love with. The ironic part is there are usually accessibility requirements on the clients' SOW, but the designers didn't know that their colors were inaccessible. Rule of thumb We can get a little more nitty gritty here, and we will. However, from both a technical and non-technical perspective there is one major rule of thumb when talking about color: do not depend…