Accessibility obligations
Public-sector, education, healthcare and enterprise buyers increasingly require conformance with WCAG, and most fixes start in the markup.
Technologies · HTML
Semantic HTML development: the layer everything else depends on
Screen readers, search crawlers, AI assistants and browsers all read your HTML before anything else. When the markup is a wall of divs, every one of them gets a worse version of your site.
What is HTML?
Semantic HTML development is writing web page markup with elements that describe what content is (headings, navigation, articles, lists, buttons, form labels) rather than only how it looks. HTML (HyperText Markup Language) is the standard language browsers use to build every web page. When the right elements are used, keyboard users and screen readers can navigate the page, search engines understand its structure, and CSS and JavaScript have a stable foundation to build on.
When the markup needs attention
SEO problems rooted in structure
Missing or skipped headings, links that are really click handlers, and content invisible until JavaScript runs.
Design system foundations
Component libraries where every button, dialog and form field must behave correctly by default across many products.
Long-lived content sites
Sites that will be restyled several times; clean markup lets the visual layer change without rewriting content.
When we recommend something else
- Expecting markup alone to make a complex widget accessible — custom comboboxes, data grids and drag-and-drop also need careful JavaScript and testing.
- Treating an automated audit score as proof of accessibility — tools catch only part of the issues, so manual keyboard and screen-reader checks are still needed.
- Hand-coding a large site page by page — a CMS or component framework should generate the HTML so fixes apply everywhere at once.
HTML and accessibility work we do
Accessible component markup
Buttons, menus, tabs, dialogs, accordions and forms built on native elements, with ARIA added only where HTML has no equivalent.
Accessibility remediation
An audit of key templates against WCAG 2.2, followed by fixes to headings, labels, focus order, contrast and alternative text.
Search-ready templates
Page templates with one clear H1, logical heading levels, crawlable links, metadata and JSON-LD structured data.
Markup refactoring
Replacing div-and-span structures in an existing front-end with meaningful elements while keeping the design intact.
How a well-structured page is layered
L1
Document and metadata
Language, title, description, canonical URL and structured data in the head, generated from the content model.
L2
Landmarks
Header, nav, main, aside and footer regions so assistive technology users can jump straight to what they need.
L3
Content structure
One H1 per page, headings in order, real lists, tables with headers, and images with meaningful or empty alt text.
L4
Interactive elements
Links that navigate, buttons that act, labeled form controls and visible focus, all working with a keyboard alone.
L5
Progressive enhancement
CSS and JavaScript layered on top of working markup, so content and core actions survive a failed script.
Ecosystem we work with
- WCAG 2.2
- WAI-ARIA
- Schema.org JSON-LD
- axe-core
- Lighthouse
- Pa11y
- W3C Nu HTML Checker
- html-validate
- eslint-plugin-jsx-a11y
- NVDA
- VoiceOver
Better for people, crawlers and future redesigns
Usable by more people
Keyboard, screen-reader, voice-control and zoom users can complete the same tasks as everyone else.
Clearer to search engines
Headings, links and structured data tell crawlers and AI systems what each page is about without guesswork.
Lighter pages
Native elements replace scripted equivalents, so less JavaScript is needed to deliver the same behavior.
Easier redesigns
When structure and presentation are separate, a new visual design is a CSS project, not a content migration.
Native element or custom ARIA widget?
| Need | Native HTML | Div with ARIA and JavaScript |
|---|---|---|
| Clickable action | <button> — focusable, Enter and Space work, announced as a button | Needs tabindex, role, key handlers and focus styles |
| Pop-up dialog | <dialog> — built-in modal behavior and Escape to close | Focus trap, inert background and labeling written by hand |
| Disclosure section | <details> and <summary> — expandable with no script | State management and aria-expanded kept in sync |
| Form field | <label> with <input> — name announced, click target enlarged | aria-labelledby wiring, validation messages linked manually |
Related services, technologies and industries
Sources and further reading
Official documentation and guidance if you want to read more about this topic.
HTML questions
What does semantic HTML mean?
Semantic HTML means choosing elements for their meaning (a <nav> for navigation, a <button> for an action, an <h2> for a section heading) instead of generic <div> and <span> tags styled to look right. Browsers, assistive technology and search engines all use that meaning.
Does semantic HTML help SEO?
Yes, indirectly but meaningfully. Clear headings, crawlable links and structured data help search engines interpret a page and qualify it for rich results. It won't replace good content, but poor markup can hide good content from crawlers.
Can you make our existing website WCAG compliant?
We can audit your key templates against WCAG 2.2, fix the issues we find in the markup and components, and retest with automated tools, keyboard navigation and screen readers. Whether a site conforms depends on all its content, including what editors add later, so we also document what editors need to do.
When should ARIA be used?
Only when no native HTML element provides the needed role or behavior. ARIA changes how assistive technology announces an element but adds no keyboard behavior, so misused ARIA often makes a page less accessible than plain HTML.
Does this apply if our site is built with React or a CMS?
Yes. React components, WordPress themes, Shopify sections and Odoo templates all output HTML in the end. Fixing the components or templates once corrects every page that uses them.
Next step
Facing an accessibility requirement or an SEO problem in your markup?
Send us a few key pages. We'll tell you what's wrong in the HTML, what it affects, and what fixing it at the template level involves.