Software Development | Web Developer Extension

The Web Developer Extension

Overview

To aid development and reviews, we use a browser extension named Web Developer. It provides quick access to standard validation and page checking tools, including W3C HTML validation, W3C CSS validation, and WAVE accessibility checks.

"The Web Developer extension adds various web developer tools to a browser. The extension is available for Chromium based browsers, Firefox, and Opera, and will run on any platform that these browsers support including Windows, macOS, and Linux." – chrispederick.com

Extensions

Browser extensions are small software modules that add features to a browser. Extensions are managed in the browser's settings, usually through the menu button ( ••• or ≡ ) in the upper-right corner of the browser window. For example, in Google Chrome you can manage extensions by navigating to chrome://extensions.

For an overview of browser extensions, see the Browser extension article on Wikipedia.

Document Validation

We use the Web Developer extension to validate HTML and CSS. Validation checks a document to see whether it follows the rules of its language, much like checking the spelling and grammar of a document written in a spoken language. Validators help you find issues that may cause the browser to misinterpret your layout and styles. Browsers try to fill in the gaps when markup or code is wrong, but as developers we should follow best practices and fix validation errors and warnings.

Activity Instructions

In this activity you will install the extension so it is ready to use from your browser toolbar.

  1. Install the Web Developer extension for Chrome or Edge or Firefox, and follow the browser's prompts to add it.

    Pin the extension to your toolbar so it is easy to reach.

  2. In your browser, navigate to this validation activity page and complete these tasks:
    1. Validate the HTML: Click the Web Developer extension, go to the Tools tab, and click Validate HTML. Note the results, which contain info, errors, and warnings. Some errors cause other errors, so fixing one can make several others go away.
      Find the error about closing the main element. What is the error, and how might it be fixed?

      Stray end tag "main". The validator gives the line number; the extra closing tag has no matching opening tag.
      ✔ Remove the extra closing </main> tag.

    2. Validate the CSS: On the Tools tab, click Validate CSS. Note the results.
      Which error says that a property does not exist? What is the probable fix?

      Property "margn" doesn't exist. The validator suggests the closest matching property.
      ✔ Correct the spelling to margin.

    3. Validate the accessibility: On the Tools tab, click Validate Accessibility. Note the resulting report.
      Where is the contrast error in the document? How can it be fixed?

      A very low contrast error is found on the last paragraph. The background and foreground colors need more contrast. You can check contrast ratios with the Contrast Ratio tool. The background is #dddddd and the foreground is #777777, a ratio of 3.29:1, which is below the 4.5:1 WCAG AA minimum for normal text.
      ✔ Changing the foreground to a darker gray such as #444444 raises the ratio to 7.17:1.

  3. To check a document that is on your own computer (not yet published), use the extension's Validate Local HTML and Validate Local CSS options.

Optional Resources