If a navigation menu opens only on mouse hover, someone using a keyboard may be unable to get past the homepage. On a small site, that can put most of the content out of reach. Fixes often begin with everyday details: clear link names, useful form errors, and controls that work without a mouse.
Start with the pages people actually use
Begin with the homepage, navigation, contact form, and one representative content page. List the tasks visitors need to complete—finding an article, downloading a file, or sending a message—and repeat those tasks after each change. An automated scan can flag missing labels, empty links, and some contrast problems, but a passing result does not mean a task is usable.
Accessibility is not a separate visual theme. People using different devices or assistive technologies need access to the same information and actions. Build that access into the HTML and content rather than relying on a last-minute overlay.
Make page structure understandable
Use headings for sections, not for appearance
Give each page a descriptive main heading, then use lower-level headings for its sections. The outline should make sense both to someone scanning the page and to someone moving between headings with a screen reader. Do not choose an h3 because its default font looks smaller than an h2; change the appearance with CSS instead.
Match the HTML element to the content. Use lists for lists and tables for data with row and column relationships. Use buttons for actions such as opening a menu or submitting a form. Native elements provide keyboard behavior and information to assistive technologies that a styled div does not provide automatically.
Give links a destination people can predict
“Download the setup checklist” makes sense when read on its own; “Click here” does not. If several links have the same text, check that they lead to the same place. Make links distinct from surrounding text without relying on color alone—an underline is a simple option.
Use a link to go somewhere and a button to perform an action on the current page. That distinction helps keyboard and screen-reader users know what to expect.
Check every task with a keyboard
Put the mouse aside. Use Tab to move forward, Shift+Tab to move back, and Enter or Space to activate controls as appropriate. Every interactive element needs a visible focus indicator. If a CSS rule has removed outlines, add a noticeable :focus-visible style.
Watch where focus goes. It should follow the reading order, not jump from the navigation to the footer and then back to the main content. A hover menu must also work from the keyboard. If it uses an expandable button, that button should expose whether the menu is expanded.
On pages with repeated navigation, a “Skip to main content” link lets keyboard users bypass the menu. Put it near the start of the page and show it when focused. Activate it during testing: it should move focus or the reading position to the main content, not merely change the URL fragment.
Make text and visual information easier to perceive
Check contrast and resizing
Light gray text on white may look restrained in a mockup but be hard to read on the page. Check contrast against the actual background, including on buttons, in form hints, and over images. As a benchmark, WCAG AA calls for at least 4.5:1 contrast for normal text and 3:1 for large text. Do not use color as the only sign of a state; pair a red error border with an error message.
Zoom a desktop page to 200% and check it on a narrow screen. Text should stay readable without overlapping controls or getting clipped. Fixed-height text containers can cut off enlarged text; let layouts reflow where practical so ordinary paragraphs do not require horizontal scrolling.
Describe useful images
Alternative text should convey what an image contributes in context, not catalog every visible detail. For a screenshot that shows where to find a setting, name the setting and its location. If the surrounding text already says everything the image adds, an empty alt attribute avoids repetition for screen-reader users. Decorative images generally need empty alt text too.
Keep essential instructions in HTML text, not only in a screenshot. Someone may need to enlarge the text, use a screen reader, or read the page when the image fails to load. The picture can support the steps without being the only source of them.
Make forms easy to complete and correct
Each input needs a visible label that stays available after someone starts typing. Placeholder text can disappear as soon as a value is entered. Associate labels with their inputs in the markup, keep instructions near the relevant fields, and spell out which fields are required rather than relying on an unexplained asterisk.
When submission fails, identify the affected field and say how to fix it. “Enter an email address in the form [email protected]” is more useful than “Invalid input.” Keep values already entered so the visitor does not have to start over. Try a small contact form yourself: submit it blank, enter a malformed email address, then correct the error using only a keyboard.
Use tools as a starting point, then test the real page
A browser accessibility inspector and an automated checker can flag missing form names, heading issues, and contrast failures they can detect. They cannot reliably tell whether alt text conveys the right information or whether a menu is practical to use. Follow up with keyboard testing and, if available, a quick check with a screen reader on the operating system you already use.
Keep a short issue list: note the page, the affected task, and how to reproduce the problem. Fix shared components first; repairing one navigation menu or form-field style may improve every page. After changing a template, check a long content page and a page with a form to see how the fix behaves in different contexts.
Finish with the contact page. Start at the address bar and press Tab until you reach Send. Check that each field has visible focus and a clear label, that you can correct an error, and that a successful submission shows a readable confirmation message.
