Table of Contents
- Introduction
- What is Accessibility
- What is SEO?
- Accessibility and SEO in your Web Content
- Conclusion
- Resources
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?
- 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.
- 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.
- 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) and ARIA (Accessible Rich Internet Applications) are used to make web applications and products more accessible.
What is ARIA?
"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
When to use ARIA - [The 5 Rules](https://web.dev/learn/accessibility/aria-html/)
- Don't use ARIA - Try to use a semantic HTML first
- Don't add (unnecessary) ARIA to HTML - use HTML elements as intended
- Always support keyboard navigation
- Don't hide focusable elements
- 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.
Browsers implicitly support HTML tags that have a corresponding ARIA roleso 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 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 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 description tag located in the
element. The information in the description tag is on the search results page of Google.Canonical Links
The canonical tag 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.
Top comments (0)