暂不支持移动端访问

媒体、无障碍与授权信息兼容性测试

835 字 4 分钟
人工编写

验证新文章图片系统在电脑端对封面、本地图片、public 图片、图注、灯箱、键盘操作与授权信息的统一处理。

横向相册封面插画,用作文章图片系统兼容性测试封面

这篇文章只使用新文章图片系统支持的 Markdown 图片语法,集中验证电脑端封面、正文图片、图注、灯箱与键盘操作。所有资源都来自仓库,不依赖远程图片或第三方页面。

本地相对路径图片#

下面的图片位于 src/content/posts/images。构建时应生成稳定的站内资源地址,并保留图片原始比例和明确的替代文本。

GitHub 功能界面示例,展示本地相对路径图片
本地相对路径图片

图片应限制在正文媒体轨道内。图注来自 Markdown 图片标题,不应依赖浏览器的悬浮提示。

可点击的站内原图#

链接包裹图片时,新系统只在链接目标仍然是图片的情况下打开灯箱;普通页面链接不会被图片控制器拦截。

博客首页分镜插画,点击后查看完整图片
点击查看站内原图

Public 图片#

public 目录中的资源继续使用 / 开头的路径,但输出结构、图注和灯箱行为与本地内容图片保持一致。

博客首页纵向分镜插画,验证 public 目录中的站内图片
站内 public 图片

横向大图#

横向图片用于验证宽图在电脑端的缩放和布局。它可以使用正文媒体区域,但不能制造页面级横向滚动或改变其他页面布局。

横向相册封面插画,用于验证宽图缩放和稳定布局
横向大图与正文边界

纵向图片#

纵向图片必须按原比例完整显示。灯箱使用图片的确定性宽高,不通过加载后的 naturalWidth 临时推断尺寸。

博客首页纵向角色插画,用于验证高比例图片
纵向图片与高度约束

连续图片的阅读节奏#

连续图片用于检查相邻媒体之间的间距、图注和焦点状态是否保持一致。

GitHub 功能界面示例
连续图片一
Obsidian 功能界面示例
连续图片二

无障碍检查#

本页所有承载信息的图片都有明确的 alt。替代文本描述图片内容或用途,而不是重复“这是一张图片”。封面单独设置 coverAlt,图片无法加载或使用屏幕阅读器时仍能理解其作用。

图片交互应满足:

  • 可以通过键盘访问。
  • 焦点状态清晰可见。
  • Escape 可以关闭灯箱。
  • 关闭后焦点返回原图片。
  • 图注和替代文本不会互相替代。
  • 图片加载前后不产生明显的布局跳动。

折叠检查清单#

展开媒体与无障碍验收项目
  • 封面和正文图片都能加载。
  • 图片不会超过文章容器。
  • 图片可以使用键盘打开和关闭。
  • 图注在蓝色和粉色主题下都能阅读。
  • Swup 页面切换后 PhotoSwipe 不会重复绑定。

来源与授权#

这篇文章在 Frontmatter 中设置了 sourceLinklicenseNamelicenseUrl。文章底部应展示来源及 CC BY-NC-SA 4.0 授权信息,同时关闭文章评论。

验收结论#

当横向封面、本地相对图片、public 图片、链接图片、横图、纵图、连续图片与授权信息都能稳定显示时,这一页的文章图片系统兼容性测试即通过。

[ 公告 ]

如果你喜欢,那么欢迎来到我的世界!

了解更多
[ 音乐 ]
封面

音乐

找不到相关结果。
[ 目录 ]
[ 全部文章 ]