Who this is for. The lead who writes the definition of done, and whoever tests before launch. After this page the site has a written list of what works without JavaScript and a test that proves it.

Decide the list

Write down, for this site, what must work when a script fails to load, is blocked, or has not run yet. For most sites the list is three items:

  • Navigation: every section reachable from the menus.
  • Content: every content page readable to the end.
  • Form submission: every form can be filled in and sent.

A server-rendered page meets all three by default. Menus are rendered by the template, content is in the HTML, and a form built in the admin posts to the platform the ordinary way, with a hidden _csrf field for signed-in visitors. The hybrid parts are where it can go wrong, and the fragment pattern is built for this: the placeholder holds the signed-out version, so the header works when the fragment never arrives (The placeholder and the fetch).

The test

  1. Turn JavaScript off. In Chrome's developer tools, open the command menu (Ctrl+Shift+P, or Cmd+Shift+P on a Mac) and run Disable JavaScript. It stays off while the developer tools are open.
  2. Navigation. From the home page, reach each top-level section and one page two levels down, using only the menus.
  3. Content. Open one page of each layout and read it to the end. Tabs, accordions and carousels must show their content, even if all at once.
  4. Forms. Submit each form with valid answers, then once with an answer missing, and check the result page and the error both appear.
  5. Repeat signed in, for the forms members use.

For a quick check from a terminal, fetch a page and look for a sentence from its body: curl -s https://www.example.com/about | grep "a sentence from the page". If it is not in the HTML, a script is drawing it.

Where it usually fails

  • Content drawn by a script, often a carousel or tab set that builds its panels from data. It also shows empty in the admin's live preview, where scripts do not run by default (In-context editing).
  • A form that only submits through JavaScript: a button with no form around it, or a submit handler that always cancels the browser's own submission. Keep the form a real form that posts, and let the script improve it.