HTML semantics and accessibility
The markup under an interface quietly settles a lot. Element choice decides whether a search engine can read your product, and whether the software a blind visitor uses can describe it. It also decides whether someone who cannot use a mouse can use it at all.
01Overview
What markup is, and what it silently settles
HTML is the markup that says what each part of a page is: a heading, a list, a button, a table, a form field. Browsers build the accessibility tree from it, which is the structure assistive software reads. It has been a living standard since 2011, so there is no version to choose. Styling is CSS; the browser APIs are HTML5.
02Capabilities
Three places the element choice actually gets made
In a component-based front end you still write markup. You write it once per component, and then live with it on every screen that component reaches.
- Semantics
Markup assistive software can work with
Landmarks, real headings, labelled fields, tables that are tables. The right element gives you focus handling, keyboard behaviour and the correct role for nothing, and every one of those is work you own by hand if you choose wrong.
- Components
Markup as part of the component contract
In React or any component library, the element a component renders is part of its public contract, along with which ARIA attributes it accepts. ARIA attributes are the extra labels that describe a control to assistive software. We settle both when the component is designed, which is what design systems work is for.
- Machines
Markup a crawler can read
A heading hierarchy that matches the document, structured data where it applies, and content present in the response rather than assembled later. This is what makes a page extractable, and it matters in regulated sectors like fintech where accessible, auditable public content is not optional.
03Fit
Who is complaining, and what that usually means
People rarely arrive here with a markup question. They arrive with a complaint, a failed review, or a customer who cannot finish a form. Each of the seven rows below names the fix that complaint needs, and two of them have a page of their own.
| The complaint | What it usually is |
|---|---|
| Keyboard users say they cannot reach half the controls | Fix the shared componentA plain box carrying a click handler where a button belongs, copied into every component that borrowed the pattern. See React for why one component makes it product-wide. |
| We added accessibility attributes everywhere and it got worse | Take most of them offARIA attributes do not repair a wrong element. The correct element gives you the role, the focus and the keyboard behaviour with no attributes at all, and wrong ones are worse than none. |
| Our forms failed a review | Fix the labels firstA grey hint inside the box is not a label. It disappears the moment somebody types, and the field then has no name for assistive software to announce. |
| The headings were picked for how big they look | Keep the level, style the classNothing changes visually, and both the reading order and the document outline come back. This is the cheapest item on the whole list. |
| We need a combobox, a tree grid or a rich text editor | Different pageDo not hand-roll it. Take a maintained accessible component library, for example Material UI. Getting one of these right is a project, not a component. |
| A customer or a regulator named a standard we have to meet | Target firstAgree the target first, because it changes design and component decisions rather than only the test plan. An independent read is UX consulting or a quality audit. |
| The layout breaks, but the structure is fine | Different pageThat is styling rather than markup. See CSS, and expect the fix to be about content the design never anticipated. |
Scope
What we own when we build an interface is element choice and everything it decides. That means every control reachable with a keyboard, every field carrying a name, focus landing somewhere sensible after an action, and headings that describe the page rather than the type scale. We build to WCAG 2.2 AA, which is the standard most accessibility requirements point at. unicrew has been building web interfaces since 2012, with 100+ senior in-house engineers across six countries. Our information security is certified to ISO 27001:2022. Where the whole front end needs an owner, that is front-end development.
04Stack
What the markup layer sits between
The four neighbours of the markup layer, each with a page of its own.
05Questions
What marketing and compliance owners ask us first
These arrive more often from the people who own the complaint than from the people who own the code. Answered without jargon on purpose.
As a version decision, nothing. HTML has been a living standard since 2011, so there is no HTML6 coming and no HTML4 choice to make. In conversation the two words have split apart. HTML now means markup and semantics, which is this page. HTML5 means the browser platform that shipped alongside it: video, canvas, offline storage, geolocation. That is the HTML5 page.
More, not less, because the markup decision is now made once inside a component and repeated everywhere that component is used. A component rendering a plain box where a button belongs turns one mistake into a product-wide defect, and the fix has to reach every consumer. That is why we treat the rendered element and the keyboard behaviour as part of a component's public contract.
We review markup, component semantics and keyboard behaviour inside design and build work, and as a standalone read through UX consulting or a quality audit. Be clear about what you need. A list of defects to fix is a different exercise from a formal conformance statement against a named standard, and the second one needs its target agreed up front.
It does not rank a page on its own, and anyone promising that is guessing. What it decides is what can be extracted: a correct heading structure, content present in the response rather than assembled after load, and real text instead of pictures of text. Semantics is a precondition for being quoted accurately by a search or answer engine, not a ranking lever.
Three shapes, and which fits depends on how settled the scope is. Time and materials is billed hourly and quoted per project, which suits work still moving. Fixed price is outcome based, and we only offer it once the first read is done, because a fixed number on a component library nobody has opened is a guess with a contract around it. Team extension is billed monthly per engineer.
Somebody told you the product is not usable?
Send us a link and tell us who is struggling with it. You will get an engineer's read on whether this is one component repeated everywhere or a handful of separate fixes. We will also say where web development or design work would pick it up.