HTML - Accessibility Part 1

May 18, 2026 3:00pm UTC (Check your timezone)

Theory Workshop

Instructors: Jess, Carmen, and Eda

Accessibility

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Importance of Accessibility and Good HTML Structure: What Is Accessibility?

Accessibility is the practice of making our websites in a way that everyone can use them, no matter what their ability or circumstance is. It’s about giving everyone equal opportunity.

Some of the disabilities can include:

There are standards that are known as the “Web Content Accessibility Guidelines” (WCAG) that are developed by the World Wide Web Consortium (W3C) that offer guidance to make our websites more accessible.

These guidelines are organized under four core principles, which are easy to remember with the POUR acronym:

You can use the WCAG Quick Reference to check if you’re following the guidelines correctly.

Importance of Accessibility and Good HTML Structure: What Are Screen Readers, and Who Uses Them?

Screen readers are assistive technologies that not only help visually impaired people access computers, but also help people with cognitive disabilities and allow them to have equal opportunity in accessing education, work and other prospects.

A screen reader is not a text-to-speech device; text-to-speech is only one of its features (there are other features like braille displays, navigation aids, and web browsing assistance).

Major operating systems have screen readers built-in:

Android phones have TalkBack. Go to “Settings > Special Function > Accessibility > Talkback” to activate it. Some Android devices also have Ella and Select to Speak.

Importance of Accessibility and Good HTML Structure: What Are Large Text or Braille Keyboards, and Who Uses Them?

There are large text keyboards and Braille keyboards for people with visual disabilities.

Large text keyboards have the letters, numbers, symbols larger than other keyboards, and some of them have more contrast and brightness. For example, yellow keys with big, black, bold letters/numbers/symbols. They can be backlit so the users can adjust the brightness.

Braille is a tactile reading/writing system where raised dots in specific patterns represent letters, numbers, symbols. Braille keyboards have these raised dots to help users find the keys.

Some keyboards combine both large text and Braille patterns in the keys.

Importance of Accessibility and Good HTML Structure: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?

There are pointing devices such as trackballs, joysticks, and touchpads that are alternatives to the traditional mouse. These are helpful for people with mobility impairments.

A trackball has a large movable ball within a socket. It also has buttons for other functionality. It is stationary, so only moving the ball is enough to control the cursor. A traditional mouse can have a trackball on the side or on top as well.

A joystick is a pointing device designed for games or machinery control. It has a lever that pivots up, down, left, and right. It also may have additional buttons for other functionality. They can be helpful especially for people with tremors and issues like arthritis and carpal tunnel syndrome.

A touchpad is a touch-sensitive, flat device. It allows people to control the cursor by sliding their fingers across the surface. It also has right and left click buttons. Laptops and some keyboards have built-in touchpad devices. They can be helpful as they support multi-touch gestures such as pinch-to-zoom, tap-to-click, etc. They are also helpful for people with low arm or hand movement as well as with issues such as arthritis, because the forelimb can stay stationary while using them.

Importance of Accessibility and Good HTML Structure: What Are Screen Magnifiers Used For?

Screen magnifiers enlarge texts and other elements on a screen. They are helpful for people with low vision and visual impairments.

Most magnifiers have features like customizable zoom, and many of them can allow users to enlarge the display more than 200%. They can help people read texts with smaller fonts, fill out forms more easily where the input is difficult to interact with, etc.

While making our websites, we need to consider:

Major operating systems have at least one screen magnifier built-in:

There are other third-party tools:

Importance of Accessibility and Good HTML Structure: What Is Voice Recognition Software Used For?

Voice recognition tools help people use their voice to perform tasks, instead of using devices like a mouse and keyboard. They can be helpful for people with visual, cognitive and mobility impairments. They are helpful not just for people with disabilities, but for people who might find it easier to perform tasks with voice commands as well.

Some examples include:

Importance of Accessibility and Good HTML Structure: What Are Some Common Accessibility Auditing Tools to Use?

We should make sure that our websites and digital content meet accessibility standards.

An accessibility auditing tool can help us with it by reporting accessibility issues. However, we should not rely on them entirely because they usually find only a third of all possible accessibility issues. That’s why we should also do manual testing, especially by people with disabilities to ensure the accessibility of our websites.

Some accessibility auditing tools are:

Importance of Accessibility and Good HTML Structure: How Does Proper Heading Level Structure Affect Accessibility?

When we use logical heading hierarchy, like this basic example:

1<h1> Music Store Page</h1>
2
3<h2>Featured Albums</h2>
4<p>Check out our featured albums below:</p>

It’s not only good for visual help such as proper use of font sizes, but it also helps with accessibility. It provides navigation in a way that people can jump to different sections on the page (if we add associated links, for example). It’s helpful for finding information easily because it reduces the cognitive load. Using well-formed headings also improves the SEO of our sites.

We should consider:

Debug a Coding Journey Blog Page

We’re going to find and work on some accessibility issues on this exercise together!