HTML Validator

Webアクセシビリティ チェックリスト

Option 1: Bookmarklet (Full Current Page DOM HTML Validator)

Add the "Validate" link below to your bookmark (or "favorites") toolbar to create a bookmarklet. You may need to expose the bookmark bar in the browser first. To add it, drag the link to the toolbar, or copy the link destination (e.g. in Windows, tab to the link, activate the menu key), and create a bookmark with the JavaScript in the URL field (to bookmark a page, use Ctrl + D on Windows or Cmd + D on Mac).

Validate (Code Updated 2019-04-26 11:10 ET) Verified to be compatible with Firefox, Chrome, Safari, and Edge. Source code available below.

This bookmarklet uses the W3C HTML Validator service, with several advantages (and one noteworthy disadvantage) over the W3C's online form. The bookmarklet:

• Allows you to validate the page you're currently on from within your browser
• Allows you to validate password-protected pages
• Allows you to validate local files and localhost files
• Captures the full DOM, after JavaScript is applied, not just the raw source code (especially useful for single-page apps and dynamic content)
• Allows you to validate different states of a web page (with modals activated or not, with form error messages on the screen or not, with regions expanded or not, with custom controls activated or not, etc.). To do this, get the page to the state you want, and validate with the bookmarklet, and repeat on the same page as many times as necessary to validate all the states.

Important note: This bookmarklet will NOT check the raw HTML. This is both a feature and a "bug." It's a feature in the sense that we do need to check the end result after JavaScript is applied, which this bookmarklet does. It's a bug in the sense that it can't evaluate the HTML before the browser applies basic DOM fixes. Ideally, you would validate both the final DOM with the bookmarklet (for dynamic content), and the HTML from the raw source code with the W3C online tool (for pre-DOM content).

Option 2: Partial Page Validator

Use this form to validate partial web pages, like fields in content management systems, database fields, or included files. Paste in the content and submit the form.

Note: This form will add an HTML5 doctype, an html tag, a head tag, and a body tag, then submit the content to the W3C HTML Validator

Option 3: Validate Full Source Code by URL, File, or Text Input

The original W3C HTML Validator service can handle all these modes of input.

(function () { 
    var doctypeNode = document.doctype;
    var doctypeHtml = "<!DOCTYPE "
    + doctypeNode.name
    + (doctypeNode.publicId ? ' PUBLIC "' + doctypeNode.publicId + '"' : '')
    + (!doctypeNode.publicId && doctypeNode.systemId ? ' SYSTEM' : '') 
    + (doctypeNode.systemId ? ' "' + doctypeNode.systemId + '"' : '')
    + '>';
    
    var htmlWrapper = document.documentElement.outerHTML;
    var allContent = doctypeHtml + htmlWrapper;
    
    var validatorForm = document.getElementById('deque-w3c-validator-bookmarklet');
    if (validatorForm) {
    validatorForm.remove();
    }
 var form = document.createElement('form');
    form.id = 'deque-w3c-validator-bookmarklet';
    form.method = "POST";
    form.action = "https://validator.w3.org/nu/?showsource=yes&nocache=" + Math.random();
    form.target = '_blank';
    form.enctype = 'multipart/form-data';
    
    var textarea = document.createElement('textarea');
    textarea.name = 'content';
    textarea.value = allContent;
    
    form.appendChild(textarea);
    
    document.body.appendChild(form);
    
    form.submit();
    
    var validatorForm = document.getElementById('deque-w3c-validator-bookmarklet');
    if (validatorForm) {
    validatorForm.remove();
    }
})();