Farside Japan Website Remediation Guide

1. Give every interactive control an accessible name a11y/aria-command-name

Six links pointing to #one have no readable name. Add visible text or a meaningful aria-label. If they are decorative controls, remove them from the tab order instead of leaving empty links.

<a href="#golden-route" aria-label="View the 10-day Golden Route">
  <span aria-hidden="true">→</span>
</a>

Verify: Tab through the page. Every focused link/button should announce a useful purpose in VoiceOver and have a visible focus indicator.

2. Add a programmatic label to the form input a11y/form-labels

The input named site-url needs a visible <label>. If it is a bot-trap/honeypot rather than a user field, hide it from assistive technology and keyboard navigation.

<label for="site-url">Your website (optional)</label>
<input id="site-url" name="site-url" type="url" autocomplete="url">

Verify: Clicking the label focuses the input, and an accessibility scanner reports no unlabeled form controls.

3. Add meaningful image alternatives images/alt-text

Six images are missing alt text. Describe meaningful travel and guide images in context. Use alt="" only when an image is purely decorative and adjacent text already conveys the same information.

• Example: alt="Private Farside Japan walking tour in Tokyo"
• Example: alt="Lake Ashi with Mount Fuji behind Hakone"
• Example: alt="Farside Japan downloadable Tokyo itinerary cover"

Verify: Every meaningful <img> has concise, non-duplicative alt text; decorative images use an empty alt attribute.

4. Replace the homepage title and description core/meta-title · core/meta-description

The current title (“farside japan”) and description (“photo walks”) do not explain the offer. Recommended starting copy:

<title>Personalized Japan Tours & Trip Planning | Farside Japan</title>
<meta name="description" content="Plan Japan with a knowledgeable local guide. Explore private tours, custom itineraries, group logistics and ready-to-use Tokyo and Golden Route travel guides.">

Keep titles around 30–60 characters and descriptions around 120–160 characters. Match the promise to services actually offered.

Verify: View page source, confirm one title and one description, then request re-indexing in Google Search Console.

5. Publish About, Contact, and Privacy pages eeat/about-page · eeat/contact-page · eeat/privacy-policy · legal/privacy-policy

• About: guide biography, Japan experience, languages, service philosophy, authentic photo, relevant credentials/partners, and who the service is best for.
• Contact: business name, email/contact form, response time, service area, and booking/inquiry expectations.
• Privacy: data collected, purposes, processors (form provider, analytics, Payhip, email), cookies, retention, user rights, contact method, and effective date.

Add persistent footer links to all three pages. Have a qualified professional review the privacy policy for the jurisdictions where customers are located.

Verify: Pages return HTTP 200, are linked from the footer, are indexable where appropriate, and the privacy link appears beside any form collecting personal data.

6. Add authorship and dates to guides/content eeat/author-byline · eeat/content-dates

For downloadable guide landing pages or future articles, show “Written by [Guide Name]” with a link to the About page, plus published and updated dates. Add corresponding author, datePublished, and dateModified schema values.

7. Add intrinsic dimensions to images and the iframe images/dimensions · perf/cls-hints

Twenty images and one iframe lack dimensions. Add the source asset’s true width and height; responsive CSS can still render them fluidly.

<img src="/assets/images/example.webp"
     width="1600" height="1067"
     style="max-width:100%;height:auto"
     alt="...">

For embeds, use fixed dimensions or a CSS aspect-ratio wrapper so space is reserved before content loads.

Verify: Run Lighthouse three times and confirm Cumulative Layout Shift is below 0.1.

8. Lazy-load below-fold media images/offscreen-lazy

Add loading="lazy" decoding="async" to the 13 below-fold images. Do not lazy-load the hero/LCP image; give that image priority instead.

<img src="..." width="1200" height="800"
     loading="lazy" decoding="async" alt="...">

9. Compress and modernize image assets images/image-file-size · perf/total-byte-weight

At minimum, optimize image03.jpg (211.1 KB) and image06.jpg (212.8 KB). Export responsive AVIF/WebP variants, size them to their maximum rendered dimensions, and use srcset/sizes. Aim for roughly 80–150 KB for large photographic images and lower for cards/thumbnails without visible quality loss.

<picture>
  <source type="image/avif" srcset="photo-800.avif 800w, photo-1600.avif 1600w">
  <source type="image/webp" srcset="photo-800.webp 800w, photo-1600.webp 1600w">
  <img src="photo-1600.jpg" srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
       sizes="(max-width: 760px) 100vw, 50vw" width="1600" height="1067" alt="...">
</picture>

Verify: Total tracked page weight drops materially below the current ~1.66 MB and no individual non-hero image exceeds 200 KB.

10. Prioritize only the true LCP image perf/lcp-hints

Identify the actual above-fold hero image in Lighthouse. Preload only that asset and set fetchpriority="high". Do not preload all three candidates reported by the scanner; over-preloading competes for bandwidth.

<link rel="preload" as="image" href="/assets/images/hero.webp" fetchpriority="high">
<img src="/assets/images/hero.webp" fetchpriority="high" width="..." height="..." alt="...">

11. Shorten critical request chains perf/critical-request-chains · perf/font-loading · perf/preconnect

• Add preconnects for Google Fonts if they remain: fonts.googleapis.com and fonts.gstatic.com with crossorigin.
• Prefer self-hosted WOFF2 fonts and reduce families/weights. The current request includes several families and styles.
• Load Payhip’s script only near the product section or after interaction if purchasing still works correctly.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

12. Optimize the large inline SVG images/svg-inline

Run the SVG through SVGO, remove editor metadata and unnecessary precision, or serve it as a cached external file if it is reused. Confirm that externalizing it does not delay above-fold rendering.

13. Add security headers security/csp · security/hsts · security/x-frame-options

Configure these at the hosting/CDN layer. Start CSP in report-only mode, observe violations, then enforce it. Payhip, Google Fonts, TripAdvisor, videos, analytics, and form endpoints may need explicit allow-list entries.

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self'; frame-ancestors 'self'; object-src 'none'; base-uri 'self'; ...

Verify: Use SecurityHeaders.com, test every purchase/form/video flow, and review CSP reports before enforcing.

14. Protect the public form from abuse security/form-captcha

Add Cloudflare Turnstile or an equivalent low-friction challenge. Validate its token server-side; a client-only widget is not sufficient. Also add rate limiting, a honeypot, and server-side input validation.

15. Secure external new-tab links security/new-tab

For the TripAdvisor link and every target="_blank" link, add rel="noopener noreferrer".

<a href="https://www.tripadvisor.com/..." target="_blank" rel="noopener noreferrer">Read TripAdvisor reviews</a>

16. Add business/service schema and VideoObject schema schema/video · video/video-schema

Add JSON-LD describing the business and its services using the most accurate Schema.org types available (for example, LocalBusiness or TravelAgency when eligibility is confirmed). Include name, URL, logo, contact data, service area, and same-as profiles. Add VideoObject only for a real embedded video, with an accurate name, description, thumbnail, upload date, duration, and embed/content URL.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Explore Japan with Farside Japan",
  "description": "A short look at personalized private experiences in Japan.",
  "thumbnailUrl": "https://farsidejapan.com/path/video-thumbnail.jpg",
  "uploadDate": "2026-01-01",
  "embedUrl": "https://..."
}
</script>

Verify: Validate with Google Rich Results Test and Schema.org Validator. Do not add ratings, prices, addresses, or credentials that are not visible and factual.

17. Restore visible keyboard focus a11y/focus-visible

Remove broad outline:none rules. Use a high-contrast focus style that works on light and dark photography.

:focus-visible { outline:3px solid #ffcf4a; outline-offset:3px; }
:focus:not(:focus-visible) { outline:none; }

18. Correct the heading hierarchy a11y/heading-order

Keep one descriptive H1, use H2 for major homepage sections, and H3 only for items nested inside an H2 section. The audit detected an H3 directly after the H1.

19. Improve link names and destination clarity a11y/identical-links-same-purpose · a11y/link-text

The two “Buy Now” links lead to different products. Give each a unique name, such as “Buy the Tokyo 5-Day Guide” and “Buy the 10-Day Golden Route Guide.” This helps screen-reader users and improves conversion clarity.

20. Add a skip link a11y/skip-link

<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main">...</main>

Keep it visually hidden until keyboard focus, then display it prominently.

21. Verify color contrast a11y/color-contrast

Test every text/background pairing, especially white text over photographs and very light gray copy. Meet WCAG AA: 4.5:1 for normal text and 3:1 for large text. Add a dark overlay behind hero text when needed.

22. Normalize canonical and redirect behavior crawl/canonical-chain · security/http-to-https

Choose https://farsidejapan.com/ as the preferred homepage URL. Ensure the canonical tag exactly matches it and that HTTP/non-preferred variants redirect in one 301 hop. The HTTP→HTTPS redirect itself is expected; the goal is a single clean hop and no canonical mismatch.

23. Add complete favicon assets core/favicon

Provide a modern SVG/PNG favicon, legacy ICO, and Apple touch icon. Include the appropriate <link rel="icon"> and <link rel="apple-touch-icon"> elements.