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".
Top comments (11)
The skip links section you need to make it clear that the skip link should be offscreen / visually hidden but still focusable and then visible when focused.
It isn’t really for screen readers as they use other ways to navigate, it is for people who don’t use a mouse and use the Tab key to navigate.
<main>should wrap all of the main content not just be part of a section so your example is misleading on semantic HTML. w3.org/TR/html-main-element/#the-m...<time>should always have adatetimeattribute to ensure it is announced correctly in screen readers, not just for SEO, your second one is correct but you missed it on the first one.Figcaption should be different to alt as pointed out in another comment otherwise this cause unnecessary duplication.
Summary and Details aren’t dropdowns, that may confuse people calling them that. They are disclosure elements or you could call them accordions if you want to make it easier to understand.
With all that being said (and most of them are minor points) this is a great article and introduction to accessibility “quick wins” that people can easily implement.
Definitely deserves a ❤️🦄!
Further to the skip links - "modern" accessibility tools including Apples VoiceOver uses semantic markup first before things like skip links. This means each page you visit it will look for a
<main>and automatically skip to it or bypass anything in<nav>making the skip links even less useful for screen reader tech (keyboard nav is different kettle of fish)Interesting, I hadn't heard this before, thanks for sharing! In any case, it is still useful for users that use their keyboard to navigate.
Thanks for your feedback - all your points are correct and helpful! I definitely should have been more clear about the skip link.
But yes, the goal is to provide examples of some actionable quick wins for people just getting started.
Then you did that beautifully as the article explains why and how to do things really well.
I did think you knew skip links as you explained all the bits, just maybe a phrasing issue (or the way I read it 🤣).
Nice tips! Number 2 was new to me, very nice to know!
In fact, I'd reckon they usually shouldn't match. If they're the same then the screenreader ends up announcing the same thing twice. Usually I think of the caption as providing additional context to an image not necessarily evident from the content of the image alone, or highlighting what should be noticed in the image.
Yep! It's definitely ideal for longer, more detailed descriptions.
Thanks for the new knowledge in this article. I will explore more about prefers-reduced-motion. Great Article.
Thanks Imia!
Thanks Harsh! Not sure I understand what that link is for though.
it's a spam comment ;) ignore it, will get deleted soon