Why use TailwindCSS & Aria

Lochy — Thu, 15 Dec 2022 00:00:32 +0000

Introduction

Assumed knowledge.

HTML/CSS basics
TailwindCSS basics

Why use TailwindCSS & Aria

Maintaining clean and easily understandable code that still gets the job done can often be a difficult task. With minimal rules and a wide variety of ways of implement HTML and CSS it can often be difficult to strike a balance between function and form. My aim is to provide you with another tool to find balance between these two important aspects of front end development.

Firstly lets quickly explain what we mean by Aria.

Aria is an acronym for Accessible Rich Internet Applications. Its main function is to provide extra information about elements on the webpage. This extra information can be used by accessibility tools to improve user experiences.
Reference: MDN Web Docs - Aria

Developers can also access these Aria labels and use them to control aspects of the website.

This video is a 1000% funnier and explains the reason for Aria in a much better way. What Is ARIA Even For?

Code Examples

We will implement a simple example of a button that can be toggled on and off. We will create this in a few different ways to explain more about aria labels.

Example 1 (Vanilla CSS)

<!-- page.html -->

<!-- Click to toggle the button -->
<button class="toggle_button">
  Click Me!
</button>

/* styles.css */

.toggle_button {
  background: gray;
}

// changed the background color when button is pressed
.toggle_button.toggle_button--pressed {
  background: darkgrey;
}

We can use simple JS to toggle the .toggle_button--pressed class. I wont explain how to use JS to toggle this. Please check this article for more information. w3Schools event listeners

Screen readers can not tell from the HTML what state this button is in. Is it clicked or not clicked. The only way to tell is to either visually view the button or check the css classes. Not good for anyone using a screen reader.

Example 2 (Vanilla CSS with Aria)

First we will add the Aria property to this button for better HTML semantics. We will again use Javascript to control this aria-pressed state. We can also now use this aria information in our css styles.

<!-- page.html -->

<!-- Click to toggle the button -->
<button class="toggle_button" aria-pressed="true">
  Click Me!
</button>

/* styles.css */

.toggle_button {
  background: gray;
}

.toggle_button[aria-pressed]="true" {
  background: darkgray;
}

We managed to improve accessibility and also reduced the need to think of extra css class names to handle stateful stylistic changes.

Example 3 (CSS With TailwindCSS & React)

In this example we will use TailwindCSS and react to replicate the same results as previous example.

The TailwindCSS team has implemented Aria classed directly into the framework allowing use to direct access the more common aria labels. TailwindCSS Aria

const [isPressed, setIsPressed] = useState(false);

return (
  <button
    className="bg-gray-500 aria-pressed:bg-gray-800"
    onClick={()=>{setIsPressed(!isPressed)}} 
    aria-pressed={isPressed}
  >
    Click Me!
  </button>
)

Summary

Using TailwindCSS in my option leads to cleaner code. With no need to create custom classes or the pain of thinking in BEM. There is also no need to go searching for where the css files are locate the styles inside each css file.

TailwindCSS also implements other HTML states like focus and hover. All with the benefit of the styles being directly attached to their HTML elements, making it quicker and easier to understand.

Implementing styling based on aria values allows you to control even more styles all while adding usability and creating cleaner code.

Keeping all of your styling in one place instead of scattering it throughout the project make its easier for everyone to understand. Using the available tools in the TailwindCSS toolbox before needing to resort to other methods will help the flow of your project to stay more clear and concise.

Now before you go out and add aria-labels to everything I would like yo share with you this quote.

_There is a saying "No ARIA is better than bad ARIA." _

Adding aria-labels purely to style css is never a good idea. You should always think 'what will the user gain from this aria label' before deciding to add any aria labels. If you decide to add aria labels, then why not use them to help you style your next project.

DEV Community: Lochy

Why use TailwindCSS & Aria

Introduction

Why use TailwindCSS & Aria

Firstly lets quickly explain what we mean by Aria.

Code Examples

Example 1 (Vanilla CSS)

Example 2 (Vanilla CSS with Aria)

Example 3 (CSS With TailwindCSS & React)

Summary