Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 15, 2021 08:46 pm GMT

Basic accessibility features you should ALWAYS implement

Accessibility on the web has always been important, but it's only been in the last <10 years that a true emphasis on it has come about. Legally, it's against the law to build a site or application that doesn't adhere to the Web Content Accessibility Guidelines.

Purple Cow Agency has this great article where they answer some of the questions around accessibility. They do a great job of answering those questions and giving an easier-to-digest version WCAG 2.1

According to Title III of the Americans with Disabilities Act (ADA), all public areas must accommodate people with disabilitiesthis includes your website. Though the ADA doesnt mention websites anywhere, the US courts interpret places of public accommodation to include the public domain of the internet.

Today, we're going to look at 3 commonly overlooked accessibility patterns you can add to your projects to get them a few steps closer to be fully accessible compliant!

Accessible Modals

Modals are a very common design pattern across the web today. You see them for newsletter signups, requests for cookie tracking, and- believe it or not- mobile menus!

Slide-out, pop-out, revealing- whatever you want to call them- mobile menus hidden behind an icon toggle are technically modals, and they should be treated as such!

They're definitely good patterns to pull user's attention to specific content (especially when they quite literally block other content)- but there are some features they need to be considered a11y compliant.

  1. On open, autofocus the first focusable element in the modal dialog.
  2. While open, limit mouse and keyboard focusability to only the content within the modal dialog.
  3. On close, autofocus the element that initially triggered the modal to open.
  4. When opened, the modal dialog and content should be appended to the end of the DOM.

Now, there are a lot of ways to accomplish this. I just wrote an article about how to do this in Vue, if you're interested in implementing this into your Vue project.

Accessible Menus (navigation submenus)

Collapsible/hover-able navigation menus are another pattern that eat the web up. They make sense. Designers/marketers want to save space above the fold, and they do that by hiding submenu items underneath or behind their parent menu item.

However, this exposes a lot of room for accessibility errors to come into play. It's easy enough to reveal a menu with a mouse hover, but what about for people who use assistive technologies and navigate with their keyboard?

Does .menu-item:hover apply to when a submenu item is keyboard focused? No, it doesn't. That leaves your assisted users possibly reading top-level non-clickable menu items that go nowhere and being given no context as to why they don't go anywhere.

Heydon Pickering has a fantastic Smashing Mag article where he walks through, in detail, how to build an accessible compliant menu and submenu navigation system.

Semantically correct HTML

The last, and surprising thing, on this is semantically correct HTML. It's surprising that this one needs to be mentioned, because structurally sound HTML should be the default for anyone coming out of a bootcamp or grad school- but, somehow, it isn't.

Getting your HTML right can have a huge effect on your assisted users experience. It's very common to wrap everything in a div, and before you know it, you have div soup.

HTML has specific elements with some accessibility baked into them. So, why not use them?

We all know about the header and footer, but how often do you forget to wrap your main content between the two in the <main> tag? I know I have, more than I care to admit.

There are other HTML patterns to remember too:

  • Only have a single <h1> tag per page
    • There was a rumor/myth that perpetuated pretty far into the tech community that <section> tags reset the page reader and that you could have multiple H1s on a page. This isn't true. There was a proposal for such, but it was never implemented.
  • Keep your heading tags in order
    • You should only use your heading tags in an ascending order (by number). H1's should only be followed by H2's. H2's should only be followed by H3's. H3's should only be followed by H4's. Rinse and repeat.
  • Separate different generic content areas with <section> tags with proper headings. This lets your user know the content they're about to consume (while it may be related) is separate from what they just engaged with.
  • Use <article> tags to separate content that could exist independently of the rest of the content, e.g., forum post, a blog entry, etc..

There is a lot more that goes into writing proper HTML. It would take an entire novel (and some do exist) on how to write each section the right way, but keep things like this in mind when you're building, and overtime, you'll probably notice the quality of your HTML increasing while the effort to do so decreases with each project!

Here's a list of HTML elements you can use to check when and if you're using the right element.

A simple page could look something like this:

<body>  <header>    <nav>      <ul>       <li>        <a href="/">Menu Item</a>       </li>      </ul>    </nav>  </header>  <main>    <h1>Page Title</h1>    <article>      <section>        <h2>Section title</h2>        <p>This would be your content description area.       </section>    </article>    <aside>      <h2>Side Navigation</h2>      <ul>       <li>        <a href="/">Menu Item</a>       </li>      </ul>    </aside>  </main>  <footer>    <nav>      <ul>       <li>        <a href="/">Menu Item</a>       </li>      </ul>    </nav>  </footer></body>

Summary

I'll be the first to admit that I build a lot of websites incredibly incorrectly, from an HTML perspective. But the growth comes from knowing you can do better, and then striving to do so. If you're reading this article, then you're on that right path!

As developers, it's our responsibility to make the knowledge and entertainment on the web available and accessible to everyone. I try to take that responsibility seriously. Do you?


Original Link: https://dev.to/drewclem/basic-accessibility-features-you-should-always-implement-59h4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To