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.