0
0
HTMLmarkup~30 mins

Why accessibility matters in HTML - See It in Action

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Why Accessibility Matters
📖 Scenario: You are creating a simple web page to explain why accessibility is important for everyone. This page will have a heading, a paragraph, and a list of reasons. You want to make sure the page is easy to read and accessible for all users, including those using screen readers or keyboard navigation.
🎯 Goal: Build a basic accessible HTML page with a clear heading, a descriptive paragraph, and a list of reasons why accessibility matters. Use semantic HTML elements and add an aria-label to the main content area for screen readers.
📋 What You'll Learn
Use semantic HTML5 elements like <header>, <main>, and <section>.
Add a heading with the text 'Why Accessibility Matters'.
Include a paragraph explaining accessibility in simple words.
Create an unordered list with exactly three reasons why accessibility is important.
Add an aria-label attribute to the <main> element describing the content as 'Accessibility information'.
Ensure the HTML includes lang, charset, and viewport meta tags for proper accessibility and responsiveness.
💡 Why This Matters
🌍 Real World
Creating accessible websites ensures that all users, including those with disabilities, can access information and services online easily.
💼 Career
Web developers must build accessible sites to meet legal standards and provide inclusive user experiences.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en" in the <html> tag. Inside the <head>, add the <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0"> tags. Then add a <title> with the text 'Why Accessibility Matters'.
HTML
Need a hint?

Remember to add lang="en" to the <html> tag and include the charset and viewport meta tags inside <head>.

2
Add header and main sections
Inside the <body>, add a <header> element containing an <h1> with the text 'Why Accessibility Matters'. Then add a <main> element with an aria-label="Accessibility information" attribute.
HTML
Need a hint?

Use semantic tags: <header> for the heading and <main> for the main content. Add the aria-label to <main>.

3
Add paragraph and list inside main
Inside the <main> element, add a <section>. Inside this section, add a paragraph <p> with the text 'Accessibility helps everyone use the web easily and fairly.'. Then add an unordered list <ul> with these three list items <li>: 'Supports people with disabilities', 'Improves user experience for all', and 'Follows legal requirements'.
HTML
Need a hint?

Wrap the paragraph and list inside a <section> inside <main>. Use an unordered list <ul> with three <li> items.

4
Add footer with contact info
After the <main> element, add a <footer> element containing a paragraph <p> with the text 'Contact us at accessibility@example.com'.
HTML
Need a hint?

Add a <footer> after <main> with a paragraph containing the contact email.