- Add a permissions policy
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()">
- Fixing it so that numbers don't act as telephone/mobile dialing.
<meta name="format-detection" content="telephone=no">
- Add support for legacy mobile browsers
<meta name="HandheldFriendly" content="True">
- Add author information
<meta name="author" content="Gregory Bowne">
- wrong tag for JSON-LD.
<link rel="alternate" type="application/ld+json" href="../structured-data.json" />
should be
<script type="application/ld+json">
{ ... }
</script>
-
Hardcoded copyright date, use JS logic to update
-
No Content Security Policy tag
add something like: <meta http-equiv="Content-Security-Policy"...>
- No lazy loading for non-critical images
add a loading="lazy" to image tags that aren't critical like footer images
- redundant nav role
The
already implies role="navigation", so role="navigation" is redundant.
- Modal ARIA
For modals and dialogs, you may want to add role="dialog" and aria-modal="true" for better a11y.
Modals should have proper aria-labelledby attributes. Make sure focus is trapped within the modal when it is open.
- Autocomplete password issue
For sensitive fields (username, password), we may want to add autocomplete="off" or a more specific value (e.g., autocomplete="username", autocomplete="current-password") to prevent browser autofill issues.
- Duplicate "type" attriute in
<link rel="icon" type="image/png" href="assets/logos/favicon.png" type="image/x-icon" />
remove one.
-
Ensure the manifest.json and icon tags have the same path
-
Obsolete as browsers no longer need this.
-
theme toggle doesn't have any ARIA descriptives
`<button id="themeToggle" ...> this also needs proper icon classes
- commented out icon is wrong HTML syntax use
<!-- <link rel="icon" sizes="96x96" href="assets/logos/favicon-96x96.png" /> -->
- Since we use Bootstrap 5 features like modals we need the JS CDN link
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()"><meta name="format-detection" content="telephone=no"><meta name="HandheldFriendly" content="True"><meta name="author" content="Gregory Bowne"><link rel="alternate" type="application/ld+json" href="../structured-data.json" />should be
Hardcoded copyright date, use JS logic to update
No Content Security Policy tag
add something like: <meta http-equiv="Content-Security-Policy"...>
add a loading="lazy" to image tags that aren't critical like footer images
The
already implies role="navigation", so role="navigation" is redundant.For modals and dialogs, you may want to add role="dialog" and aria-modal="true" for better a11y.
Modals should have proper aria-labelledby attributes. Make sure focus is trapped within the modal when it is open.
For sensitive fields (username, password), we may want to add autocomplete="off" or a more specific value (e.g., autocomplete="username", autocomplete="current-password") to prevent browser autofill issues.
<link rel="icon" type="image/png" href="assets/logos/favicon.png" type="image/x-icon" />remove one.
Ensure the manifest.json and icon tags have the same path
Obsolete as browsers no longer need this.
theme toggle doesn't have any ARIA descriptives
`<button id="themeToggle" ...> this also needs proper icon classes
<!-- <link rel="icon" sizes="96x96" href="assets/logos/favicon-96x96.png" /> -->- Since we use Bootstrap 5 features like modals we need the JS CDN link
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>