Forem: Ashley Smith

Accessibility Breakdown | Focusable Indicators

Ashley Smith — Wed, 05 Jun 2024 17:00:00 +0000

Todays mini series of things you can do right now focuses on enhancing the accessibility (a11y) of focusable indicators in your application. Let's get into it:

Why it Matters:

Accessibility Impact: Clear focus indicators are crucial for users with disabilities to navigate effectively, ensuring they can identify interactive elements.
User Experience: Proper focus indicators prevent confusion and empower users to interact with your application confidently.

Quick Check:

Manual Scan: Quickly review your application for interactive elements that may lack visible focus indicators using tab navigation. You may use Enter or Spacebar to activate buttons or links.
Automated Tools: Use accessibility testing tools such as Axe or WAVE to identify elements with missing or inadequate focus indicators.
Screen Reader: Sometimes a screen reader might use different keys to activate focusable elements so ensure you check using both with and without a screen reader.

Quick Fixes:

Enhance Focus Styles: Ensure interactive elements have clear and distinct focus styles, making them visible and easy to identify. Typically this involves adding a solid color outline or changing the background color of the element.
- Avoid disabling the default focus ring provided by browsers unless you replace it with an equally visible alternative. This is particularly important for keyboard users.
- Ensure that all focusable elements have consistent focus styles across the application to maintain a uniform user experience
- For low vision or color-blind users ensure a highly visible focus indicator, such as a thick outline or contrasting color is used so there is no confusion.
Focus Management: Implement proper focus management to ensure that focus moves logically through focusable elements, enhancing keyboard navigation. An example would be when a user clicks a button that opens a modal ensuring that the focus moves into the modal dialog and on close of the modal moves back to the button.

const openModalButton = document.getElementById('openModalButton');
const closeModalButton = document.getElementById('closeModalButton');
const modal = document.getElementById('modal');

openModalButton.addEventListener('click', () => {
    modal.style.display = 'block';
    modal.setAttribute('tabindex', '-1');
    modal.focus();
});

closeModalButton.addEventListener('click', () => {
    modal.style.display = 'none';
    openModalButton.focus();
});

Testing

Thoroughly test your application post-fix, using both keyboard navigation and assistive technologies like screen readers, to ensure focus indicators are visible and functional.
Consider writing automated tests with Axe to automatically check for focus indicators as a custom rule.

const customRule = `
            axe.configure({
                checks: [
                    {
                        id: 'focus-visible',
                        evaluate: function(node) {
                            const style = window.getComputedStyle(node);
                            return style.outlineStyle !== 'none' || style.boxShadow !== 'none';
                        },
                        metadata: {
                            impact: 'critical',
                            messages: {
                                fail: 'Focusable elements should have visible focus styles.'
                            }
                        }
                    }
                ],
                rules: [
                    {
                        id: 'focus-indicator',
                        selector: ':focus',
                        enabled: true,
                        any: ['focus-visible'],
                        tags: ['focus']
                    }
                ]
            });
        `;

By following these quick steps, you can quickly enhance the accessibility of focusable indicators in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today!🌟

Helpful links
Free A11y tools:

A11y Info:

Accessibility Breakdown | Navigating Landmarks

Ashley Smith — Wed, 29 May 2024 17:00:00 +0000

Todays mini series of things you can do right now, is on navigating landmark accessibility. Landmarks are often overlooked but are crucial for inclusive browsing. We want everyone to navigate the digital landscape seamlessly. Let's get into it:

Why it Matters:

Accessibility Impact: For individuals with disabilities, landmarks offer vital orientation within a webpage, empowering them to navigate independently and access content efficiently.
User Experience: Landmarks provide essential cues, guiding users through webpage structures and improving navigation efficiency. Consider landmarks as road signs on a highway. Without them, one would struggle to navigate and reach their destinations efficiently.

Quick Check:

Manual Inspection: Scan your web pages for semantic HTML elements such as <header>, <footer>, <nav>, <main>, <aside>, and <section> to identify existing landmarks.
- Does all content exist inside a landmark? Look for supporting ARIA roles if landmarks aren't there.
- Avoid duplicate landmarks with the same role in the same context. For example, having two tags on the same page can confuse screen reader users.
- For pages with dynamic content (e.g., single-page applications), ensure that landmarks are updated dynamically as the content changes. This helps screen readers keep up with the context shifts.
- You can use browser developer tools like Chrome DevTools to inspect the accessibility tree.
- You can use also use Web Developer to help point these out.

Web Developer tools

Automated Tools: Utilize accessibility evaluation tools like Lighthouse or Axe or WAVE to validate the presence and proper usage of landmarks automatically. You might see an error like this:

Screen Reader Testing: Test your web pages using a screen reader to ensure that landmarks are conveyed effectively to users who rely on auditory feedback. Can you understand each section of the page?

Quick Fixes:

Semantic Markup: Ensure accurate use of semantic HTML elements to define landmarks. Utilize appropriate tags to delineate content sections. For example:
- <header>: Contains introductory content, such as a website's title and navigation links.
- <main>: Contains the main content of the webpage.
- <section>: Groups related content together within the main section.
- <footer>: Contains footer information, such as copyright details.

Use what works for you.

Maintain consistency in landmark usage across different pages of the site. This provides a predictable experience for users.
ARIA Landmarks: Supplement semantic HTML with ARIA landmarks for enhanced accessibility. Utilize roles like role="banner", role="navigation", role="main", and role="complementary" to provide additional context.
Use aria-label or aria-labelledby attributes to provide descriptive labels for landmarks when necessary

<nav aria-label="Primary Navigation">
  ...
</nav>

Testing:

Ensure that focus management practices (e.g., tabindex, focus trapping) do not interfere with landmark navigation.
Test landmark functionality across different browsers and devices to ensure consistent behavior
Consider conducting user testing sessions with individuals who might use assistive technologies, or someone who isn't familiar with your app to gather feedback on the accessibility of landmarks and implement necessary adjustments that make sense.

By following these quick steps, you can quickly enhance the accessibility of how you utilize landmarks in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today!🌟

Helpful Links
Free A11y tools:

A11y Info:

Accessibility Breakdown | Dynamic Content

Ashley Smith — Wed, 22 May 2024 16:00:00 +0000

Todays mini series of things you can do right now covers checking and fixing dynamic content to make them more accessible. Let's get into it:

Why it Matters:

Accessibility Impact: Dynamic content alerts play a vital role in ensuring that users with disabilities, particularly those using assistive technologies like screen readers, are aware of important changes or updates on a web page.
User Experience: These alerts improve user engagement by providing timely information, enhancing the overall user experience.

Quick Check:

Manual Inspection: Begin by manually reviewing your application for dynamic content alerts. Look for notifications, messages, or updates that appear or change dynamically. The example below shows an alert that dynamically appears after a user clicks a link.

Automated Testing: Utilize accessibility testing tools such as Axe or WAVE to identify any dynamic content alerts that may be missing accessible labels or attributes.
Screen Reader Testing: Test your application using a screen reader to experience how dynamic content alerts are conveyed to users who rely on auditory feedback. If you close your eyes and you don't understand there was a content change or alert you'll need to add a fix.

Quick Fixes:

Use ARIA Roles and Attributes: Ensure dynamic content alerts are properly marked up using Accessible Rich Internet Applications (ARIA) roles and attributes. For example, use role="alert" on error messages or when a form is submitted to convey urgent notifications indicating to screen readers that it is important and should be announced immediately.

<!-- Dynamic content alert without proper ARIA markup -->
<div class="alert">
  Error: Please enter a valid email address.
</div>

<!-- Dynamic content alert with proper ARIA markup -->
<div class="alert" role="alert" aria-live="assertive">
  Error: Please enter a valid email address.
</div>

Focus Management: Implement focus management to ensure that screen readers announce newly appeared content to users and focus is appropriately set to the updated element. This can be achieved by adding a tabindex attribute with a value of -1 to make the element focusable, and then calling something like a focus() method on it. This simple step ensures that screen reader users are alerted to the presence of new content.
Keyboard Accessibility: Ensure users can dismiss or interact with dynamic alerts using keyboard controls alone, without relying on mouse input if needed.

Testing:

Thoroughly test your application post-fix to ensure all dynamic content alerts are properly announced, understood, and accessible to users.
Consider writing an Axe test using aria rules to ensure the proper attributes exist.

describe('Accessibility tests', () => {
  test('Dynamic content alerts have proper ARIA attributes', async () => {
    const { container } = render(<YourComponentWithDynamicAlerts />); // Replace with your component
    const axeConfig = {
      rules: {
        'aria-roles': { enabled: true },
        'aria-allowed-attr': { enabled: true }
      }
    };
    const results = await axe(container, axeConfig);
    expect(results).toHaveNoViolations();
  });
});

By following these quick steps, you can quickly enhance the accessibility of dynamic content in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today! 🌟

Helpful links
Free A11y tools:

A11y Info:

Accessibility Breakdown | External Links

Ashley Smith — Wed, 15 May 2024 16:00:00 +0000

Todays mini series of things you can do right now cover the essentials of checking and enhancing the accessibility (a11y) of external links in your application. As a rule of thumb, it's best not to use them, but sometimes we just can't avoid them! So let's get into it:

Why it Matters:

Accessibility Impact: Clear indications of links opening in new tabs or leading to external websites are vital for users with disabilities to navigate seamlessly.
User Experience: Prevents confusion and ensures users maintain control over their browsing experience.

Quick Check:

Manual Scan: Scan your application for links that may open in new tabs or lead to external sites. Look for links that use target="_blank" inside the anchor tag which indicates opening in a new tab. ```react

Link Text


- **Automated Tools**: Use accessibility testing tools like [Axe](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero) or [WAVE](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) for detailed reports on accessibility issues, including missing link indicators.

- **Browser Extensions**: Install extensions like [Web Developer](https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) to show you all your links, including those lacking proper indications. 

Using outline external link tool:
![Using outline external link tool on web developer extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8zduqh2dg6barfesats.png)


Using link details:
![Using link details tool on web developer extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z66fxsq8pwhou4usulfe.png)



---

## Quick Fixes:

- **Text Indicators**: Provide visually hidden text (e.g., `<span class="sr-only">(opens in a new tab)</span>`) to indicate external links. The span will  be hidden except to a screen reader.

```react


<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external-link">
    Visit Example Website
    <span class="sr-only">(opens in a new tab)</span>
  </a>

Visual Icon Indicators: Include an icon with an appropriate alt attribute to indicate the behavior.



<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external-link" aria-label="Visit Example Website (opens in a new tab)">
    Visit Example Website <i class="fas fa-external-link-alt" aria-hidden="true"></i>
</a>

Testing:

Thoroughly test your application post-fix by using a screen reader to ensure all external links are properly indicated and accessible.
Consider writing an Axe test to ensure all external links include a hidden element, indicating they open in a new tab or similar idea.



axe.run(dom.window.document, {
  rules: [{
    id: 'external-link-span',
    selector: 'a[target="_blank"][rel~="noopener"][rel~="noreferrer"]',
    check: function (element, _context) {
      const spanElement = element.querySelector('span.sr-only');
      return {
        result: spanElement !== null,
        message: 'External link should have a <span> indicating it opens in a new tab'
      };
    }
  }]
}

By following these quick steps, you can quickly enhance the accessibility of external links in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today! 🌟

Helpful links
Free A11y tools:

A11y Info:

Accessibility Breakdown

Ashley Smith — Wed, 08 May 2024 17:00:00 +0000

Hey there, welcome to my mini-series all about making the digital world a friendlier and more accessible place for everyone! We're diving deep into the world of digital accessibility (a11y), uncovering the things that often get overlooked. From making sure everyone can easily use your website or app to creating a space where everyone feels included, I'm on a mission to make the internet a better place for all!

Each of the coming mini-series posts are going to break down one thing you can quickly take action on to help improve your overall accessibility. Lets do a brief intro first!

Why is Accessibility Important?

Inclusivity: Accessibility ensures that all individuals, regardless of their abilities or disabilities, can access and interact with your content, welcoming a wider audience. Remember, we all experience the digital world differently, and empathy reminds us to consider the diverse needs and experiences of our users.

Compliance: Following accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) ensures that you meet legal requirements and industry standards. Compliance not only mitigates the risk of potential lawsuits but also demonstrates your commitment to ethical and responsible digital practices.

Enhanced User Experience: Accessibility features, such as alternative text for images, keyboard navigation, and clear headings, not only benefit users with disabilities but also improve the overall user experience for all visitors. Implementing these features can make your site easier to navigate, understand, and engage with, leading to higher user satisfaction and retention. Let's put ourselves in the shoes of our users, understanding and addressing their diverse needs.

SEO Benefits: Many accessibility practices align with search engine optimization (SEO) best practices. For example, providing descriptive alt text for images not only helps screen readers interpret content but also improves image search optimization. By optimizing your site for accessibility, you can potentially improve your search engine rankings and increase organic traffic.

Brand Reputation: Demonstrating a commitment to accessibility reflects positively on your brand's values and reputation. By prioritizing accessibility, you show that you care about all your users and are dedicated to providing an inclusive online environment. This can enhance trust and loyalty among your audience, ultimately contributing to the long-term success of your application. Let's cultivate empathy as a core value of our brand, showing empathy in action through our commitment to accessibility. Accessibility isn't just a checkbox for compliance; it's about creating a more inclusive and welcoming online environment for everyone.

Now that we have an understanding about why A11y is so important come back to this mini-series each week to learn something new! 🌟

Helpful links
Free A11y tools:

A11y Info:

Breaking the Mold: Rethinking Daily Stand-Ups

Ashley Smith — Thu, 05 Oct 2023 15:57:20 +0000

If you have ever worked on a Lean or Agile development team, (and possibly even if you haven't) you have probably participated in some type of "stand up" daily meeting. These meetings are about 15 minutes each day and typically are for everyone on the team to go over what they worked on the day before, what they are working on that day, and if they have anything that's blocking them from getting their work done. While we have all heard how important these are, are they actually providing value for your team?

I was part of a small team, just four of us, diligently following the daily stand-up ritual. Our workdays were a whirlwind of Slack messages and collaborative efforts. However, I couldn't help but feel a sense of déjà vu during our stand-up meetings. It was like rehearsing lines for a play I already knew.

The issue was, we were in constant communication. We discussed blockers, shared insights, and reviewed each other's progress throughout the day. We had just spent the previous day hashing out our weekly tasks, so I had a pretty good grasp of my teammates' projects. It dawned on me that I was interrupting my own important work to attend a meeting that felt increasingly like a time sink.

Ever found yourself in a similar situation? Where you're racing against the clock, and those daily meetings start to feel like a detour from the real work?

If your stand-ups feel monotonous and valueless, consider removing them.

What???

I know, I know how could I? That goes against everything you have ever been taught.

There are several factors to consider in making this decision. Let's think about the Lean approach for a minute. Lean Development in software is about delivering value efficiently by eliminating waste and optimizing processes. It's a method focused on rapid experimentation, validated learning, and iterative product development to reduce risk and create successful businesses. Some key components are:

Minimize Waste
Continuous Improvement
Adaptability

Where's the Value?

So where's the value in these meetings? Of course we know it's important to stay aligned as a team but I want you to really think about your teams processes and how you keep track of work. Are there other meetings in which you already are aligning with your teammates? Does your team communicate consistently throughout the day over a chat system like slack? This meeting could be considered 'waste' if all you are doing is repetitive listing off your work and moving on with your day.

What is Waste?

Waste can be considered as investing time without gaining value. To determine if your stand-up is waste to your team, we can practice continuous improvement.

Continuous Improvement

As a team you should be participating in the ongoing process of identifying, implementing, and iterating on enhancements to your processes, and practices. These incremental adjustments help to achieve higher quality and efficiency over time.

In relation to unnecessary meetings, this means recognizing and addressing the waste generated by these meetings. Teams should regularly assess their meeting practices, aiming to reduce or eliminate meetings that don't add value. Gather feedback from everyone to see if they felt the meeting was valuable or "it should have been an email". This leads us to adaptability.

How to Adapt

It's important for your team to stay flexible, and open to adjustments. An adaptable approach allows teams to pivot and in turn leading to improved outcomes and a more responsive development process with value.

Does this always mean elimination? Definitely not! Making a decision to switch it up and re-assess is okay! Here are some alternative ideas when you recognize stand-ups are no longer providing value:

Using a dedicated slack thread or channel each day to log what your YTB (yesterday, today, blockers).
Consider leaving the meeting slot on the calendar as an open meeting where the team can be prepared for joining if someone on the team wants to discuss any blockers, but able to be skipped if there is nothing to discuss.
Logging status updates within project management tools or a location everyone can easily find.
Using Kanban Boards or other visual project management tools that are updated real time
Weekly or sprint reviews that are more comprehensive and reflect on the outcomes
Instead of standup, use the time for 'show and tell'

Remember, your workspace and work processes are constantly evolving, just like technology! If you decide to eliminate daily stand-ups, prioritize collaboration and communication to ensure success. Don't hesitate to experiment; you can always reintroduce them if needed!"

Let me hear from you!

I would love to hear your thoughts and opinions on this idea! Has your team tried any of these options? Were there any other solutions that worked for your team? Let me know in the comments!

If you want to learn more about Lean development check out the books below.

References:

The Lean Startup by Eric Ries
Implementing Lean Software Development: From Concept to Cash by Mary and Tom Poppendieck

How ChatGPT can help your code be accessible

Ashley Smith — Fri, 27 Jan 2023 17:59:13 +0000

Sometimes accessibility (also known as a11y) can be a bit of a puzzle.

Whether you're a new developer still learning the ropes or a seasoned dev properly labeling your code, there's a chance you still rely on Google to help you out. For instance, you may know you need to add aria-* attributes somewhere, but you don't want to overdo it because the screen-reader may get confused. You want to make sure you touch on all types of accessibility like sighted individuals, hearing impaired as well as anyone using screen-readers. Well, look no further. In this post, we'll talk about a popular tool-ChatGPT- and how it can help you piece together the accessibility puzzle.

Whats ChatGPT?

ChatGPT is a computer program that can understand and respond to human language. You can think of it like a robot that can talk to you and help you find information.

How?

We’ve all heard of the amazing things ChatGPT can do for us, so why not use it to our advantage as developers!? One of the best skills a developer can have is learning how to ask the right questions. This goes for asking Google, stack-overflow, or your own teammates. You’ll need this skill for ChatGPT to work for you AND with you.

Let me walk you through an example of using ChatGPT, and how it can help us work towards accessibility.

Say we want to make a simple button accessible. You can always just ask ChatGPT how to do that.

How can I make a simple HTML button accessible?

Asking this question will give you some pretty good information about the basic accessibility of a button, but it may not give you exactly what you need. When asking ChatGPT to do something, you need to be really specific. This can mean breaking your question down into multiple questions that are based off each other or the previous answer.

Some good things to think about are:

What coding language are you using?
Are you using any frameworks?
What type of a11y? (i.e. visually impaired, hearing impaired, screen-readers etc.)
What level of a11y? WCAG 2.1 A (lowest), AA (mid-range), and AAA (highest)
Do you want any specific verbiage or colors to be used?

The more specific you are, the better the output will be.

Lets practice!

In the example above, I asked ChatGPT to write the code for a green “Read More” button and provided it the language, color, framework, and the type of accessibility I’m looking for. If you want your components or code written in a specific way, you can even give it some starter code to work with like below.

I suggest going this route so you're still writing your own code as things might get more complex.

Here's what ChatGPT came up with:

import React from 'react';

const App = () => {
  return (
    <div>
      <button 
        type="button"
        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:border-green-800 focus:shadow-outline"
        aria-label="Read More"
        tabIndex={0}
      >
        Read More
      </button>
    </div>
  );
};

export default App;

As you can see below, it even goes and explains what each piece of code it added means, and how it relates to accessibility.

Don't forget...

While this is a great start and a great place to learn, as always it's important to do your own accessibility testing with many different tools (see links below) to ensure that it's fully accessible.

Take what ChatGPT says as advice and make sure to double-check how things get implemented.

*Always always always * proofread! Check that the React code is written properly and the Tailwind CSS properties make sense. Remember, ChatGPT is a tool to learn from and not a tool to use as a crutch!

I hope this helps you both learn how to use a new technology, as well as solve that accessibility puzzle a little easier!

If you want to learn more about accessibility(a11y), or Tailwind CSS and A11y, check out my blog post about that here

Helpful links
Free A11y tools:

A11y Info:

Imposter Syndrome as a Developer (a podcast)

Ashley Smith — Thu, 01 Dec 2022 17:21:25 +0000

As a developer have you ever felt like you aren't good enough even though you have been successful, or maybe you feel like you need to work harder to keep up, or maybe you feel like you just don't belong? Well, you're not alone! Learn what imposter syndrome is all about - even the good parts! (yes I said there are good parts). Join Ashley in her first podcast as she talks about what she has learned. You'll also hear from Software Engineer Marina and her experiences with imposter syndrome.

Let me know in the comments what your thoughts are and if you have ever had similar experiences!

Information on Basima Tewfik
Helpful tips to combat imposter syndrome as a developer

Is Tailwind CSS Accessible?

Ashley Smith — Thu, 27 Oct 2022 15:00:29 +0000

So, you want to use Tailwind CSS as the framework for your application - but is it Accessible? A11y (accessibility) is an essential way to connect ALL users to your site. Both people with and without disabilities can benefit from A11y. It will also widen the net of users. Not to mention a fully accessible site will help improve SEO as well.

If you are used to frameworks like Bootstrap, Foundation or Material Design with built in components and A11y elements, you might assume Tailwind is similar. At first glance in the documentation, it can very easily seem that way but Tailwind is much more flexible!

What is Tailwind CSS?

Tailwind is a utility-first framework that uses a pre-defined design system using classes. You can easily create custom components right in your HTML.

Some benefits are:

Use less custom CSS overall.
Making any changes to styles is much safer across large applications.
More freedom with how your site looks compared to other frameworks that have pre styled components.

With this flexibility there are some drawbacks when thinking of A11y. One of the key things to note is that Tailwind is not fully accessible in the same way these other frameworks are.

Lets talk about what Tailwind has to offer

Two A11y classes Tailwind provides for us are ‘sr-only’ and ‘not-sr-only’. These classes tell the screen reader to either read the element and visually ignore it (‘sr-only’) or show the element both visually and to the screen reader (‘not-sr-only’).

‘sr-only’ can be added as a class to hide the element visually but still get read by a screen reader. This is really helpful in situations where you need to give instructions to people who cannot access the site visually.

For example, if you have a design with a search bar that has no label or directions in order to make it accessible to a screen reader, you will want to add a hidden label that uses the class‘sr-only’ to clue the user in on what it’s for.



<input type="text" id="search" name="search">
<label for="search" class="sr-only"></label>

‘not-sr-only’ will un-hide the element to the user.

Another example where you can use these is on a “Skip to content” or “Skip to Main” button that only visually shows when tabbed into it and otherwise visually hidden. The class ‘not-sr-only’ needs to be added once tabbed into the element to make it visually seen. An easy way to do this is conditionally to a different state which Tailwind lets you do. It might look something like this:



<a href="#main" class="sr-only focus:not-sr-only">Skip to Main Content</a>

New Tailwind CSS A11y additions

As of Tailwind CSS v3.2 Beta 2 there are new variants for aria-* attributes. These can be used to conditionally style things based on if the aria attribute state is true.

Wait - what are ARIA Attributes?

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes to make websites more accessible to people with disabilities. ARIA attributes can bridge the gap some native HTML elements may lack.

The addition of these variants for aria-* attributes is a huge improvement and a big step forward to make Tailwind accessible.

In the example here, btn2 is using aria-pressed. This lets the user know that there is an element, a button, that has not been pressed but has the opportunity to be pressed. We are using the variant aria-pressed:ring-2. This means that when the button is pressed it will add the Tailwind CSS class ring-2. This will add a border around the button. Without using this Tailwind variant like in btn1, you might have to do something with an event listener and add the class using JavaScript.



<button id="btn1" aria-pressed="false"></button>

<button id="btn2" aria-pressed="false" aria-pressed:ring-2></button>

You can even create custom aria variants yourself within the tailwind.config.js

Check out the Announcements for the complete list of new ARIA additions Tailwind CSS will offer.

So whats missing from Tailwind?

Other frameworks you may have used in the past might contain designed components that rely on event listeners —such as modal dialogs, dropdown menus etc. to work for touch, mouse, and keyboard users out of the box. Since Tailwind CSS is so customizable, as a developer you need make sure you are adding the necessary things to your components with the provided tools Tailwind gives you, or on your own with JavaScript.

While these new additions really take care of a lot, Tailwind CSS still takes manual work to make your website fully accessible.

It's important to do the work as a developer to really understand how someone with a disability may use your site. Test out your site using a screen reader, or try browsing a site without the mouse. Continue to educate yourself on the latest A11y rules. A11y can sometimes be a puzzle to figure out but hopefully the tips here can jump start the process for you when using Tailwind!

Free A11y tools:

A11y Info:

Tailwind CSS: