Chapter 8: Accessibility in Everyday HTML
Accessibility begins with the gentle craft of writing HTML that makes sense to both people and machines. A reader should be able to move through your page with ease whether they use a mouse, a keyboard, a screen reader, or a tool that digests your content on their behalf. This chapter shows how small choices such as clear alt text, meaningful landmarks, and friendly metadata can open your pages to everyone. These ideas live in the everyday structure of HTML rather than in advanced code, which makes them ideal habits to build early.
Every tag carries a tiny hint of intention. Headings form a natural outline, paragraphs carry ideas in sequence, and links point toward action. When these pieces line up well, assistive tools can paint a clear mental picture of your page. Good accessibility is not a bolt-on feature; it grows from simple, steady markup that explains itself. As you read through the following sections you will see how each technique adds another layer of clarity without changing the visible design.
This chapter also touches on helpful metadata such as lang, title, ARIA attributes, and structured descriptions. These elements guide screen readers, crawlers, and other automated tools by whispering meaning in places humans may never see. Taken together they form a quiet support system that lets your content travel smoothly across devices, languages, and abilities.
Alt text that helps everyone
Alt text tells a reader what an image represents. A screen reader speaks it aloud; search engines use it to understand the topic; and when a connection fails the browser shows it in place of the missing picture. A short phrase is usually enough. Describe the purpose of the image rather than the pixels. If the image is purely decorative you can use an empty alt attribute so assistive tools skip it. This keeps the flow clean and avoids cluttering the experience with details that serve no real meaning.
A helpful alt description captures intent. A chart might be described by its trend rather than its colors; a product image might highlight what makes the item useful; a portrait might name the person and their role. Each piece of alt text becomes a small companion for browsers that cannot display the image and for readers who cannot see it. When used with care it turns visuals into shared understanding.
alt="". This tells assistive tools that the element adds no information.
When alt text meets metadata
Alt text often works alongside attributes such as title or ARIA descriptions. These extra hints help when an image acts like a control or when more context is needed. Screen readers combine these clues to build a full understanding, so keep the message clear and consistent across each attribute.
Semantic roles and landmarks
HTML provides many elements that describe the shape of a page. Tags such as <header>, <nav>, <main>, <aside>, and <footer> act as landmarks. Screen readers use them as navigation anchors, letting the reader jump to the main content, browse the navigation, or explore side information. These landmarks also help crawlers understand how your page is organised.
Most built-in HTML elements carry natural roles. A list is a list, a button is a button, and a heading is a point in the outline. When you use these elements as intended you give assistive technology a set of trusted patterns to follow. If you ever create a custom widget or repurpose an element you can use ARIA roles to describe its purpose. These roles behave like small explanatory notes for tools that cannot see the visual styling.
Metadata that guides structure
Some metadata lives above the page content. Attributes such as lang tell a screen reader which voice and pronunciation to use. <meta> tags can describe authorship, topics, summaries, and character encoding. Crawlers and AI tools use this information to classify the page, build previews, or understand relationships. These pieces do not alter the layout yet they give your content a stronger identity.
Keyboard friendly thinking
A page that works well with a keyboard shows a clear focus outline, respects logical tab order, and responds reliably to common keys. Many people navigate this way because it is quick, comfortable, or necessary. The browser follows the source order of your HTML, so a well-structured document becomes a smooth keyboard journey. Each link, button, or form control should be reachable and obvious when highlighted.
Focus style is one of the simplest improvements you can add. A visible outline makes the active element easy to spot and gives confidence during navigation. Avoid disabling outlines because they are essential for non-mouse users. Instead you can restyle them so they fit the look of your page while staying bold enough to see. Even a small color highlight or a thicker border can make a meaningful difference.
Custom controls need a little extra care. A script-driven button should still behave like a button with keyboard activation. A carousel should respond to arrow keys. A hidden menu should open and close in predictable ways. ARIA attributes such as aria-expanded, aria-controls, and aria-label give these elements the clarity that built-in elements already enjoy. These small touches make your page feel steady and welcoming for every kind of reader.