This content originally appeared on DEV Community and was authored by Sanskar Sahu
- The worst accessibility sin you
can make is to make your navigation dependent on Javascript.
The problem is, that a lot of elements considered to be good usability actually need javascript to function properly.
Most of the time, this is due to the fact that HTML elements are being used for something which is not their purpose, like a button acting as a link.
Now, to make these things work although there is no Javascript available we have two options
Use a backend script to deal with it
Use Javascript sorcery and fallback options to make the navigation element work in any case.
If possible, use the first option, it is much safer and does not clutter the code unneccessarily.
However if th
- ere is no chance to change the backend code, use noscript to replace the elements with their accessible equivalents, and write the elements that cause trouble via javascript.
Example: Navigation button
<input type="button"
onclick="self.location='http://www.netdecisions.com'"
value="Homepage" />
Backend solution(PHP):
<input type="submit" name="home"
onclick="self.location='http://www.netdecisions.com;return false'"
value="Homepage" />
And the PHP would be
<?PHP if($_GET['home']=='homepage'){
echo header('http://www.netdecisions.com')}?>
The return false prevents javascript browsers to send the data back to the server, non-javascript browsers go back to the server, call the PHP script (of course it needs to be the form action) and set the header to load the other page.
This content originally appeared on DEV Community and was authored by Sanskar Sahu
Sanskar Sahu | Sciencx (2022-01-20T13:07:52+00:00) Explanation Of Javascript Fallback (ง’̀-‘́)ง. Retrieved from https://www.scien.cx/2022/01/20/explanation-of-javascript-fallback-%e0%b8%87-%e0%b8%87/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.