Learn how to test a web page for accessibility: automated tools, a five-minute keyboard and zoom check, screen reader checks, and testing with real people. Understand what automation can and cannot catch, how to report and fix problems, and how to keep them from coming back. Includes a manual test plan lab, a what-can-a-tool-catch quiz, and a live mini page auditor.
Make HTML audio and video work for everyone: captions, transcripts and audio description, keyboard-friendly controls, autoplay and audio control, reduced motion, flashing and seizure safety, labelling embedded players, and a practical checklist for every kind of media, with live demos.
Learn how to build buttons that work for everyone: use the real button element, set the type, name icon buttons, make toggle and disclosure buttons with aria-pressed and aria-expanded, handle disabled and loading states, and avoid fake buttons made from div and span. Includes a toggle lab, a disabled-button lab, and a live button checker.
Learn how to build forms that everyone can complete: visible labels, fieldset and legend, hints and required fields with aria-describedby, the right input types and autocomplete, clear error messages, sensible validation timing, and safe, accessible sign-in. Includes a live field builder, a validation timing lab, and a form checker.
Learn how to build accessible HTML forms: visible labels, grouping with fieldset and legend, hints and instructions, marking required fields, clear error messages with aria-invalid and aria-describedby, autocomplete, keyboard and focus, touch target size, WCAG 2.2 rules for forms, redundant entry and accessible authentication, and a practical testing checklist.
Learn how to make HTML lists accessible to everyone. Understand how screen readers announce lists, why real list markup matters, how to label lists, keep list semantics when removing bullets, build accessible navigation, breadcrumbs, and checklists, and test your lists on CodeHarborHub.
Learn how to build accessible HTML tables. Understand how screen readers navigate tables, use captions, th and scope, the headers and id attributes for complex tables, sortable headers with aria-sort, scrollable regions, layout table pitfalls, and how to test tables on CodeHarborHub.
Learn how to make every image in your HTML pages accessible. Decide between informative, decorative, functional, and complex images, write useful alt text, handle text in images, linked images, SVG, animated GIFs, and test with real tools on CodeHarborHub.
Learn how to build links that everyone can understand and use: meaningful link text, links versus buttons, keyboard and focus, visual styling, links that open new tabs, file and email links, and safe external links. Includes a links-list lab, a link builder, and a live link checker.
Learn what an accessible name is, where browsers get it from (aria-labelledby, aria-label, labels, alt text, content, title), how to write good names, and why the visible label must be part of the name. Includes a live name calculator, a page name audit, and a short drill.
Learn how to build data tables that work for screen reader and keyboard users: when to use a table, captions, th and scope, complex tables, empty cells, sortable columns, buttons and checkboxes in rows, and scrollable wide tables. Includes a table reader lab, a scrolling region lab, and a live table checker.
Learn how to write good alt text: the five kinds of images (informative, decorative, functional, images of text, complex), how to decide which one you have, how to write short, useful descriptions, and how to handle links, charts, SVG, and figures. Includes a decision guide, an alt text writing practice lab, and a live alt text checker.
Learn how aria-describedby adds extra help to a control: form hints and errors, warnings on buttons, dialog text, and accessible tooltips. Understand the difference between a name and a description, why descriptions can be missed, and how to keep them accurate. Includes a description builder lab, a tooltip lab for WCAG 1.4.13, and a live aria-describedby checker.
Learn what aria-hidden really does, when it is safe, and when it quietly breaks your page. Compare hidden, display none, visibility hidden, aria-hidden, inert, and visually hidden text. Never put aria-hidden on something focusable. Includes a hiding-methods lab with real focus tests, a modal background lab, and a live aria-hidden checker.
Learn when and how to use aria-label: naming icon-only buttons, search fields, repeated landmarks, and SVG images; when not to use it (elements that cannot be named, visible text that already works); the Label in Name rule; and how to write short, unique, translatable labels. Includes a name override lab, a label writing practice, and a live aria-label audit.
Learn how aria-labelledby names an element from text that is already on the page: naming dialogs and sections from their headings, building names from several pieces, making repeated buttons unique, how hidden text and self-reference work, and why unique ids matter. Includes a name builder lab, a duplicate id lab, and a live aria-labelledby checker.
Learn how aria-live and live region roles announce changes to screen reader users without moving focus: status messages, errors, search results, chat, and timers. Understand polite versus assertive, aria-atomic, aria-relevant, and why a live region must exist before it changes. Includes a live region lab with real regions, an atomic lab, and a live aria-live checker.
Learn what ARIA roles are, how native HTML elements already have them, and which roles are worth knowing: landmark, widget, live region, and structure roles. Includes a searchable role explorer, a landmark lab that shows what a screen reader's landmark list looks like, and a live roles lab for status, alert, and log.
Learn the difference between ARIA states and properties, the kinds of values they take, and the most useful ones: aria-expanded, aria-pressed, aria-checked, aria-selected, aria-current, aria-disabled, aria-invalid, aria-busy, and aria-controls. Includes a state sync lab that shows what goes wrong when state is not updated, a value tester, and a lab for aria-current and aria-busy.
Learn how to move keyboard focus on purpose: how focus() and document.activeElement work, when to move focus (dialogs, deleted items, form errors, page changes), how to return focus, and how to avoid stealing it. Includes three live labs: a delete-and-lose-focus lab, a dialog focus lab, and a form error summary lab.
Start learning web accessibility: why it matters, who it helps, the four WCAG principles (perceivable, operable, understandable, robust), and a map of every lesson in this section. Includes a live experience simulator, a contrast checker, and a short drill that sorts real barriers into the four principles.
Learn the HTML address element: marking contact information for a page or an article's author, what it is not for (postal addresses in general), mailto and tel links, line breaks, resetting italic styling, privacy and spam concerns, international phone and address formats, and common mistakes, with live examples.
Learn the HTML article element: marking self-contained content such as blog posts, news stories, comments, and product cards, the stand-alone test for choosing article over section, nesting comments, header and footer inside an article, the time element, clickable cards, user-generated content safety, and common mistakes, with live examples.
Learn the HTML aside element: marking content that is related to the main content but separate from it, such as sidebars, related links, pull quotes, author bios, and advertisements, the remove-it test, the complementary landmark, naming asides, responsive sidebar layouts, safe ads and third-party widgets, and common mistakes, with live examples.
Start learning HTML audio and video: the audio, video, source and track elements, built-in controls, captions and subtitles, accessible and responsive media, and the formats browsers can play, with a live format checker and a map of this section.
Learn the HTML audio element: adding sound with src, controls, loop, muted, preload and autoplay, choosing MP3, AAC, Ogg or WAV, fallback content, the autoplay rules, controlling playback with JavaScript, transcripts, and accessibility, with a live audio player you can try.
Learn the HTML autocomplete attribute: helping browsers and password managers fill in names, emails, addresses, phone numbers, and payment details, the most useful autocomplete tokens, shipping and billing sections, current-password, new-password, and one-time-code, when autocomplete off is appropriate, accessibility benefits (WCAG 1.3.5), and security and privacy notes.
Learn the HTML button element: the type attribute (submit, reset, button) and why submit is the default, stable name and value for multiple actions, icons and rich content inside a button, toggle buttons with aria-pressed, disabled versus aria-disabled, loading states, button versus link, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML canvas element: drawing shapes, paths and text with the 2D context, animating with requestAnimationFrame, keeping drawings sharp on high-resolution screens, handling clicks with correct coordinates, making canvas accessible, performance, security and tainted canvases, with live demos.
Learn how to add and write good captions for HTML video: the track element with kind captions, what captions must include (speech, speakers, sounds), timing and reading speed, line length, styling and contrast, open versus closed captions, reviewing automatic captions, and common mistakes, with live checkers.
Learn the HTML details element: building expandable and collapsible content with no JavaScript, the open attribute, exclusive accordions with the name attribute, the toggle event, FAQ patterns, styling the marker, accessibility and keyboard behaviour, printing and find-in-page notes, what not to hide, and common mistakes, with live examples.
Learn the HTML dialog element: modal and non-modal dialogs, showModal() and close(), forms with method dialog, the returnValue, the backdrop, focus handling, closing with Escape or a click outside, alert dialogs, accessibility, security, and common mistakes, with live examples.
Learn the HTML embed element: what it was built for, how src, type, width and height work, why it has no fallback content, how it compares with object, iframe and img, accessibility and security limits, and when to choose something else, with live demos.
Learn the HTML fieldset and legend elements: grouping related form controls, naming a group for screen readers, radio and checkbox groups, split date fields, address blocks, disabling a whole group with the disabled attribute, styling the border and legend, nesting rules, and common mistakes on CodeHarborHub.
Learn how to use the HTML figure and figcaption elements to add captions to images, diagrams, code, quotes and tables. Understand captions versus alt text, numbering with CSS counters, credits and licenses, accessibility, styling, and common mistakes on CodeHarborHub.
Learn the HTML footer element: closing information for a page, article, or section, how a page-level footer becomes a contentinfo landmark, what belongs in a footer (copyright, legal links, contact, sitemap, social links), the small element, sticky footer layouts, accessibility, privacy and consent links, global legal notes, and common mistakes, with live examples.
Learn HTML form validation: the built-in constraint validation attributes, the ValidityState flags, checkValidity, reportValidity, and setCustomValidity, the :valid, :invalid, and :user-invalid CSS pseudo-classes, novalidate, writing friendly accessible error messages with aria-invalid and an error summary, and why the server must always validate again.
Learn how to collect information from visitors with HTML forms. Understand the form element, labels, inputs, input types, textarea, select, buttons, validation attributes, submitting data, accessible forms, and secure form design with live examples on CodeHarborHub.
Start learning the HTML head: what goes inside it, how html, head, title, meta, charset, viewport, link, favicon, style, script and base work together, who reads each tag, and a live look at the head of a real page, with a clickable map of every head element.
Learn the HTML header element: introductory content for a page, article, or section, how it becomes a banner landmark only at page level, the difference between header, head, and headings, skip links, sticky headers and keyboard focus, accessible logos, language switchers, and common mistakes, with live examples.
Learn the HTML iframe element: embedding another page with src and srcdoc, titles for accessibility, size and aspect-ratio, lazy loading, the sandbox attribute, allow and referrerpolicy, why some sites refuse to be framed, and talking to a frame with postMessage, with live demos.
Learn how to write the src and alt attributes of an HTML image. Point to the right file with relative, root-relative and absolute paths, name files well, and write alt text for photos, icons, charts, logos, linked images and decorative graphics in any language on CodeHarborHub.
Learn the HTML input type checkbox: single and grouped checkboxes, the checked attribute, what is sent when a box is ticked or not (and the default value on), required consent boxes, the indeterminate state, select all, fieldset groups, accent-color styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type color: the colour picker, the #rrggbb value format, the black default, input versus change events, preset swatches with datalist, converting hex to RGB, checking contrast for accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type radio: radio button groups with the same name, the value attribute, what is sent, checked and required, keyboard arrow-key behaviour, why you cannot untick a radio, fieldset and legend, an Other option with a text field, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type range: the slider, its min, max, and step defaults, the always-present midpoint value, showing the value with the output element, tick marks with datalist, pairing a slider with a number field, keyboard controls, styling the track and thumb, accessibility with aria-valuetext, and common mistakes on CodeHarborHub.
Learn the HTML input type search: how it differs from text, the clear button, the search keyboard key, the search landmark (the search element and role=search), GET forms with name=q, live filtering, accessible result counts, and common mistakes on CodeHarborHub.
Learn the HTML input types submit, reset, button, and image: how the submit button sends a form, how to use several submit buttons with name and value, formaction and formnovalidate overrides, why reset restores default values (not blanks), implicit submission with the Enter key, preventing double submits, and common mistakes on CodeHarborHub.
Learn the HTML label element: how to name every form field with for and id, wrap controls inside labels, why placeholders are not labels, how labels improve clicking and screen reader support, visually hidden labels, hints and required markers, and common mistakes on CodeHarborHub.
Learn the HTML main element: marking the dominant content of a page, why a page should have only one visible main, what belongs inside and outside it, skip link targets with tabindex, single-page app focus handling, reader modes, layout CSS, and common mistakes, with live examples.
Learn how to add maps to an HTML page: map links, static images, iframe embeds and interactive libraries, building an OpenStreetMap embed from coordinates, click-to-load for privacy, text alternatives with address and directions, keys and terms, accessibility, responsive sizing, and common mistakes, with live demos.
Learn HTML media controls: the built-in controls attribute, what browsers add, how to build your own accessible player with buttons and sliders using the media API (play, pause, currentTime, volume, playbackRate and events), keyboard support, and common mistakes, with a live custom player.
Bring the whole HTML head together: a complete, correctly ordered head template, a checklist for essentials, search, sharing, performance, accessibility, security and global audiences, and tools to test it. Includes a live head auditor that scores your page, and a head generator that builds a complete head for you.
Learn the HTML nav element: marking major navigation blocks as landmarks, building menus with lists, naming several navs with aria-label, showing the current page with aria-current, breadcrumbs and pagination, accessible mobile menu buttons with aria-expanded, which link groups should not use nav, and common mistakes, with live examples.
Learn how to build accessible HTML navigation menus. Use the nav element with lists, mark the current page, style a horizontal menu with CSS, add a mobile toggle button, create breadcrumbs, dropdown safely, and support right-to-left languages on CodeHarborHub.
Learn the HTML object element: embedding PDFs, SVG and other files with data and type, fallback content that appears when a file cannot be shown, nested fallback chains, sizing, scripting a same-origin SVG, accessibility and security limits, and when to use iframe or img instead, with live demos.
Learn the HTML option and optgroup elements: the value, selected, disabled, and label attributes, how text and value differ, grouping long lists with optgroup, disabled options and groups, how the default choice is picked, adding and removing options with JavaScript, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML required attribute: which form controls support it, how it behaves for text, checkboxes, radio groups, selects, and files, the :required and :optional CSS pseudo-classes, how to mark required fields accessibly with aria-required and clear labels, whitespace-only values, and why the server must still check for missing data.
Learn the HTML section element: grouping content by theme with a heading, when to use section instead of div, article, or main, naming a section as a region landmark with aria-labelledby, heading levels and why the document outline algorithm does not work, landing page patterns, and common mistakes, with live examples.
Learn the HTML select element for dropdown lists: building a dropdown with option, the placeholder option pattern with required, what is sent, multiple selection and the size attribute, change events, dependent dropdowns, keyboard use, styling limits, accessibility, and common mistakes on CodeHarborHub.
Learn how to add subtitles in several languages to HTML video: track elements with kind subtitles, srclang and native-language labels, language codes, translation tips, right-to-left and Asian scripts, choosing a language with JavaScript, and common mistakes, with a live multi-language demo.
Learn the HTML summary element: the visible label and toggle control of a details widget, writing clear summary text, what content is allowed inside it, styling or replacing the marker, keyboard and screen reader behaviour, why headings and links inside a summary cause trouble, stable labels, and common mistakes, with live examples.
Learn SVG in HTML: drawing scalable graphics with shapes, paths and text, understanding viewBox, styling with CSS and currentColor, reusing shapes with symbol and use, choosing between inline SVG, img and object, making SVG accessible with title and desc, animation and reduced motion, and security for SVG files, with live demos.
Learn how to give HTML tables a title with the caption element. Understand where caption goes, how it differs from headings and figcaption, how to style and position it with caption-side, number tables with CSS counters, and write captions that help screen reader users on CodeHarborHub.
Learn how to mark up HTML table headings with the th element and the scope attribute. Understand column headers, row headers, the empty corner cell, abbreviations, styling, and how headings help screen reader users understand every cell on CodeHarborHub.
Learn the HTML textarea element for multi-line text: rows and cols, the starting text between the tags, maxlength and minlength, a live character counter, auto-growing height, wrap, resize, how line breaks are sent, showing user text safely, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML track element: adding captions, subtitles, descriptions, chapters and metadata to audio and video with kind, src, srclang, label and default, how WebVTT files work, the TextTrack JavaScript API and cuechange event, cross-origin rules, and common mistakes, with live demos.
Learn the HTML video element: embedding video with src, controls, width, height, poster, preload, muted, loop, playsinline and autoplay, choosing MP4 or WebM, avoiding layout shift, background videos done safely, compressing files, and accessibility, with a live video player you can try.
Learn what web accessibility (a11y) means, why it matters for people, law, business and quality, the common myths, and the one idea that explains everything: the accessibility tree. Includes a live keyboard test of fake and real buttons, a simplified accessibility tree viewer, and a ten-minute self-audit.
Learn what ARIA is and when to use it: roles, properties and states, the five rules of ARIA, why native HTML comes first, what ARIA can and cannot do, and how to check it. Includes a lab that shows ARIA changes meaning but not behaviour, a 'do I need ARIA?' guide, and a live ARIA checker.
Learn how to make every part of a web page work with a keyboard: which elements are focusable, how tabindex and focus order work, how to style focus with :focus-visible, how to avoid keyboard traps, and how arrow keys and roving tabindex work in custom widgets. Includes a live focus-order lab, a focus-style test, and a roving toolbar.
Learn what screen readers are, how they turn HTML into speech and braille, which ones people use, what they announce for headings, links, buttons, forms and images, and how to try one yourself. Includes a live reader that speaks a page using your browser's built-in speech, and a drill that matches code to what is announced.
Learn semantic HTML: choosing elements for their meaning, not their looks. Understand header, nav, main, section, article, aside, footer, address, details, summary, and dialog, why semantic markup helps accessibility, search engines, and maintenance, and how to build a clear page layout, with live examples on CodeHarborHub.
Learn how semantic HTML makes pages accessible: heading outlines, landmarks, lists, buttons versus links, skip links, reading order, and visually hidden text. Includes a live structure navigator that shows what a screen reader user can jump between, and a real skip-link focus test.
Put it all together: build a complete, accessible HTML page layout with header, nav, main, article, section, aside, and footer, add a skip link, style it with CSS grid, keep the reading order sensible, and check it with a practical checklist, with live examples.
Learn the root of every web page: the doctype, the html element, the lang and dir attributes, how the document is split into head and body, and what happens when you leave them out. Includes a live document-skeleton builder and a quirks-mode check.
Learn the HTML meta element: name and content pairs, http-equiv, descriptions, robots, theme-color, color-scheme, and social sharing tags. Includes a live meta tag checker that uses the browser's real parser, and a social card preview builder.
Learn how to write great HTML page titles: where the title shows up, how long it should be, how to structure it for search results and screen readers, what characters are safe, and how to update it in single-page apps. Includes a live tab and search-result preview.
Learn the viewport meta tag: why phones need it, what width=device-width and initial-scale=1 do, why you should never block zoom, safe-area settings for notched phones, and how it connects to responsive CSS. Includes a live viewport reader and a mobile page simulator.
Learn the Web Content Accessibility Guidelines (WCAG): the four principles, the three conformance levels A, AA and AAA, how success criteria work, the rules beginners meet most, and what is new in WCAG 2.2. Includes a searchable success-criteria explorer, a live text-spacing test, and a level drill.
Learn why semantic HTML matters: how browsers turn markup into an accessibility tree, why a real button beats a clickable div, how semantic elements help screen readers, keyboard users, search engines, and teammates, common myths, and a step-by-step refactor from div soup to meaningful markup, with live examples.