Total Validator Basic vs. Pro: Is the Free Version Enough?

How to Use Total Validator Basic to Fix HTML and Accessibility Issues

Total Validator Basic is a free tool that checks HTML, accessibility, and broken links. This guide shows a concise, step-by-step workflow to run Total Validator Basic, interpret results, and fix common HTML and accessibility problems.

1. Install and open Total Validator Basic

1. Download and install Total Validator Basic from the official site (choose the browser extension or desktop app).
2. Launch the app or open the browser extension and enter the URL of the page you want to test.

2. Run a validation check

1. Enter the page URL or load the local file.
2. Start the check — Total Validator Basic will run HTML validation, accessibility checks, and link tests (depending on version and options).

3. Understand the results dashboard

• Errors: Critical HTML problems that can break pages (e.g., unclosed tags, invalid attributes).
• Warnings: Less severe issues that may still affect rendering or semantics.
• Accessibility issues: Problems that affect users with disabilities (e.g., missing alt text, improper heading structure, low contrast).
• Broken links: Links that return 4xx/5xx responses or timeouts.

4. Fix common HTML problems

1. Unclosed or mismatched tags
   • Locate the line/element referenced by the validator.
   • Ensure each opening tag has a matching closing tag and nesting is correct.
   • Example: replace Text with Text.
2. Invalid attributes
   • Remove or correct attributes not allowed on that element (e.g., align on modern HTML).
   • Use standard attributes per the HTML specification.
3. Deprecated elements
   • Replace deprecated tags (like ) with CSS for styling.
4. Encoding and DOCTYPE
   • Ensure a proper DOCTYPE () and correct character encoding (UTF-8 meta tag).

5. Fix common accessibility issues

1. Missing or empty alt attributes
   • Provide concise, descriptive alt text for informative images.
   • Use alt=“” for purely decorative images to skip screen readers.
2. Improper heading structure
   • Use headings (h1–h6) in hierarchical order. Ensure a single h1 per page representing the main topic.
3. Form labels
   • Associate labels with inputs usingor wrap input in a label.
4. Keyboard accessibility
   • Ensure interactive elements are focusable (use buttons/anchors, not only divs) and operable via keyboard (Enter/Space).
5. Color contrast
   • Increase text/background contrast to meet WCAG AA (4.5:1 for normal text). Use CSS to adjust colors.
6. ARIA usage
   • Use ARIA roles and attributes only when native HTML cannot convey semantics. Avoid redundant or incorrect ARIA.

6. Re-run validation and iterate

1. After applying fixes, re-run Total Validator Basic to confirm issues are resolved.
2. Address any remaining items, prioritizing errors and accessibility failures.

7. Best practices to prevent future issues

• Use semantic HTML and modern standards (HTML5).
• Validate pages during development and before deployment.
• Integrate accessibility checks into your development workflow (CI or pre-deploy).
• Keep content and templates consistent with proper headings and labels.

8. When to consider upgrading or further help

• If you need deeper reporting, batch site scans, or advanced checks, consider Total Validator Pro or other accessibility testing tools.
• For complex accessibility fixes or legal requirements, consult an accessibility specialist.

This workflow gets you from running a basic check to fixing the typical HTML and accessibility issues reported by Total Validator Basic.