Check page structure
Good structure helps screen readers, keyboard users and search engines understand the page.
- Use one clear H1 per page.
- Keep heading levels in a logical order.
- Use landmarks such as header, nav, main and footer.
Make a Website Accessible
Make a website more accessible by checking the basics that affect real users first: structure, keyboard access, contrast, forms, alt text and readable responsive layouts.
Problem statement
What this workflow solves
Target outcome
A website with stronger accessibility foundations and a repeatable checklist for future pages.
Interactive workflow
Work through Website accessibility
Track each step, focus the current task and copy a starter outline for your project notes or implementation plan.
0% complete
Check page structure
Good structure helps screen readers, keyboard users and search engines understand the page.
- Use one clear H1 per page.
- Keep heading levels in a logical order.
- Use landmarks such as header, nav, main and footer.
Starter codeCopy and adapt this outline for the workflow.
<section aria-labelledby="make-website-accessible-title">
<p>Website accessibility</p>
<h2 id="make-website-accessible-title">Make a Website Accessible</h2>
<p>A website with stronger accessibility foundations and a repeatable checklist for future pages.</p>
<ol>
<li>Check page structure</li>
<li>Test keyboard navigation</li>
<li>Review colour and content</li>
</ol>
</section>Best practices
Work this way
These are the patterns that keep the workflow practical, accessible and easier to maintain.
Use one clear H1 per page.
Tab through header, content links, forms and footer.
Check contrast for text, buttons and links.
Common mistakes
Avoid these traps
Relying on colour alone to communicate state or errors.
Skipping keyboard testing until the end of the project.
Using placeholders as the only form labels.
Checklist
Step-by-step workflow
Follow the steps in order, then use the resource sections when you need a tool, reference or UI pattern.
Test keyboard navigation
A site should be usable without a mouse before visual polish is considered complete.
- Tab through header, content links, forms and footer.
- Make focus states visible on every interactive element.
- Avoid keyboard traps in menus, modals or custom controls.
Review colour and content
Readable text, meaningful links and useful image descriptions are everyday accessibility wins.
- Check contrast for text, buttons and links.
- Write link text that describes the destination.
- Use alt text for informative images and empty alt for decorative images.
Related resources
Tools, cheatsheets and components
Use these linked DevKitYard sections when the guide moves from planning to doing.
Related Tools
Related Cheatsheets
ElementYard CTA
Open ElementYardReview accessible UI patterns in ElementYard
Use ElementYard to visually adjust spacing, hierarchy and component states after accessibility checks.
FAQ
Website accessibility questions
What accessibility checks should I do first?
Start with headings, keyboard navigation, visible focus states, colour contrast, labels and useful link text.
Does accessibility only help screen reader users?
No. Accessibility improves keyboard use, readability, mobile usability, form completion and general product quality.
Next steps
Keep moving
Accessibility CheckerReview common accessibility checks.HTML CheatsheetReview semantic landmarks, forms and tables.Form ComponentsReview accessible form structure.Review accessible UI patterns in ElementYardUse ElementYard to visually adjust spacing, hierarchy and component states after accessibility checks.