Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RFC] 关于“替换文本”等无障碍设计的讨论 #3435

Closed
kLiHz opened this issue Aug 11, 2021 · 25 comments
Closed

[RFC] 关于“替换文本”等无障碍设计的讨论 #3435

kLiHz opened this issue Aug 11, 2021 · 25 comments
Labels
Discussion / 需要讨论 Further discussion is welcome help wanted / 需要帮助 Extra attention is needed 低优先级 / P3 RFC / 提案 Stale

Comments

@kLiHz
Copy link
Contributor

kLiHz commented Aug 11, 2021

我遇到的问题是

为了使得 OI Wiki 的内容能够服务更多用户，是否应该在编写时考虑一定的无障碍设计？

我希望能有这样的解决方案

比如，目前 OI Wiki 上很多内容的配图不具有“替换文本”，在内容的前后也不具有足够的说明。

是否应该将这些要求纳入规范中？

我觉得这些备选方案也可以接受

或者也可以作为一种建议和提倡加入在编写规范中。
@welcome

This comment has been minimized.

Sign in to view
@renbaoshuo
Copy link
Contributor

当文章中使用动图（如 GIF / APNG / Animated SVG 等） 时，导出的印刷版本 PDF 无法正常显示这些内容。

@Junyan721113
Copy link
Contributor

一种平凡的解决方案是直接在动图下方附上普通的解释文字

@CoelacanthusHex
Copy link
Member

或许可以要求附上替换文本，然后 export 那边对替换文本做一定的处理，让印刷版本那边显示更好一点，也能同时提高本站的 a11y

@Junyan721113
Copy link
Contributor

APNG有一个特性：播放从第二帧开始，第一帧用于“浏览器不支持显示”等特殊情况
这个特性具有用于无障碍设计的潜力

@NachtgeistW
Copy link
Contributor

其实我以前有个建议说，用 ![]() 里 [] 的部分作为“替换文本”
比如说 WSL 页面里，![NOI 竞赛的环境要求](./images/wsl-noi-environment-requirements.png)，这里 [NOI 竞赛的环境要求] 就可以作为“替换文本”
今天这个提案一出来，我又想起来了

@Junyan721113
Copy link
Contributor

其实我以前有个建议说，用 ![]() 里 [] 的部分作为“替换文本”
比如说 WSL 页面里，![NOI 竞赛的环境要求](./images/wsl-noi-environment-requirements.png)，这里 [NOI 竞赛的环境要求] 就可以作为“替换文本”
今天这个提案一出来，我又想起来了

这个方案在我所在的另一个项目中已经被采用了，在图片丢失时效果还挺好的

@renbaoshuo
Copy link
Contributor

renbaoshuo commented Aug 11, 2021 •
edited by unfurl-links bot

其实我以前有个建议说，用 ![]() 里 [] 的部分作为“替换文本”
比如说 WSL 页面里，![NOI 竞赛的环境要求](./images/wsl-noi-environment-requirements.png)，这里 [NOI 竞赛的环境要求] 就可以作为“替换文本”
今天这个提案一出来，我又想起来了

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

实际上 ![]() 中的 [] 中的内容会被渲染成图片的 alt 属性值，而这个值正是一条对图像的文本描述。

HTML 元素将一份图像嵌入文档。

@Xeonacid
Copy link
Member

其实我以前有个建议说，用 ![]() 里 [] 的部分作为“替换文本”

[] 就是用来干这个的啊

@CoelacanthusHex CoelacanthusHex mentioned this issue Aug 11, 2021
Closed
@NachtgeistW
Copy link
Contributor

NachtgeistW commented Aug 11, 2021 •
edited by unfurl-links bot

其实我以前有个建议说，用 里 [] 的部分作为“替换文本”
比如说 WSL 页面里，NOI 竞赛的环境要求，这里 [NOI 竞赛的环境要求] 就可以作为“替换文本”
今天这个提案一出来，我又想起来了

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

实际上 中的 [] 中的内容会被渲染成图片的 alt 属性值，而这个值正是一条对图像的文本描述。

：图像嵌入元素 - HTML（超文本标记语言） | MDN
HTML 元素将一份图像嵌入文档。

那把缺失的 alt attribute text 补完基本就能解决网页端的问题了吧🤔

HTML 元素将一份图像嵌入文档。

@CoelacanthusHex
Copy link
Member

APNG有一个特性：播放从第二帧开始，第一帧用于“浏览器不支持显示”等特殊情况
这个特性具有用于无障碍设计的潜力

示例： 例子

@kLiHz
Copy link
Contributor Author

kLiHz commented Aug 11, 2021 •
edited

![]() 的 () 就是用来干这个的啊

是的啊……但是写得着急的时候可能会忘记写这个……或者一些用户并不知道这个是做什么用的……

另外就是，其实替换文本可能比想象中的要复杂一点：简单来说，替换文本，或者其与图像的上下文联系起来，能够完整表示出图像的意思。

@kLiHz
Copy link
Contributor Author

kLiHz commented Aug 11, 2021

除了图像，其实还有一个重点是公式……

网页上渲染出的公式是否能被屏幕阅读器正确读取？

@kLiHz
Copy link
Contributor Author

kLiHz commented Aug 11, 2021

这个方案在我所在的另一个项目中已经被采用了，在图片丢失时效果还挺好的

是的，“替换文本”顾名思义就是在图片无法被查看时所使用的文本。图片丢失是一种情况，屏幕阅读器遇到图片时也是一种情况。

@CoelacanthusHex
Copy link
Member

除了图像，其实还有一个重点是公式……

网页上渲染出的公式是否能被屏幕阅读器正确读取？

如果是 MathJax 的客户端渲染模式的话是可以以英语读出公式的（不过本站不知道是用的预渲染模式还是把 MathJax 右键菜单关了

@NachtgeistW
Copy link
Contributor

我试了一下用 Windows 的“讲述人”和 Edge 的“大声朗读”。图片直接被跳过了……跳过了……跳过了……

@kLiHz
Copy link
Contributor Author

kLiHz commented Aug 11, 2021

我试了一下用 Windows 的“讲述人”和 Edge 的“大声朗读”。图片直接被跳过了……跳过了……跳过了……

我刚刚试了一下我自己的页面，添加了“替换文本”之后是会被“讲述人”阅读出来的（好像需要一些操作，不过我也不是很熟练）。“大声朗读”好像不行。

@NachtgeistW
Copy link
Contributor

除了图像，其实还有一个重点是公式……

网页上渲染出的公式是否能被屏幕阅读器正确读取？

公式的情况是鼠标移到那些公式与伪代码上面，它显示什么，讲述人和大声朗读就会读什么……“反斜杠 text 反斜杠反斜杠 2”之类的

@CoelacanthusHex
Copy link
Member

@tsagaanbar 你们点开Firefox devtool的无障碍检测器……全是警告……

@CoelacanthusHex
Copy link
Member

CoelacanthusHex commented Aug 11, 2021 •
edited by unfurl-links bot

除了图像，其实还有一个重点是公式……

网页上渲染出的公式是否能被屏幕阅读器正确读取？

https://docs.mathjax.org/en/latest/basic/accessibility.html

@NachtgeistW
Copy link
Contributor

我觉得无障碍检测还是拿去检测 NEXT 吧 orz 现阶段重点应该是 NEXT，或许可以跟 NEXT 开发配合一下
另外这个提案可以考虑加入 Winter 2021 或者 Summer 2022 之类的。无障碍网站做起来绝对是个巨大的工程，光一个 issue 解决不了

@ksyx
Copy link
Member

ksyx commented Aug 13, 2021

APNG有一个特性：播放从第二帧开始，第一帧用于“浏览器不支持显示”等特殊情况
这个特性具有用于无障碍设计的潜力

示例： 例子

这个其实 SVG 也能做
主要是在印刷的时候 Animation 还得把关键帧筛选出来。。

@CoelacanthusHex CoelacanthusHex added the help wanted / 需要帮助 Extra attention is needed label Nov 22, 2021
@CoelacanthusHex
Copy link
Member

Shuhao Zhang:
说到无障碍

你 wiki 的彩色图片是不是也应该考虑颜色辨识障碍者的需求（

浅见沙织 via @InLaTeXBot:
那需要筛选并规定一套标准颜色

既要考虑正常视力者，也要考虑色盲，还要考虑灰度打印

这颜色不好挑啊

@Konano
Copy link
Member

Konano commented Nov 23, 2021 •
edited by unfurl-links bot

@CoelacanthusHex https://mp.weixin.qq.com/s/bsi0dTx5aPeBW8GbFwmfhw

微信公众平台
颜色的选择大有讲究。

@ksyx
Copy link
Member

ksyx commented Nov 23, 2021

Shuhao Zhang: 说到无障碍

你 wiki 的彩色图片是不是也应该考虑颜色辨识障碍者的需求（

浅见沙织 via @InLaTeXBot: 那需要筛选并规定一套标准颜色

既要考虑正常视力者，也要考虑色盲，还要考虑灰度打印

这颜色不好挑啊

ksyx, [11/23/2021 7:38 AM]
windows 可以映射红绿色盲的吧

ksyx, [11/23/2021 7:38 AM]
而且做 svg 的时候也为灰度做了优化

@github-actions github-actions bot added the Stale label Jan 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Discussion / 需要讨论 Further discussion is welcome help wanted / 需要帮助 Extra attention is needed 低优先级 / P3 RFC / 提案 Stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@Xeonacid @ksyx @Konano @NachtgeistW @CoelacanthusHex @Junyan721113 @renbaoshuo @kLiHz