4 Ways To Improve Your Website's Accessibility Today

Often times, web accessibility is talked about as some abstract, intangible concept.

In reality, there are a few very actionable ways to drastically improve your website's accessibility - especially when you're just getting started.

1. Using "prefers-reduced-motion"

In CSS, the prefers-reduced-motion media query is a powerful way to optimize the way your web pages are styled for users with browsers that request reduced motion.

It's important to consider that some of your website's users may have motion sickness, may be prone to seizures, or otherwise prefer a more still browsing experience.

The following snippet of code will, in just four lines, forcefully disable all animations and transitions on the web pages it is installed on for users that request reduced motion:

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}

This is a standard recognized by most modern browsers, and the browsing experience of all your other users will remain unaffected by this snippet.

You could add this to the beginning or end of your website's primary CSS file.

2. Adding alternative text to social share images

Many web apps and social networks, such as Facebook or Twitter, will display a "rich object" when a link from your site is shared.

This can be thought of an embedded preview of your site's page.

It might include the title, the description, your domain name, and an image or video related to the page.

However, while including an image that other websites can understand in the <head> tag has become a quite common practice on many websites, providing alternative text is much less common.

Alternative text is how screen readers describe images to users, and it's quite common on standard image elements, like this one:

<img src="apple.jpg" alt="A red apple ontop of a wooden table.">

However, to provide alternative text on most rich objects, you must provide the following meta tag in your head <head>:

<meta property="og:image:alt" content="Example alternative text">

And if you also want to provide alternative text specifically for images shared on Twitter, you must provide this meta tag in your <head>:

<meta name="twitter:image:alt" content="Example alternative text">

3. Inserting skip links at the top of your pages

Skip links help screen reader users save time when they navigate the web.

It allows keyboard users to display a hidden little box that should say something like "Skip to main content", when they first press the tab key on a web page.

If they then go on to press the enter key, they'll be scrolled immediately past the site's navigation and onto the main section of the page.

This way, users with screen readers don't have to listen through the reading of the entire navbar, and can just skip directly to the article.

Consider the following example:

    ...
</head>
<body>
    <a href="#main-content">Skip to main content</a>
    <nav>
        ...
    </nav>
    <main id="main-content">
        ...
    </main>
    ...

Skip links must always be placed directly below your <body> tag, because they must be the first focusable element.

Screen readers will detect it, even if it's not normally visible to the user.

Following the hash link will send the user to the element with the matching ID (if it exists). In the provided example, the user will be scrolled by to the <main> element, skipping right past the navigation menu.

4. Implementing semantic HTML

Lastly, another great practice for improving your web accessibility and helping screen readers better understand your site, is using semantic HTML tags.

Semantic HTML tags provide contextual understanding about the way your pages are structured.

Here are all of the semantic tags in HTML5:

Sections

These semantic tags are like <div> elements, except they provide additional context to screen readers and search engines:

<header>: A header represents an introduction or opening section to a piece of content, or a collection of navigation links.
<nav>: A <nav> tag contains navigation links.
<section>: This can be used to define a section in the document.
<aside>: Often used to enclose sidebars, the aside tag represents something that is aside from the content it is surrounded by.
<main>: The main content of the document should be inside the <main> tag.
<article>: An article is an independent, isolated, and modular piece of content. For example, this could be something like a product from a search results grid on an E-commerce site, or a blog post preview.
<footer>: A footer represents, well, any portion of a document that is designated to be a footer. It might include things like copyright information.

Here is one example of each semantic section tag in action:

</head>
<body>
    <nav>
        ...
    </nav>
    <section>
        <main>
            ...
        </main>
        <aside>
            ...
        </aside>
    </section>
    <section>
        <article>
            <header>...</header>
            ...
        </article>
        <article>
            <header>...</header>
            ...
        </article>
    </section>
    <footer>
        ...
    </footer>

Keep in mind, they don't all have to be used! Only use semantic tags when necessary and appropriate.

Inline semantics

These semantic tags enclose text and are usually used within <p> elements:

<time>: This indicates that enclosed text is a time or date. Often, the "datetime" attribute is included to help search engines better understand the document.
<mark>: This indicates that enclosed text should be highlighted. Many browsers will add a yellow background color to a <mark> element by default.

Here's an example of each:

<p>As of writing this, the time is <time>11:00</time>, and the date is <time datetime="2021-08-22">August 22</time>.

<p>This is some text, but <mark>this is some important text</mark>.</p>

Semantic images

These semantic tags are for self-contained images:

<figure>: Figures contain an <img> or <picture> element, and indicate that the underlying image is "self-contained".
<figcaption>: Optionally, a <figure> element can also contain a <figcaption> element, as either the first or last child, to visible describe the image.

Here's an example of a <figure> tag with a <figcaption>:

<figure>
    <img src="ball.jpg" alt="A red ball centered in a grassy field">
    <figcaption>A red ball centered in a grassy field</figcaption>
</figure>

Your <figcaption> tag does not have to match the alt attribute of your <img> tag(s)!

Dropdowns

These last two semantic tags work together to create content with toggled visibility:

<details>: This tag specifies details that the user can toggle the visibility of. It's sort of like a dropdown, but without JavaScript.
<summary>: This should be the first child element of any <details> element. It is a visible toggle for the rest of the content in the <details> element.

Here's an example of how each of these tags would be used:

<details>
    <summary>If you click this, the sibling element(s) will be toggled!</summary>
    <p>This text is hidden by default, but its visibility can be toggled by the `<summary>` tag.</p>
    <p>Here is some more text, which is also hidden by default.</p>
</details>

Perhaps specific examples for each of these semantic tags will be explored in a future post.

There's also many subtle rules about some of these tags that are important to follow. For example, no document page should have more than one <main> tag, and a <main> tag should not be a descendant of certain tags, such as <article>.

Conclusion

You made it to the end!

While the practices enumerated in this article vary in implementation difficulty, they are all quite actionable and produce very tangible results.

Even just implementing two of these four practices is a great step in the right direction, demonstrating that your site actually cares about accessibility, not just "ticking the compliance box".

Blog