This beginner’s guide to HTML accessibility covers the basics with simple explanations and code examples. At the end of the article, you’ll see that making your site more accessible is easier than you think!
It’s easy to assume that making a website accessible requires rocket science skills. Perhaps this is because of the technical jargon and long compliance requirements you may have read about. But let’s take a step back and simplify things a bit. It all starts with understanding HTML accessibility.
In this article, we’ll cover the basics of HTML including common attributes and elements. You’ll also learn the importance of using semantic HTML elements and how they improve accessibility for everyone.
What is HTML?
HTML is short for HyperText Markup Language. This is the standard language used to create web pages. It uses different elements and tags to structure content, telling web browsers how to correctly display text, images, links, and other media. Let’s break it down a bit further:
- HyperText: this is a text that contains links (called hyperlinks) to other information. These links can connect to different parts of the same page, other pages on a website, or entirely different websites. When you click on an underlined or colored text on a webpage, it’s often a hyperlink. This allows you to jump to related information or navigate between different web pages.
- Markup: These are special codes on a text to tell web browsers how to display and arrange content on a webpage. These codes, or tags, are not visible on the webpage but work behind the scenes to format the content. For example, a web page’s markup can make words bold, turn text into headings, or put items into lists.
- Language: Just like English or French has rules for forming sentences, HTML also has rules for structuring web content. But instead of words and sentences, it uses tags and elements to convey meaning.
Why is HTML accessibility important?
HTML is the foundation of web development. It gives a website its structure, much like how your skeleton supports your body. Without HTML, web pages wouldn’t exist. But it’s not just about putting content on the web; it must be accessible to everyone, including people with disabilities.
Here are two core reasons why web content must use accessible HTML:
- It improves the user experience for everyone
Accessible HTML means inclusivity. It ensures everyone can interact with your website, including people using screen readers or other assistive technologies. This widens your audience, making your site more usable for everyone.
Think of accessibility features in physical spaces, like ramps and elevators in buildings. While essential for people with disabilities, they also benefit everyone else. Simple examples are parents with strollers and delivery workers pushing heavy carts – they benefit from ramps and elevators too.
- It helps you meet legal and ethical requirements
Making your website accessible is often a legal requirement in many countries. In the U.S., laws like the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act require public and private websites to be accessible. Ignoring these laws can lead to serious legal issues, causing you to pay hefty ADA lawsuit settlement amounts.
Beyond legal compliance, you have an ethical obligation too. Everyone deserves equal access to the web, regardless of their abilities. By making your website accessible, you show respect and empathy for all users, committing to better inclusion on the Internet.
How to Write HTML
The basic unit of HTML is an element. This defines content or sections on a web page. Elements could be text like a paragraph, an interactive button, or a section like a header or footer. Let’s explain this using a basic HTML element: the paragraph element.
1. Start tag
HTML elements use tags to mark their beginning and end. The start tag (or opening tag) contains the element’s name enclosed in angle brackets (<>). For a paragraph, the start tag is <p>. Tags can also have extra information called ‘attributes’, which we’ll discuss later. Tag names are not case-sensitive. However, we recommend using lowercase letters to write them.
2. Content
The content of the element goes between the start and end tags. This is what users see on the webpage. It could be text, links, images, lists, or tables. Elements can also contain other elements nested within them.
3. End tag
The end tag marks the end of the element. It looks like the start tag but with a forward slash (/) before the element name. For example, the end tag of a paragraph is </p>. Most elements need a closing tag, but some, like images (<img>) and line breaks (<br>), do not. These are called ’empty elements’.
Now, let’s see a quick example of everything we just covered:
<p>This is a paragraph.</p>In this example, <p> is the start tag, </p> is the end tag, and “This is a paragraph.” is the content. But when you view this in a browser, you’ll only see the content, not the tags.
Basic HTML Structure
An HTML document has a specific structure that helps web browsers understand and display the content correctly. Here are the key parts of a standard HTML document:
1. Doctype declaration
This is the first line of an HTML document. It tells the browser which version of HTML you are using. For modern websites, the recommended standard is the ‘HTML5’ doctype.
2. HTML tag
This is the root element of the document. Everything inside the document is contained within the <html> tags.
3. Head element
The <head> element contains meta-information about the document, like its title, character set, stylesheets, and scripts. This information is not visible on the webpage but is essential for the browser and search engines.
4. Body element
The <body> element contains the actual content of the webpage that users see and interact with, including text, images, links, and more.
Putting it all together, a basic HTML document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Common HTML Elements
HTML elements are the building blocks of web pages, each serving a specific role in structuring and presenting content. There are over 100 HTML elements, but we’ll cover only the most commonly used ones.
1. Heading elements
Headings organize content on a webpage, making them easier to read. There are six HTML heading levels or tags, from <h1> to <h6>. The <h1> tag represents the page’s main title and is the most important heading level. You use <h2> to <h6> tags for subheadings to divide the content into sections and subsections. Headings create a clear content hierarchy, making it easier for users and search engines to understand your content’s structure.
2. Paragraph and text formatting HTML elements
These HTML elements help you format and emphasize parts of your content. You use the <p> tag to create paragraphs, which are the basic units of text blocks. For styling small parts of text within a paragraph, use the <span> tag. If you want to highlight important text, use the <strong> tag to make it bold. To emphasize text, use the <em> tag, which typically makes it italic.
3. Lists
Lists are perfect for grouping related items. HTML offers unordered lists and ordered lists. Unordered lists (<ul>) use bullet points and are ideal for items that don’t need a specific order, like a grocery list. Ordered lists (<ol>) use numbers or letters to group items that follow a sequence, like steps in a recipe. Both list types use the <li> tag for each item, making your information clear and organized.
4. Images and multimedia HTML tags
Adding images and multimedia enriches your content and engages users. The <img> tag embeds images, while the <video> tag embeds videos, and the <audio> tag embeds audio files. These elements allow you to provide visual and auditory content, making your website more dynamic and interactive. For better accessibility, always add proper captions for videos and transcripts audio content.
5. Links
Links are essential for navigation. The <a> tag, also known as the anchor tag, creates hyperlinks that connect to other web pages, files, locations within the same page, email addresses, and more. Adding descriptive text to links improves accessibility by providing context to users and search engines.
6. Table HTML elements
Tables display data in a structured format with rows and columns. The <table> tag defines the table, <tr> defines a table row, <th> defines a table header, and <td> defines a table cell. Tables help in organizing and presenting data clearly and concisely.
7. Form HTML elements
Forms collect user input for functionalities like user registration, login, and data submission. The <form> tag defines the form. Within it, various elements that identiy input purpose like <input>, <textarea>, <select>, and <button> are used to create fields where users can enter data.
Common HTML Attributes
HTML attributes provide more information about HTML elements, to help you modify their behavior or appearance. They typically appear in name/value pairs in the opening tag. HTML attributes are important because they allow web developers to customize HTML elements, improving web functionality and accessibility. Here are some of the commonly used HTML attributes:
1. The 'id' attribute
The id attribute gives a unique identifier to an HTML element. This is especially useful when you want to apply specific styles to that element or manipulate it with JavaScript.
2. The 'title' attribute
The title attribute provides additional information about an element. When you hover over this element, a small tooltip appears showing the title text. Think of it like a label that gives extra context or details about the element it is applied to, making it more informative.
3. The 'alt' attribute
The alt attribute provides alternative text for an image. This is especially important for accessibility, as it helps people who use screen readers understand what the image is about. Imagine you are describing an image to someone who cannot see it; that’s what the alt attribute does for visually impaired users.
4. The 'href' attribute
The href attribute stands for “hyperlink reference” and is used in anchor tags (<a>) to specify the URL of the page the link goes to. This attribute can link to another section on the same page, a different page on your site, or even an entirely different website.
5. The 'class' attribute
The class attribute allows you to assign an element one or more class names. This makes it easy to apply the same styles to all elements of the same class using CSS. For instance, you might have a class called “highlight” that makes text bold and yellow, and you can apply this class to any number of paragraphs or other elements.
6. The 'scr' attribute
The src attribute stands for “source” and is used with elements like images, videos, and audio to specify where to find the file you want to embed. Imagine you are telling someone where to find a picture in your house. The src attribute does the same by pointing to the file’s location on the internet or your server.
7. The 'style' attribute
The style attribute allows you to add inline CSS (Cascading Style Sheets) directly to an element. These styles include color, font, size, spacing, and more. This removes the need for an external stylesheet or a <style> block within the HTML document.
8. The 'lang' attribute
The lang attribute specifies the language of an element’s content, helping search engines and browsers understand the text. This improves accessibility and SEO. You usually add the lang attribute to the <html> tag, but you can apply it to any HTML element to specify its language.
What is Semantic HTML?
Semantic HTML uses elements that clearly describe their meaning and role in the content they contain. Tags like <header>, <article>, and <footer> are semantic because they provide context to both the browser and the developer about the content they enclose. In contrast, non-semantic tags like <div> and <span> only serve as containers without indicating the type of content or its role.
Why Use Semantic HTML?
1. Better accessibility
Sighted users can easily identify webpage parts like headers, footers, and main content. However, blind or visually impaired users relying on screen readers cannot. Using semantic HTML tags helps screen readers accurately convey your content to these users.
2. Improved SEO
Search engines rank websites with clear, logical structure because it’s easier for them to analyze the content. This can help your site appear higher in search results.
3. Easier to maintain
Semantic HTML makes it straightforward to see what each part of your website is supposed to be. This can be a huge time-saver when updating or debugging your site.
Key Semantic HTML Tags
- <header>: This represents introductory content or navigational links. It usually contains the website’s title or logo and main navigation menu.
- <nav>: This defines a set of navigation links. It is used to wrap around the principal set of links that might be on your header or sidebar.
- <article>: This specifies independent, self-contained content that could be distributed outside the context of the site, like a blog post or news article.
- <section>: This is used for grouping thematically related content. It should be used when a more specific tag (like <article>) is not appropriate.
- <aside>: This tag is for content slightly related to the main content, like a sidebar mentioning related articles or some quick facts.
- <footer>: This is used for the bottom part of the website. It often contains copyright information, links to privacy policies, or social media icons.
- <figure> and <figcaption>: This is used together, these tags associate a media element (like an image, diagram, or chart) with a caption, effectively grouping them.
- <main>: This specifies the main content of the document. There should only be one <main> element on a page, and it should not be placed within an <article>, <aside>, <footer>, <header>, or <nav> element.
Best Practices for Writing Semantic HTML
- Use the correct element for the correct purpose. For example, use <h1> through <h6> for headers, <p> for paragraphs.
- Avoid non-semantic HTML where possible, like <div> or <span>, which do nothing to describe the content they contain.
- Test your site with accessibility tools and in different browsers to ensure that your semantic HTML is having the intended effect.
How Do You Ensure HTML Accessibility?
Consider accessibility from the very beginning of your web design process. By implementing best practices early, you save yourself from costly revisions later. Remember, web pages are essentially text documents that you can adjust and refine. With some accessibility tweaks and checks, you can significantly improve the browsing experience for all your visitors.
