DEV Community

loading...

How to make your site more accessible

TheYoungestCoder
Why is typeof null an object?
Updated on ・2 min read

Long time no post. Since my school is nearing its end hopefully I'll be able to be more active! Anyways, it aggravates me sooo much when I just see someone using a div for everything. In this article I'll show you some tips to make your site more accessible.

semantic elements

Many web developers suffer from a syndrome called "divitis". Symptoms include the urge to use a <div> often. To cure this disease, start using some of these elements instead.

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • main
  • mark
  • nav
  • section
  • summary
  • time

Take for example, you want to make a dropdown. You could use

<div class="dropdown-btn"> Open the dropdown </div>
<div class="dropdown-content"> some content… </div>
Enter fullscreen mode Exit fullscreen mode

but this is bad because…

  1. it's not accessible — assistive technologies have no idea what element dropdown-btn controls.
  2. requires additional JavaScript

You don't need to reinvent the wheel. HTML already has an element just for that called details. After refactoring, this is what it should look like:

<details>
    <summary>Open the dropdown</summary>
    some content…
</details>
Enter fullscreen mode Exit fullscreen mode

In addition to that, it's common to see people use <a href="javascript:void 0"> instead of <button>. This does not worsen the user's experience, but the <a> was designed to change the url, not to execute javascript that does nothing. Instead, use the <button> element. I would also like to clarify that buttons are valid outside of a form.

aria-* attributes

There are some scenarios where you might use an icon as a button. Screen readers have no idea what that icon is! This is why we have attributes like these:

  • aria-label
  • aria-labelledby
  • aria-disabled
  • aria-hidden
  • aria-haspopup
  • alt
  • role
  • title

If you use these attributes, it is technically okay to use a <div> in that situation.

HTML ≠ styling

If I were to ask you why you use a <div>, you would probably say because it's a quick, styleless, block-level element. You might say that a <button> has some terrible default styles. It never hurt anyone to write a bit of css. HTML is not about styling in the first place.

The one exception for this is the css content style. Screen readers tend to be a little buggy when announcing it. What you should do is insert an <svg> with a title attribute that describes the graphic.

for the colorblind

When designing your site, make sure it is usable for people who are colorblind. Colors that are harder to see will result in a lower contrast ratio. Just hover over the element while DevTools is open, and it will show you the contrast ratio. It's also good practice to also consider those who prefer reduced motion. It's simple as a media query. Here's an example that disables transitions when hovering over a button.

@media (prefers-reduced-motion) {
    button {
        transition-property: none!important;
    }
}
Enter fullscreen mode Exit fullscreen mode

parting ways

I could (and probably would) go on an hour complaining that you need to make your sites more accessible. I hope this article taught you something that you will use in your next project! Thank you for reading this far!

Discussion (0)