Accessibility & Semantics

What is Semantic HTML

image and description provided by semrush.com

Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them.

By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.

Misc

• A11Y is an acronym for "Accessibility"
• Introduction to ARIA (Accessible Rich Internet Applications).
  • If you would like to adhere to WAI-ARIA in your application, we recommend some headless UI libraries on the ecosystem page that follow the WAI-ARIA design patterns.
  • Take caution when adding/implementing ARIA manually in your project, as it is frequently implemented incorrectly and can actually make your application LESS usable.

Accessibility Cheatsheet:

• Accessibility cheat sheet

Learn more:

• HTML: A good basis for accessibility
• HTML Elements Reference
• A beginner's guide to web accessibility
• 10 Blunt Things I Wish I Could Tell Clients - Karl Groves, Web Accessibility Expert

Why is Semantic HTML Important?

1. Make Your Website / Web App Accessible
2. Search Engine Optimization (SEO)
3. Clearer Code / Maintainability

Bad Practices to Avoid

Do NOT treat accessibility as something you can add to your app after the development phase but before launching. You are pretty likely to either miss accessibility concerns altogether or create solutions that end up causing more trouble for people trying to access your app.

Instead of thinking of A11Y as something you "sprinkle" in right before the production launch, try to make it a fundamental aspect of your code-writing process. Give your team cheatsheets like the one at the bottom of this page to make it easier for them to implement accessible interfaces, make it a point to double-check any HTML markup added in a PR review for better semantic options.

By making accessibility a "ground up" philosophy on your team, you will be much less likely to miss gaping accessibility issues in your projects.