Kerkini Boat — 无障碍游船、住宿与租车

2 天设计与开发

Kerkini Boat 是塞雷斯州凯尔基尼村的一家家族企业：Spyros Sfetkos 经营着湖上第一艘专为轮椅通行建造的船。甲板平整，登船走与甲板齐平的宽坡道，没有人需要被抬离轮椅，35 个座位中可同时容纳 8 到 10 台轮椅及其陪同者。预订时提前说明，还可提供希腊手语讲解。这家人同时出租一套独立公寓和汽车，所以网站要介绍三项服务，又不能埋没最与众不同的那一项。希腊语在前、英语在后，是两套文件名与结构完全一致的完整页面，而不是由脚本来回替换的文本——这个网站既写给人看，也写给搜索爬虫和 AI 助手看，因此除了手写的 llms.txt，还附有自动生成的全站全文。没有框架，没有构建步骤，也不向任何第三方发请求：字体和动画库都由本站托管，隐私政策对此写得很明确。动效只是装饰，并以三种独立方式安全降级，因此即使 JavaScript 始终没有加载，页面该说的内容也一样都在。

技术栈

HTML5 CSS3 Vanilla JS GSAP 3 JSON-LD Bilingual EL/EN WCAG 2.2 AA llms.txt Self-hosted fonts SEO

挑战

一个讲无障碍的网站，自己在无障碍这件事上不能含糊。船确实可供轮椅通行；公寓是传统的村屋，并不完全可以——要在同一个网站上把这一点说清楚，又不损害生意，是文案里最难的取舍。三项服务还要争同一个首页，各自来自不同的搜索：湖上的行程、住的地方、车。预订只通过电话和 WhatsApp，没有邮箱也没有表单，所以每个页面都得在没有常规联系漏斗的情况下把下一步说明白。受众也是分开的：希腊本地访客，以及来自国外的观鸟者、摄影师和残障团体——因此两种语言都不能沦为语言切换开关所造成的附属品。

解决方案

希腊语和英语是两套完整页面，文件名与结构一一对应，各自带有 canonical、hreflang 和结构化数据，因此关闭 JavaScript 也能正确阅读。页眉、抽屉式导航和页脚由共用 partials 生成到全部 22 个页面；上线前有一个检查脚本校验链接、资源、替代文字、标题层级、canonical、结构化数据，以及每张图片 150 KB 的上限——没有 CI，这些关卡都在命令行里跑。无障碍是量出来的，不是假设的：22 个页面在两种宽度下共 3,055 个文本节点，零对比度失败，320 到 1920 像素之间没有横向滚动。无障碍声明列出船上提供什么，并明确写出公寓并非完全无障碍；载客量和手语讲解写进了结构化数据；字体和脚本自行托管，任何访客都不会被交给第三方。

访问项目

图片集

标题“三项服务，一位主人”下的三张卡片：船上成排的红色座椅、带花园的石砌公寓，以及一辆白色租赁车，每张卡片各有一个链接。 — 三项服务，一家人，一行说清

深青色版块，标题为“湖上第一艘为所有人设计的船”，列出四点：平层登船、35 个座位中可容 8–10 台轮椅、希腊手语，以及固定与安全。 — 撑起这门生意的理由，四点讲完

游船常见问题页，其中一条答案展开：行程约 60 至 90 分钟，全年均可约定出发，清晨与傍晚最适合观鸟和拍照。 — 电话里常问的问题，打之前就答好了

一张两只卷羽鹈鹕在浅水区的照片，旁边是关于该物种的文字，下方是一群在湖中吃草的水牛。 — 这是湿地指南，不是宣传册

住宿页面：石砌房屋与花园的照片，旁边的文字介绍独立厨房、卫浴、露台和入口，下方是预订按钮。 — 村里的一处房子，通过 Airbnb 预订

四张卡片——保险、不限里程、送车上门、无隐藏费用——上方，下面是条款表格，列出最低年龄、证件、燃油和过境规定。 — 价格面议，条款摆在明处

相册页面：五个分类标签，下方是网格照片，内容包括船、鹈鹕、水牛、鹳和一辆租赁车。 — 真实照片，按类别筛选

三块联系方式卡片——电话、WhatsApp 和地址——上方，下面是预订时需要说明的清单，包括有几台轮椅、是否为电动轮椅。 — 没有表单，没有邮箱：两个号码加一张清单

无障碍声明，列出船上提供的条件——平整甲板与坡道、可容 8 至 10 台轮椅、乘客全程留在自己的轮椅上——其后是一段关于公寓的说明。 — 这一页也写明了哪些地方并非无障碍

英文首页，标题“Three services. One host.”下是同样的三张服务卡片。 — 英文是另一套完整页面，不是一个切换开关

Kerkini Boat — 无障碍游船、住宿与租车

技术栈

挑战

解决方案

图片集

相关项目