Making Your Web Content Accessible and SEO-friendly
Tags: webdev, frontend, a11y, seo
Published: 2023-09-12 04:14:38

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#introduction">Introduction</a>
    </li>
    <li>
      <a href="#what-is-accessibility">What is Accessibility</a>
     <ul>
       <li><a href="#why-does-digital-accessibility-matter">Why does Digital Accessibility matter</a></li>
     </ul>
    </li>
    <li>
      <a href="#what-is-seo">What is SEO?</a>
     <ul>
       <li><a href="#why-is-seo-important">Why is SEO Important</a></li>
     </ul>
    </li>
    <li><a href="#accessibility-and-seo-in-your-web-content">Accessibility and SEO in your Web Content</a>
     <ul>
       <li><a href="#aria-attributes">ARIA Attributes</a></li>
       <li><a href="#semantic-html">Semantic HTML</a></li>
       <li><a href="#alt-attributes-for-images">Alt Attributes For Images</a></li>
       <li><a href="#title-element">Title Element</a></li>
       <li><a href="#meta-tags">Meta Tags</a></li>
       <li><a href="#canonical-links">Canonical Links</a></li>
     </ul>
    </li>
    <li><a href="#conclusion">Conclusion</a></li>
    <li><a href="#resources">Resources</a></li>
  </ol>
</details>

## Introduction
This article will focus on the importance of well-structured HTML for accessibility and SEO.

## What is Accessibility?
Digital Accessibility is about designing and building web products that are useable and inclusive to people with disabilities.

### Why does Digital Accessibility matter?

1. **Individual Impact**: It is the largest minority group globally. The World Health Organization (WHO) estimates that about 15%, and growing, of the world population (1.3 billion people) identify as having a disability.
2. **Business Impact**: It is the world's largest emerging market with billions of dollars in potential revenue, a larger market of supporters (family, friends, communities, etc.), and innovation born from disability inclusion challenges.
3. **Legal Impact**: Many disabled people in the US file a lawsuit because they feel it is their only option to bring awareness and change to digital products. Digital accessibility laws also exist in countries.

## What is SEO?
SEO, or Search Engine Optimization, is the process of optimizing your website to improve its visibility in search results and attract more organic (non-paid) traffic.

### Why is SEO important?

- **Increased Visibility and Traffic**: A higher rank in search results will increase organic traffic to your website.
- **Cost-Effective**: We save a lot of money from organic traffic than paid advertising in the long term.
- **Credibility**: Ranking high in search results builds trust with users.

## Accessibility and SEO in your Web Content
When making your web content more accessible and SEO-friendly, here are some things to keep in mind. 

### ARIA Attributes
[HTML (HyperText Markup Language)](https://developer.mozilla.org/en-US/docs/Web/HTML) and [ARIA (Accessible Rich Internet Applications)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) are used to make web applications and products more accessible.

<u>What is ARIA?</u>
_"Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities."_ - [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

<u>When to use ARIA - [The 5 Rules]</u>(https://web.dev/learn/accessibility/aria-html/)
1. Don't use ARIA - Try to use a semantic HTML first
2. Don't add (unnecessary) ARIA to HTML - use HTML elements as intended
3. Always support keyboard navigation
4. Don't hide focusable elements
5. Use accessible names for interactive elements

### Semantic HTML
The best way to make your content accessible and SEO-friendly is by using [semantic HTML elements](https://web.dev/learn/html/semantic-html/). 

Browsers implicitly support HTML tags that have a corresponding ARIA [role](https://web.dev/learn/html/semantic-html/#the-role-attribute)so no ARIA attributes are needed for them. However, some ARIA states are still not available in HTML and ARIA attributes are necessary in these cases.

When a browser parses the webpage, it builds a Document Object Model (DOM), a CSS Object Model (CSSOM), and an accessibility tree or Accessibility Object Model (AOM). Assistive devices, like screen readers, use the AOM to parse and interpret the webpage content.

Search engines use semantic elements to identify topics and content relevance through tags like `<h1>`, `<p>`, `<section>`, and `<article>`. 

Common Semantic Elements:
- `<header>`
- `<nav>`
- `<main>`
- `<section>`
- `<article>`
- `<footer>`

### Alt Attributes For Images
Adding a [descriptive and informative alt text](https://web.dev/learn/accessibility/images/) for images provides more value to assistive technologies and better support for people with disabilities. Limit the characters to 150 or less and follow other [best practices](https://web.dev/learn/accessibility/images/#alternative-text-best-practices) when creating image alternative text. 

For SEO, alt text is crucial in indexing images for Google searches.

### Title Element
An important SEO tag is the `<title>`. It is usually the headline displayed in search results. Google might use other section headings on your webpage, but the title tag is normally checked first.

Things to remember when writing a good title element:

- **Keep it short**: Google will only display the first 50-60 characters
- **Don't use too many keywords**
- **Make it relevant to the content (no clickbait)**

### Meta Tags
A vital tag for SEO is the <meta> description tag located in the <head> element. The information in the description tag is on the search results page of Google.

### Canonical Links
The [canonical tag](https://developers.google.com/search/docs/crawling-indexing/canonicalization) is helpful when you want people to see a specific web address in the search results, define a main address from multiple addresses, reduce crawl time, and simplify tracking metrics.

```
<link rel="canonical href="https://google.com" />
```

For more information, I'd refer to Google's Developer Documentation regarding canonical links: https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls

## Conclusion
Through writing this article, I've learned how much more there is to consider when it comes to creating web content that is accessible and SEO-friendly. I hope to cover these more in-depth in the future and that this was a good introduction on what to think about when creating web content.

## Resources
- [Learn Accessibility](https://web.dev/learn/accessibility)
- [Learning SEO](https://learningseo.io/)
- [HTML Tags for SEO](https://www.greengeeks.com/blog/html-tags-for-seo/)
- [The Ally Project](https://www.a11yproject.com/)
- [Accessibility Checklist](https://www.a11yproject.com/checklist/)
- [SEO Checklist](https://www.semrush.com/blog/seo-checklist/)
- [SEO Basics](https://ahrefs.com/blog/seo-basics/)