Non-Functional Requirements

SEO

You can assess SEO using PageSpeed Insights.

Accessibility

You can evaluate WCAG compliance using WebAIM. Here is the recommended approach for handling the report:

You MUST fix ALL the Errors.
You SHOULD address the Contrast Errors, as much as possible.
It is advisable to address the Alerts.
The Features, Structural Elements and ARIA criteria demonstrate how tools like search engines or screen readers perceive your page. If these aspects are logical, well-structured, and accessible, your page will have a higher chance of reaching the target users.

Some articles related to Accessiblity:

Create accessible forms

Security

You can assess security using Mozilla Observatory or ImmuniWeb.

HTTP Observatory

There are several tests to perform on this tab, but the Frontend team should pay attention to the following items:

Content Security Policy
To pass this test, minimize the use of inline scripts and styles by moving them into asset files and referencing them in the page.
For elements that cannot be moved to asset files, add the nonce="some-randome-string" attribute to the script or style element, as shown in the sample below:
```
<script nonce="mNeAPq+J[?Y$N6g^H{P3">
  // some script
</script>
<style nonce="mNeAPq+J[?Y$N6g^H{P3">
  /* style */
</style>
```
Then, include those nonce values in the CSP header and disallow unsafe-inline for both script-src and style-src, and unsafe-eval for script-src. Note that for the Frontend part, the randomness is not crucial; you only need to demonstrate how it works, and the Backend team will handle the actual implementation.
Subresource Integrity (SRI)
SRI recommends adding the integrity attribute to external resources. For example:
```
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
  crossorigin="anonymous">
```
The attribute contains the hashed value of the resource's content. If the content is altered, such as in the case of the server being compromised by hackers and modifying the content, the hash will no longer match, and browsers will refuse to execute it.

In reality, it's likely that your website may fail this test as many common resources are dynamically updated by default. For example, if you use the Google Tag Manager script, its content may change without prior notice. However, this does not mean we should underestimate the importance of this test. Apply SRI to any resources where it is applicable.

Nu Html Checker

W3C's Nu Html Checker, also known as Validator.nu, is a tool provided by the World Wide Web Consortium (W3C) for validating HTML documents. It helps web developers and designers ensure their HTML code adheres to the standards and specifications set by the W3C. Here's a brief overview:

Features of W3C's Nu Html Checker

HTML5 Validation: The tool primarily focuses on validating HTML5 documents, checking for syntax errors, and ensuring the code conforms to the latest HTML5 specifications.
Accessibility Checking: It can identify potential accessibility issues in the HTML code, helping to create web pages that are more usable for people with disabilities.
Customizable Options: Users can customize validation options, such as specifying the document type or setting the language for error messages.
Error and Warning Reports: The checker provides detailed reports on errors and warnings found in the HTML code, along with suggestions for how to fix them.
Support for Other Markup Languages: Besides HTML, the Nu Html Checker can validate XHTML and SVG documents.

Usage

You can use the Nu Html Checker in various ways:

Online Interface: The most common way to use the checker is through its online interface, where you can paste your HTML code, upload an HTML file, or enter a URL to be validated.
Command Line Interface (CLI): For developers who prefer using the command line, the Nu Html Checker can be run as a command line tool. This is particularly useful for integrating validation into automated build and deployment processes.
API: The Nu Html Checker provides an API that allows for programmatic validation of HTML documents. This can be integrated into web development workflows to ensure continuous validation.
Integrated Development Environment (IDE) Plugins: Some IDEs offer plugins or extensions that integrate the Nu Html Checker, providing real-time validation as you write your code.

Benefits

Standards Compliance: By validating HTML documents, developers can ensure their web pages are compliant with current web standards, which improves compatibility across different browsers and devices.
Improved Accessibility: Identifying and fixing accessibility issues helps make web content more accessible to users with disabilities.
Better User Experience: Valid HTML leads to fewer rendering issues, which enhances the overall user experience.
Search Engine Optimization (SEO): Well-structured and standards-compliant HTML can positively impact SEO, making web pages more discoverable by search engines.