WDD 231: Web Frontend Development I

W01 Learning Activity: Testing and Evaluation

Overview

In this course, you are expected to continuously test your development work against established standards in the industry and specifically for this class in the areas of design, structure, usability, and accessibility. This module provides some tools that can be used to test your development work.

Tools Used in this Course

Page Audits

Many assignments have an audit report that you can use to check for compliance to development standards. These audit tools are linked in the Testing section of the assignment. The report provides information on required elements and some content. Notes are provided to prompt you on what needs attention.

• Items marked with a '✅' appear to meet the standards.
• Items marked with an '❌' need to be fixed.
• Items marked with '👀' need to be further reviewed for content.
• Some items are just informational and are proceeded by the character '📑'.

Browser DevTools

Every modern web browser includes Developer Tools (DevTools) that provide comprehensive information about the page being inspected. These tools are essential in the development process.

• Reference: Browser DevTools
• Device Simulation – Device Mode - Approximate viewport simulation for responsive design review.
• Panels used in this course
  • Elements: Inspect elements with detail for both HTML and the CSS cascade/specificity application.
  • Console: View the console output for the document.
  • Sources: Debugger tools to step through programs using breakpoints and watches.
  • CSS Overview: A summary of the CSS used on the page. Helps identify contrast and unused CSS issues.
  • Lighthouse: page auditing on accessibility, best practice, and search engine optimization in different viewport sizes.
  • Network: Determine overall page weight. Remember to empty cache and hard reload the page when testing.
  • Application: Monitor the Storage object including localStorage.
  • Animations: The Animations tab automatically detects animations and sorts them into groups.
  • Show Coverage helps identify unused CSS and JavaScript by showing overall usage on the document.

Web Developer Extension

Browser extensions are small, dependent, software modules that allow users to customize and enhance their browsing experience. Browser extensions are managed within the browser settings. Access to the settings vary but are similar between browsers using the upper right menu access button ( ••• ≡ ) in the browser window. For example, in Google Chrome, you can manage extensions by navigating to chrome://extensions.

The Web Developer extension is used to help us validate HTML markup and CSS. Validation means that you check the document to see if it follows the rules of the language being checked. This is similar to checking the spelling and grammar of document of a spoken language. Note that these validator tools are just helping us find issues which may cause layout and style mis-interpretations by the browser. Browsers do the best they can to interpret markup and code by filling in the blank where needed. As a developer, you will want to follow best practices and avoid errors and warnings in validation. The web developer extension tool will help you.

The Web Developer browser extension provides access to some endorsed validation and page checking tools including:

• W3C HTML validation,
• W3C CSS validation,
• W3C Link Checker, and
• WAVE accessibility.

This extension also provides access to local file validation when you are running Live Server locally.

Activity Instructions

You will install the extension on your browser in this activity to be used throughout the course. In the end, the extension should appear and be ready to use on your browser toolbar.

1. Install the Web Developer browser extension.

   You may elect to add an extension to your selected browser using the browser tools that you are familiar with versus navigating to these instructions and link. For example, using the Chrome Web Store to find and install extensions.

2. Follow the directions and install the browser extension.
3. In your browser, navigate to this web 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 containing info, errors, and warnings. Some errors propagate other errors meaning that if they are fixed, other errors will go away because the errors were related and accumulated.
      Find the error with closing the main element. What is the error and how might it be fixed?

      Stray end tag main. The line number is given so most likely there is not a matching opening tag.
      ☑️ In this case, remove the extra closing </main> tag.

   2. Validate the CSS: Go to the Tools tab and click Validate CSS. Note the results.
      What error indicates that a named property does not exist? What is the probable fix?

      Property margin doesn't exist. A clue is given by the validator that the closest matching property is ☑️ margin.

   3. Validate the accessibility. Go to the Tool tab and click Validate Accessibility. Note the resulting report.
      Where is the contrast error found in the document? How can that be fixed?

      A very low contrast error is found on the last paragraph. The two colors used for the background and foreground need to have more color separation. Contrast ratios can be checked using contrast-ratio.com. Currently the background is #dddddd and the foreground is #777777 which is a ratio of 3.29.
      ☑️ Just changing the foreground to a darker gray like #444444 would provide sufficient contrast at 7.17.

4. Note that if the document that you want to check is local (running off your localhost or file system), you will need to use the validate local link options provided.