How to Run a Basic Website Accessibility Review
A beginner, hands-on guide to run a basic website accessibility review with browser inspection, exact code-level changes and verification.
By the end: You will implement and verify run a basic website accessibility review on a real local/staging page.
You will implement and verify run a basic website accessibility review on a real local/staging page.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- A page you are allowed to edit
- Access to the HTML/CSS/JS or CMS/template that renders it
- A modern browser with Developer Tools
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Work on a local or staging copy
Open the project containing the website source. If this is a production site, use a staging copy or backup before structural changes.
A browser page is rendered from source files/CMS output; DevTools edits do not save back to the server.
Move it into the actual source and reload.
Open the page in a modern browser
Load the page, then press F12 or Ctrl+Shift+I (Windows/Linux) to open Developer Tools.
DevTools lets you inspect the DOM, applied CSS, computed sizes, requests and console errors.
Move it into the actual source and reload.
Navigate the page with keyboard only
Use Tab, Shift+Tab, Enter and Space.
Do not touch the mouse during this pass.
Move it into the actual source and reload.
Check focus visibility
Watch the active element at every Tab press.
A user needs to know where keyboard action will occur.
Open/close menus and dialogs
Test mobile menu, accordions, modals and cookie controls.
Custom widgets are common failure points.
Inspect heading order
Read h1/h2/h3 structure.
Headings communicate page organization to assistive technology.
Inspect form labels
Click labels and use accessibility tree if needed.
Placeholder-only fields are insufficient.
Review image alt decisions
Check informative images have useful alt and decorative images empty alt.
Alt quality is contextual; automated scans cannot decide meaning for you.
Use the Styles/Computed panels to trace the final value instead of adding stronger selectors blindly.
Check color contrast
Use browser/accessibility audit tools for text/background pairs and interactive states.
Automated tools can identify many numeric contrast failures.
Zoom to 200%
Check page remains readable and controls reachable.
Rigid layouts can fail when text enlarges.
Run an automated audit
Use browser Lighthouse/accessibility checker or approved tool as a supplement.
Passing automation does not prove full accessibility.
Write a manual issues list
Record issue, affected page/component, reproduction steps and severity.
Accessibility review should produce actionable fixes.
Test the public/staging URL logged out
Open the final URL in a private/incognito window.
CMS/admin sessions can hide caching, permission or styling differences.
Check caching, loaded asset URL, theme/template and logged-out view.
Document the changed file/rule
Record the file/template/component and purpose of the change in the project notes or version-control commit.
Future maintainers should not have to reverse-engineer why a rule exists.
Check caching, loaded asset URL, theme/template and logged-out view.
Reload the real page and reproduce the result after all temporary DevTools edits are gone.
Concrete examples
Troubleshooting
Move it into the actual source and reload.
Check caching, loaded asset URL, theme/template and logged-out view.
Use the Styles/Computed panels to trace the final value instead of adding stronger selectors blindly.
The change has a traceable reason/location.
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.