<p>If you've seen &quot;a11y&quot; floating around the web development space and you're not sure what it means or how to say it, you're absolutely not alone. Don't feel bad! Almost no one knows what it is until someone else tells them. I didn't know for a long time. I even created a tool that relies on the mispronunciation of it!</p>
<h2>The What</h2>
<p>&quot;A11y&quot; is a numeronym or number-based word. It is composed of three parts:</p>
<ul>
<li><code>&quot;a&quot;</code> - the first letter of the word &quot;accessibility&quot;</li>
<li><code>&quot;11&quot;</code> - the number of letters between the first and last letters of the word &quot;accessibility&quot;</li>
<li><code>&quot;y&quot;</code> - the last letter of the word &quot;accessibility&quot;</li>
</ul>
<p>Numeronyms are very common in web development! Think of &quot;K8s&quot; (Kubernetes), &quot;i18n&quot; (internationalization), and &quot;o11y&quot; (observability) as a few of examples. Some of them have different pronunciations depending on how the number in the middle is pronounced in combination with the letters before and after it.</p>
<p>The way we pronounce &quot;K8s&quot; is different than the way we pronounce &quot;a11y&quot; because of how the numbers flow with the other letters. We <em>could</em> pronounce &quot;K8s&quot; as &quot;kay-eight-ess&quot;, but &quot;keights&quot; (see the word eight in the middle?) is a single syllable and a little easier to say.</p>
<h2>The How</h2>
<p>So how to do we pronounce &quot;a11y&quot;? We say &quot;ay-eleven-why&quot;. Pronunciations like &quot;al-ee&quot; or &quot;al-eye&quot; don't quite fit like most other pronunciations of numeronyms because they're not saying the number in the middle at all. This isn't to say that all numeronyms are said the same way, but most that use this format follow this idea.</p>
<h2>The Why</h2>
<p>Numeronyms are often used when their original word is a lot of characters or difficult to pronounce. <a href="https://en.wikipedia.org/wiki/Numeronym">According to Wikipedia</a>, the first numeronym was created in the 1980s for a software account owner's surname because it was too long for the system to handle. &quot;Accessibility&quot; is 6 syllables whereas its numeronym is 1 less. That's not a huge amount of savings, but the phonetics of &quot;a11y&quot; are easier for many people to verbalize than &quot;accessibility&quot; because the there are less &quot;harsh&quot; syllables in comparison.</p>
<p>Numeronyms are also helpful where brevity is important, such as in tweets because Twitter enforces a character maximum. Since there are less characters to type, it can also be more efficient once you get used to using it. For me personally, it's also easier to remember how to spell!</p>
<h2>Do I have to use it?</h2>
<p>Nope! If you like using the word &quot;accessibility&quot; more than you like using the &quot;a11y&quot; numeronym, please continue to do so. It's definitely a matter of preference and using one or the other does not make you more or less knowledgeable. If someone tells you otherwise, they are unfairly gatekeeping the topic of web accessibility. What truly matters is that you know what &quot;a11y&quot; means so you're not thrown off when you read it in other people's content.</p>
<p>Remember: everyone has different accessibility needs. Some people use &quot;a11y&quot; because it's more accessible to them. If &quot;accessibility&quot; is more accessible to you, that's totally acceptable!</p>


The "a11y" numeronym, why it's important, and how to pronounce it

What the heck is "web a11y"?

<p>Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They're even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.</p>
<p>One example is the <a href="https://www.w3.org/TR/wai-aria-practices-1.1">WAI-ARIA Authoring Practices</a>, which is 140,923 pixels tall at the time of this writing. I'm not calling them out, it's just one of my favorite pages on the entire internet! <a href="https://ashleemboyer.com/my-favorite-resource-for-making-accessible-custom-components">It's a great resource for making accessible custom components</a>.</p>
<p>Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It's definitely a lot easier than <em>I</em> thought! The code bits I'm about to show are for React and SCSS, but you don't need to know either. The basic concepts here are for JavaScript and CSS. We'll also cover how to get rid of the smooth scrolling when it's an accessibility concern.</p>
<h2>The SCSS Code</h2>
<p>First, let's make sure this scroll will happen smoothly. To do so, set <code>scroll-behavior</code> to <code>smooth</code> in a global stylesheet under the <code>html</code> element. The media query I've added is for accessibility. Animations can be distracting or for some users, like myself, have vestibular disorders where animations can cause harmful physical effects. These effects can include dizziness, nausea, and headaches or migraines.</p>
<p>We can prevent this harm to these users who have set up their device to reduce motion by using the <code>prefers-reduced-motion</code> CSS media query. Inside of it, we set the <code>scroll-behavior</code> to <code>auto</code>, which is the default. If you'd like to read more about this technique, it's thoroughly covered in <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C39">WCAG 2.1</a>.</p>
<pre><code class="language-scss">html {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}
</code></pre>
<h2>The React Code</h2>
<p>Now, add a button to the bottom of your page with lots of content. The important line of code here is <code>window.scrollTo(0, 0)</code>. This is what will scroll your page to the top. You can read more about this function <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo">on MDN</a>.</p>
<pre><code class="language-jsx">&lt;button
  onClick={() =&gt; {
    window.scrollTo(0, 0);
  }}
&gt;
  Scroll to top
&lt;/button&gt;
</code></pre>
<h2>Managing focus</h2>
<p>Finally, we must also address focus management when adding a scroll-to-top button to our sites. If we add nothing else to our code from above, the button will still have focus after it is clicked. What this means for users who navigate pages with a keyboard is that the page's focus is not where they expect it to be. They expect it to be at the top of the page when it's not.</p>
<p>In your button's <code>onClick</code> listener, after <code>window.scrollTo(0, 0)</code>, you need to manually put something at the top of your page in focus. In this article, for example, I can call <code>focus</code> on the <code>&lt;h1&gt;</code> element containing the article title. We just need to add one thing to that element in order for this to work without interrupting normal keyboard navigation. That thing is <code>tabindex=&quot;-1&quot;</code>.</p>
<p>My <code>&lt;h1&gt;</code> element will then look like this (in React):</p>
<pre><code class="language-jsx">&lt;h1 id=&quot;article-title&quot; tabIndex=&quot;-1&quot;&gt;
  Accessible, Smooth Scroll-to-top Buttons with Little Code
&lt;/h1&gt;
</code></pre>
<p>And here's what button will look like with this specific example:</p>
<pre><code class="language-jsx">&lt;button
  onClick={() =&gt; {
    window.scrollTo(0, 0);

    // focus management
    const title = document.getElementById('article-title');
    title.focus();
  }}
&gt;
  Scroll to top
&lt;/button&gt;
</code></pre>
<h2>Conclusion</h2>
<p>That's it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You've also made it so your site doesn't accidentally harm someone who can't tolerate animations! Well done. I am proud of you!</p>


Adding a scroll to top button with smooth scrolling is as easy as adding a few lines of code.

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

<p>Accessibility can be pretty overwhelming at first. There are a lot of things to consider and it's really hard to figure out what you don't know when you're just starting out. I hope you find this short list useful to help your first dive into making accessible digital content. My focus is usually on websites, but a lot of this is good for things like mobile apps, ebooks, and slideshows, too!</p>
<h2>1. Color Contrast</h2>
<p>Ensuring you have a good contrast between text color and background color ensures nearly everyone can consume your content. People with vision disabilities (vision loss or color blindness) need high contrasting colors. Your minimum goal here is to meet contrast standards for normal and large sized text.</p>
<p>My favorite tool for this is the <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a>. You can input your foreground and background text colors and it will tell you how they fare under the WCAG level AA and level AAA standards.</p>
<p><img src="https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/headers%2F2020%2F07%2F26-three-thigns%2FScreen%20Shot%202020-07-26%20at%209.53.28%20PM.png?alt=media&amp;token=aa6423ce-f0b1-4b2d-b43d-bb23765d0c40" alt="A screenshot of the WebAIM Contrast Checker in action. It shows the overall contrast ratio of two colors to the right of two inputs, and below that it shows whether the contrast passes level AA and AAA standards for both normal and large sized texts." /></p>
<h2>2. Alternative Text</h2>
<p>Alternative text is also important for people with vision disabilities. There are two ways you can go about alternative text depending on your platform.</p>
<p>When you're making a website by writing your own HTML, writing blog posts, or posting to social media sites like Twitter, you can add alt text to images. In HTML, make sure you're providing an <code>alt</code> attribute all <code>img</code> elements. When writing blog posts, a lot of blogging platforms will have a text input for you to provide alternative text. On Twitter, you can add alternative text as you're about to tweet an image or GIF.</p>
<p>The previous points are only going to be useful for people using a screen reader. These devices pick up those attributes to present images to the person consuming them. However, not all users with vision disabilities use screen readers. So, if you feel like you'd rather make your alternative text available for everyone, it's common practice to surround an image description in square brackets and preface it with &quot;Image description&quot;, like this:</p>
<pre><code>[Image description: ...]
</code></pre>
<p>As for actually writing the image descriptions, that's going to take some practice. Imagine you are sitting socially distanced from a friend and you want to show them a picture you've come across on your phone, but you'd have to break social distance to physically show them. How would you describe the image to them in one or two sentences?</p>
<h2>3. Semantic HTML</h2>
<p>This point is a little more technical, but also useful for folks that use blogging platforms that provide text editors. The main lesson for this section? Use the elements that we have been given for their intended uses.</p>
<ul>
<li>Need to display things in a list format? Use a bullet (<code>&lt;ul&gt;</code> element) or numbered list (<code>&lt;ol&gt;</code> element).</li>
<li>Have a navigation menu at the top of your site? Use a <code>&lt;nav&gt;</code> element.</li>
<li>Have an element that users can click on to perform an important action? PLEASE use a <code>&lt;button&gt;</code> element. 😁</li>
</ul>
<p>Using semantic HTML elments is so important because they're already able to be presented by assistive devices without much addition. You're going to start adding ARIA roles and properties the minute you start using <code>&lt;div&gt;</code>s for <code>&lt;button&gt;</code>s, and if you don't know what you're doing there, you can severely and negatively impact a screen reader user's experience.</p>
<p>You can read and practice with HTML semantic elements <a href="https://www.w3schools.com/html/html5_semantic_elements.asp">here</a>, on W3Schools.</p>


You'll leave this post with straightforward action items for making your digital content more accessible.

Three Starting Points for Making Accessible Digital Content

The first accessible React component in the live series is a breadcrumb.

Build an Accessible React Component

Build an Accessible Breadcrumb Component&mdash;Part 1 in the Accessible React Component Series

<h2>First of all, Thank you so much! 🎉</h2>
<p>The &quot;Build a React &amp; Firebase Blog Site&quot; live stream was fantastic! I now have two posts to add to my <a href="https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0">&quot;Build a React &amp; Firebase Blog Site&quot; Series</a> and am considering packaging the series up in an ebook format! You can watch the video on YouTube!</p>
&lt;iframe width=&quot;100%&quot; height=&quot;400px&quot; src=&quot;https://www.youtube.com/embed/UA0-DWfIuts&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
<h2>What's this about? 🤔</h2>
<p>In the meantime, I've been thinking about topics for upcoming live coding streams and have decided to make a whole series about building accessible React components. I have GitHub repository with a couple of things in it already, but needed a break from all things outside of work for a while. What better way to pick things back up than with a live series to add to the repository?</p>
<h2>Neat! How's it going to work? ✨</h2>
<p>Here's the idea: we'll pick a random widget from the <a href="https://www.w3.org/TR/wai-aria-practices">WAI-ARIA Authoring Practices</a> with an on-screen wheel, then build it in React! If a really complex component is chosen, it might take an extra stream to finish it, but we'll walk through the whole thing from start to finish!</p>
<h2>Let's gooo! 🏃‍♀️</h2>
<p>To get notified when I go live on stream, you can <a href="https://twitch.tv/ashleemboyer">follow me on Twitch</a>. If you can't catch the stream live, it'll still be available afterwards to re-watch! I also plan on uploading my videos to YouTube since they don't stay on Twitch forever. I'll also add to the bottom of this post as we make it though the series so everything is nicely grouped together.</p>


This is where you can find all the details for my accessible React component live coding series.

Build an Accessible React Component&mdash;The Live Series

<p>I'll admit: making web apps accessible can be challenging, especially when you're new to it. It requires thinking from the perspective of disabled users and having some knowledge about the assistive tools they use, such as screen readers. You may also feel overwhelmed when you start reading documentation. There is a ton of information out there! So I'm going to share with you my favorite resource that I use when making accessible custom components and I'll also tell you about how I like to use it.</p>
<h1>W3C's WAI-ARIA Authoring Practices</h1>
<p>If you don't already know, W3C (The World Wide Web Consortium) is &quot;an international community that develops open standards to ensure the long-term growth of the Web.&quot; They have an initiative called The Web Accessibility Initiative (WAI), which provides &quot;strategies, standards, and resources&quot; for making the web more accessible to disabled people. There is a wealth of information here and it's easy to get overwhelmed by it. That's why I recommend starting with the <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> when you're ready to start looking at some technical documentation on accessibility.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/n12gavis3ns73vbhfx7i.png" alt="Screenshot of the WAI-ARIA Authoring Practices webpage." /></p>
<h2>What you'll find</h2>
<p>There are 9 sections. I use the third section the most.</p>
<ul>
<li>
<p><strong>Introduction:</strong> Talks about the purpose of the document and what will be discussed throughout.</p>
</li>
<li>
<p><strong>Read Me First:</strong> Covers a couple of ARIA principles, the importance of testing assistive technologies, and warns that the document doesn't cover mobile and touch support.</p>
</li>
<li>
<p><strong>Design Patterns and Widgets:</strong> Shows how to make accessible &quot;widgets&quot; (or components) using WAI-ARIA roles, states, and properties and has requirements for implementing keyboard support. There are 27 examples!</p>
</li>
<li>
<p><strong>Landmark Regions:</strong> Introduces HTML sectioning elements and ARIA landmark roles and explains how they help assistive technology users understand how a web page is laid out.</p>
</li>
<li>
<p><strong>Providing Accessible Names and Descriptions:</strong> Talks about the purpose of accessible names and descriptions, when to use them, how browsers assemble them, and rules for making them.</p>
</li>
<li>
<p><strong>Developing a Keyboard Interface:</strong> Covers the principles of coding keyboard support and why it's important.</p>
</li>
<li>
<p><strong>Grid and Table Properties:</strong> Talks about the ARIA properties that help make grids and tables accessible and how to use them.</p>
</li>
<li>
<p><strong>Intentionally Hiding Semantics with the <code>presentation</code> Role:</strong> Discusses what the <code>presentation</code> role does and when it's commonly used.</p>
</li>
<li>
<p><strong>Roles That Automatically Hide Semantics by Making Their Descendants Presentational:</strong> Lists the roles/elements that make all of their children have the previously discussed <code>presentation</code> role.</p>
</li>
</ul>
<h2>How I use it</h2>
<p>Section 3, &quot;Design Patterns and Widgets&quot;, is my favorite and the one I read the most. There are so many widgets discussed! Let's look at <a href="https://www.w3.org/TR/wai-aria-practices/#button">the Button subsection</a> as an example.</p>
<p>Each section starts by explaining what the widget does and what it's used for. If there are multiple types of the widget, it'll briefly cover those too. There are 2 additional types of buttons supported by WAI-ARIA: toggle and menu. I use this section to fully understand the functionality of a widget and also to learn any new terminology I should be using when documenting my own components.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/3rhs8nantuv03eua50ia.png" alt="Screenshot of the first section of the Button widget." /></p>
<p>Sometimes there will be NOTE sections that discuss caveats or additional resources. The one for this widget discusses cases when links need to look like buttons or when buttons need to function like links.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/zlp5ppilfkehbqpliufj.png" alt="Screenshot of the note for the Button widget." /></p>
<p>Next up, there will be a list of links to examples. <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">The Button widget examples</a> show how to correctly make a <code>div</code> element a button and a toggle button created with an <code>a</code> element. I like to read the code examples then use them as a reference when I make a rough initial version of the component in a code sandbox. Making an isolated practice copy prevents any unexpected behavior caused by my codebase and I can do manual testing with assistive technologies with ease.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/tynhp8eh33i2laie7rmb.png" alt="Screenshot of the examples section for the Button widget." /></p>
<p>After that, there's a section about keyboard interaction. For the Button widget, it explains that <code>Space</code> and <code>Enter</code> activate the button and then goes into deep detail about what happens to focus based on the action performed by the button. The format of this section usually makes it very straightforward to come up with a todo list of what I need to code to make a component accessible to keyboard interaction.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/r39znxw9eupjd1apt3nd.png" alt="Screenshot of the keyboard interaction section for the Button widget." /></p>
<p>Finally, you'll come across a section about the WAI-ARIA roles, states, and properties associated with the component. Like the previous section, it's formatted in such a way that lets me test the effects of each role, state, or property one-by-one in my isolated code sandbox. There are also links to the main documentation for each which I use to better understand their purpose.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/i/x5ntbkr93815gs4y3m3p.png" alt="Screenshot of the WAI-ARIA roles, states, and properties section for the Button widget." /></p>
<h2>Good luck, and have fun!</h2>
<p>When I am approaching something new and potentially daunting, I always try to keep the mentality that the experience will be a fun challenge. It's totally okay if you don't get it right on your first try! That's how coding works in general. It takes practice and patience.</p>
<p>If you ever want to chat with me about accessibility, send me a DM or tweet on Twitter! I love a good accessibility conversation. :)</p>


Want to make your components accessible but not sure about the technical feasibility or how to get started? Take a look at the WAI-ARIA Authoring Practices by W3C!

My Favorite Resource for Making Accessible Custom Components

<p>Next time you walk around some city streets, take a look around.</p>
<p>What's the sidewalk like? If it's made out of bricks, does it look very smooth or are probably half of them loose and uneven? When you come to an intersection, does the ramp to the crosswalk smoothly meet the street? And how about the street between sidewalks? Are there potholes or is the road nicely paved?</p>
<p>If there are stores and restaurants, are they at the ground level or is there a step or two or more to get inside? Are there buttons to activate the doors? When you're in the seating area, are there any booths or extra sets of tables that have steps to get to? If the restaurant has a patio, how much space is there outside of the railings surrounding that area? Is it large enough for a wheelchair going in one direction and a person walking in the other?</p>
<p>These are some of the thoughts that have gone through my head over the past few days. It's actually pretty appalling, the quality of some of our sidewalks and crosswalks. These are just the visible issues most people could see if they'd just stop and look.</p>
<p>Can you imagine what accessibility issues exist that aren't as visible?</p>


Why isn't our world more accessible?

<p>Did you know you can add captions to <code>&lt;video&gt;</code> elements with a little HTML and a VTT file? I didn't know until today! It's really easy to do (so long as you format your VTT file correctly... shout out to <a href="https://twitter.com/CallMeWuz">Conlin Durbin</a> for helping me find that error 😄). At a minimum, you need 3 files:</p>
<ol>
<li>Video, probably <code>.mp4</code></li>
<li>WebVTT, where the captions are</li>
<li>HTML</li>
</ol>
<h2>Let's get started</h2>
<h3>The HTML</h3>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/rpz0edrfb6otzqfuxlnz.png" alt="" /></p>
<p>This is the easiest step. You only need 3 elements. On the <code>&lt;video&gt;</code> element, make you sure you include the <a href="https://www.w3schools.com/tags/att_video_controls.asp"><code>controls</code></a> attribute. This will allow users to toggle captions or switch to a different langue, if applicable.</p>
<p>The <code>&lt;source&gt;</code> element should be your video. Specify its <code>src</code> and <code>type</code> attributes. The <code>&lt;track&gt;</code> element is for the <code>.vtt</code> file you'll create in the next step. There are multiple attributes to include here.</p>
<ul>
<li><code>kind</code> defaults to &quot;subtitles&quot;, but if you specify it you must also include the <code>srclang</code> attribute.</li>
<li><code>label</code> is the title of the track and will be displayed in the video controls menu where captions can be toggled.</li>
<li><code>default</code> is included to set a track as enabled.</li>
</ul>
<h3>WebVTT</h3>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/1fzurld4xwpnzy3x5nsw.png" alt="" /></p>
<p>The format for this file is very specific. You must include &quot;WEBVTT&quot; at the top of the file, and then there are sections with white space in between which are called &quot;cues&quot;. In the example file I've attached above, the first line of each cue is called the identifier. The next line specifies the timing for the cue. Finally, we have the cue payload. This is where you include the content for each caption. You can do <em>some</em> styling here.</p>
<h3>The final product</h3>
<p>The cover image has a quick preview of the captions I added to a video of a puppy playing on a sandy beach. Here's a GIF of the whole thing. You can also see my little project live <a href="https://ashleemboyer.github.io/video-captions/">here</a>.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/0c29s1oopy8xoutfow4b.gif" alt="" /></p>
<h3>More resources</h3>
<p>I wasn't able to find a ton of examples out there, but there are plenty of resources that get into the differences between subtitles and captions, styling abilities, and additional ways to accomplish the same thing as above but with different transcript formats or third-party libraries.</p>
<ul>
<li><a href="https://a11yproject.com/posts/using-caption-services-with-html5-video/">&quot;How-to: Using captions with HTML's video element&quot;</a> (The A11Y Project)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">&quot;Web Video Text Tracks Format (WebVTT)&quot;</a> (MDN)</li>
<li><a href="https://www.w3schools.com/tags/tag_track.asp">&quot;HTML <code>&lt;track&gt;</code> Tag&quot;</a> (w3schools)</li>
</ul>
<p>If you have experience with captions that you'd like to share, or know of even more helpful resources, please do so in the comments! 😊</p>


Adding captions to an HTML video isn't hard at all. You can get a mini project together in just a few minutes.

Get Started with HTML Video Captions

<p>Not that I feel the need to explain myself, but I want to share that I'm hard-of-hearing. It's genetic and just about everyone on my family's maternal side suffers significant hearing loss. I've had hearing aids since I was 10 years old, and as I've grown up, it becomes more and more clear to me how little people understand about the importance of accessibility.</p>
<p>This post is a bit of a rant since all of the below have been said to me personally (all in one conversation, actually 🤦🏼‍♀️). These are all the things I wish I could've said at the time, but you don't always get to speak out when you're like me. It's exhausting, and I'm writing this post as an ask to <strong>please be more aware of the things you say and how you say them</strong>. You might mean well, but your words can still be incredibly hurtful.</p>
<h2>&quot;It's low priority.&quot;</h2>
<p>That's pretty clear at this point, but why is that? What's your excuse? Is it too hard? Do you not want to spend the time learning about it? Are there not enough of us that exist for you to be concerned about our needs?</p>
<h2>&quot;We need to beat competitors to market.&quot;</h2>
<p>Based on my experience in this industry, I wonder if <em>they</em> are even concerned about accessibility. Consumers value companies that value them. You should be trying to stand out beyond having a large number of software features.</p>
<h2>&quot;I get it, but...&quot;</h2>
<p>No, you obviously don't. If you did, you wouldn't be saying any of these things to my face. You either think you're super woke <em>or</em> you completely forgot that you're talking to a disabled person. I'm kind of afraid of how you talk about disabled people when you're away from us.</p>
<h2>&quot;There's no point if no one is using it.&quot;</h2>
<p>So, when people start using it, how do you plan on figuring out how many of them need a more accessible tool if we can't actually use it to tell you? We don't have the time for you to play catch up. We'll just go somewhere else.</p>


I'm a disabled woman and have a few thoughts about how able-bodied people speak to people like me about accessibility.

Posts Related to the "a11y" Tag

She's written 9 posts

What the heck is "web a11y"?

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

Three Starting Points for Making Accessible Digital Content

Build an Accessible Breadcrumb Component—Part 1 in the Accessible React Component Series

Build an Accessible React Component—The Live Series

My Favorite Resource for Making Accessible Custom Components

Why isn't our world more accessible?

Get Started with HTML Video Captions

Things You Shouldn't Say to a Disabled Person About Why Your App Isn't Accessible