freecourses.digital
Lesson progress: 0 of 4 activities done
All lessons in HTML Basics for Beginners Lesson 8.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Using HTML to improve accessibility

What we will go through

  • What web accessibility means
  • The HTML features that do most of the work
  • Keyboard testing in two minutes
  • ARIA basics and when to skip it

Short answer

Web accessibility means people with disabilities can use your site, including people who are blind, deaf, have low vision, or use only a keyboard. Most of the work is plain HTML done right: a lang attribute, logical headings, alt text, linked labels, real buttons and links, and visible focus. Use ARIA only when HTML has no element for the job.

Who accessibility serves

Around 1 in 6 people worldwide live with a significant disability, according to the World Health Organization. Add older adults, people with a broken arm, and anyone using a phone in bright sunlight, and accessibility helps nearly everyone. In the Philippines, Batas Pambansa Blg. 344 covers physical access, and many government and enterprise clients now ask for WCAG conformance on websites too.

The HTML checklist

CheckHTML that does it
Page language set<html lang=“en”>
Clear outlineOne h1, then h2 and h3 in order
Images describedalt text, or alt="" for decoration
Fields named<label for> linked to each input
Actions reachableReal <button> and <a href>
Regions markedheader, nav, main, footer
Links make sense aloneDescriptive anchor text
Media accessibleCaptions and transcripts
Data tables readableth with scope, caption

Test with your keyboard

  1. Click the address bar, then press Tab repeatedly.
  2. Can you see where focus is at every step?
  3. Can you reach every link, button, and field?
  4. Does the order follow the visual order?
  5. Can you press buttons with Enter or Space and escape any popup?

If you get stuck anywhere, so will a keyboard user. Never remove the focus outline in CSS without replacing it.

ARIA: only when needed

<!-- Good: names an icon-only button -->
<button type="button" aria-label="Close menu">×</button>

<!-- Bad: ARIA that native HTML already provides -->
<div role="button" tabindex="0">Order</div>

ARIA, Accessible Rich Internet Applications, adds roles and names for screen readers. It does not add keyboard behavior. The first rule of ARIA is to use a native HTML element when one exists. Wrong ARIA is worse than no ARIA.

Run a two minute accessibility check

Step 1 of 5

Check the language

View page source and confirm the html tag has a lang attribute.

Try it: fix five problems

This snippet has a missing alt, an unlinked label, a div button, a vague link, and a skipped heading. Fix all five.

Live preview

Quick quiz

1. What does the first rule of ARIA say?
2. Fast way to test keyboard access?
3. Which helps deaf visitors with video?
4. Should you remove focus outlines?

Common mistakes

  • Removing focus outlines. Keyboard users get lost.
  • ARIA on top of the wrong element. role=“button” on a div still lacks keyboard support.
  • Only automated testing. Tools catch about a third of issues. Test by hand too.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Web accessibility
Designing sites everyone can use, including people with disabilities.
WCAG
Web Content Accessibility Guidelines.
Focus
The element currently selected for keyboard input.
ARIA
Attributes that add roles and names for assistive technology.
Lighthouse
A free Chrome audit tool for accessibility, SEO, and performance.

Questions beginners ask

Is a perfect Lighthouse score enough?

No. It means no automated issues were found. Manual checks still matter.

Which screen reader should I try?

NVDA is free on Windows. VoiceOver is built into Mac and iPhone. TalkBack is on Android.

Does accessibility help SEO?

Many basics overlap: headings, alt text, link text, and clear structure.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.