Handling non-javascript fallback pages without violating WCAG guidelines

Question

I used the demo version of powermapper tools online to scan my pages and it presents the following issue to a page I'm about to explain.

Basically, a page that I have is a fallback page for clients that want to view my website and that don't have javascript enabled.

Such links are meant to perform intended actions only when javascript is enabled. I'll explain in code for those that are confused:

<a ID="alink" href="http://www.example.com/javascript-error">Click</a>
<script>
function dosomething(){alert("The link is processing. This is intended");}
document.getElementById("alink").addEventListener("click",dosomething);
</script>

Because javascript error pages are something people don't want, it wouldn't make sense to make a ton of links to it or to add a sitemap, or to even let people search for the page. So I'm trying to figure out a solution without receiving the WCAG error explained above.

I don't think it would be wise to give an HTTP status code other than 200 to those pages because they are pages and google might give me a little penalty for doing so.

Anyone have ideas on how I can fix this?

Answer 1

I'd first try and work out if it is actually a problem.

Automated tools for things like accessibility or SEO are just warnings. You need to understand the warning to know if they are relevant to your site.

In your case, does your site actually get real users who disable JavaScript? Should the non-JavaScript page even be indexed, or would users arriving on it via Google get a terrible experience?

The most recent stats I can find suggest 0.2% had JavaScript disabled (from 2016), but that was pre html-in-js being a common approach. Nowadays, as much as I'd rather it did, I suspect the web simply would not work for anyone with JavaScript disabled. Your approach seems to be trying to solve a usability problem that may no longer actually be an issue.

Whilst I personally think the ideal approach is to use JavaScript as a progressive enhancement and have pages render fine without it, if you don't want a load of code refactoring, I'd probably just add a noindex to your no-js page, and block it with robots.txt. Powermapper is treating it as a normal web page and giving you feedback based on that assumption, when I suspect it is actually something no one is seeing, and you presumably don't want most users seeing anyway.

Answer 2

I would suggest the following solution.

<a id=“alink” href=“http://www.example.com/default-page”>Click</a>
<script>
function dosomething() {
  alert(“The link is being processed. It's intended.”);
  window.location.href = “http://www.example.com/javascript-enabled-page”
}
document.getElementById(“alink”).addEventListener(“click”, function(event) {
  event.preventDefault(); // Stop the default behavior
  dosomething();
});
</script>

Is JavaScript disabled? User will be taken to a normal page. If enabled, the required script will be executed.

Answer 3

// Make sure to include these imports:
// import { GoogleGenerativeAI } from "@google/generative-ai";
const genAI = new GoogleGenerativeAI(process.env.API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

const prompt = "Write a story about a magic backpack.";

const result = await model.generateContent(prompt);
console.log(result.response.text());