在内层管道的悠久历史中，如果您请求代码帮助，通常不会得到太多响应。但是，如果你发布代码并断言它是理想的、完美的，是你原始自我的永恒反映，那么人们会给它一个好机会。

为什么

在嵌入幻灯片、YouTube视频等我解释说，为YouTube制作自己的嵌入版本可以让用户下载半兆字节的跟踪脚本（至少在播放视频之前）。

我做了一个web组件版本也有，但指出它可能需要一些帮助。我本来想在组件中包含一个Vimeo版本，但在使用Vimeo缩略图时遇到了困难。

我认为我可以分享我所拥有的，而社区可以在他们认为合适的时候忽略它，而不是在我明显不擅长的事情上浪费更多时间。

HTML

我为web组件构建了HTML，这样，如果JavaScript从未加载、中断或以某种令人兴奋的方式失败，用户仍将拥有有效的链接和上下文。

然而，要使其工作，作者需要付出一点努力，以确保链接的格式符合特定的方式。主要是因为唯一的ID段塞，在YouTube和Vimeo URL的末尾，是我用来抓取海报图像和构建嵌入式框架的。

自定义元素中的HTML被保留，有助于确保嵌入本身是否被破坏或阻止，即使脚本成功运行后，用户仍将拥有有效的链接和上下文。

<youtube-vimeo-embed><p>YouTube：<a href=“https://youtu.be/dQw4w9WgXcQ网站“>Rick Astley，“永不放弃”，3:32</p></youtube-vimeo-embed>

<youtube-vimeo-embed><p>Vimeo:<a href=“https://vimeo.com/77377158“>键和皮：视频聊天，2:12</p></youtube-vimeo-embed>

您可以传入纵横比。我设置好了纵横比：16/9默认情况下，但如果添加数据比率到<youtube-vimeo-embed>您可以传入自己的属性值。

由于发布后不久的评论，我还添加了对数据发布器。给它一个完整的URL，如果提供了，就不会调用YouTube或Vimeo，从而节省带宽，也不会为YouTube提供灯塔。否则，它会从YouTube或Vumbnail中提取图像。

脚本

该函数解析URL并使用它来决定视频是YouTube还是Vimeo。你必须使用优图.be域。

然后我创建一个iframe并设置我想要的属性标题从HTML作者您所写的文本中。

对于YouTube，我使用无cookie嵌入来模糊地承认隐私（它仍然是YouTube），并提取它用于视频的缩略图。Vimeo有点棘手，因为我需要对缩略图进行API调用，所以我使用vumbnail.com网站.

如果您有查询字符串值，函数会将它们附加到URL的末尾，在?自动播放=1。我没有深入研究所有可能的查询字符串值，以了解它们如何影响显示，因此可能需要对您的用例进行调整。

类YouTubeVimeoEmbed扩展了HTMLElement{// https://github.com/aardrian/youtube-vimeo-embed构造函数（）{super（）；}已连接回拨（）{var iframe=document.createElement（'iframe'）；var theLink=this.querySelector（'a'）；var vidPoster=this.getAttribute（“数据主体”）；var vidSlug；var vidPreSlug=theLink.getAttribute（'href'）.split（'/'）[3]；var vidQueryString=“”；var vidQueryCheck=vidPreSlug.indexOf（'？'）；if（vidQueryCheck==-1）{vidSlug=vidPreSlug；}其他{vidSlug=vidPreSlug.substring（0，vidQueryCheck）；vidQueryString=“&”+vidPreSlug.substring（vidQueryCheck+1）；}if（theLink.getAttribute（'href'）.substring（8,13）=='youtu'）{var isYouTube=1；}其他{var为YouTube=0；}iframe.setAttribute（'title'，theLink.textContent）；iframe.setAttribute（'allow'，'autoplay'）；iframe.setAttribute（'allowfullscreen'，''）；iframe.setAttribute（'loading'，'lazy'）；if（是YouTube）{iframe.setAttribute（'src'，'https://www.youtube-nocookie.com/embed/'+vidSlug）；var vidLink='https://www.youtube-nocookie.com/embed/“+vidSlug+”？autoplay=1'+vidQueryString；if（视频海报）{var bgImg=视频海报；}其他{var bgImg='https://i3.ytimg.com/vi/'+vidSlug+'/hqdefault.jpg'；}}其他{iframe.setAttribute（'src'，'网址：https://vimeo.com/'+vidSlug）；var vidLink='https://player.vimeo.com/video（视频）/“+vidSlug+”？autoplay=1&dnt=1'+vidQueryString；if（视频海报）{var bgImg=vidPoster；}其他{var bgImg='https://vumbnail.com网站/'+vidSlug+'.jpg'；}}if（this.getAttribute（'data-ratio'））{iframe.setAttribute（'style'，'spect-ratio:'+this.getAttribute（'data-ratio'）+'；宽度：100%；'）；}其他{iframe.setAttribute（'style'，'spectro-ratio:16/9；width:100%；'）；}iframe.setAttribute（'srcdoc'，'<style>body{background-image:url（'+bgImg+'a： 焦点圆：第一个子元素+圆，a:悬停圆：第一子元素+圆{stroke-dasharray:.4，.4；}a:焦点多边形，a:悬浮多边形{stroke:#fff；stroke-width:.75；}</style><a href=“'+vidLink+'”><svg viewBox=“0 0 16 16”width=“96”height=“96“xmlns=”http://www.w3.org/2000/svg“aria-hidden=”true“><circle cx=”50%“cy=”50%f“stroke-linejoin=”round“></polygony></svg>Play</a>'）；this.appendChild（iframe）；}}customElements.define（'youtube-vimeo-embed'，YouTubeVimeoEmbed）；

请注意，我并没有删除原始链接和周围的文本。它是自己的退路。

示例

YouTube上的经典RickRoll，但你知道它就要来了。

<youtube-vimeo-embed><p>YouTube：<a href=“https://youtu.be/dQw4w9WgXcQ网站“>Rick Astley，“永不放弃”，3:32</p></youtube-vimeo-embed>

Vimeo似乎捕捉了我们今天在非爱尔兰共和国会议上的经验。

＜youtube vimeo嵌入＞<p>Vimeo:<a href=“https://vimeo.com/77377158“>关键与关键：视频聊天，2:12</p></youtube-vimeo-embed>

YouTube上的“超宽”视频使用data-ratio=“21/9”. The海报形象是作者以错误的尺寸创作的；即使不理想，收成也是不可避免的。

<youtube-vimeo-embed data-ratio=“21/9”><p>YouTube：<a href=“https://youtu.be/DsoZI4TLqMc网站“>《男孩与苍鹭》预告片，1:50</p></youtube-vimeo-embed>

这是我设置的Vimeo的方形视频数据比率=“1/1”。如果你在你的网站上使用这个，你可能想有自己的风格来限制iframe的高度90伏（或任何适合您的站点的选项）并依赖纵横比。我选择在这里不那么规范。

<youtube-vimeo-embed data-ratio=“1/1”><p>Vimeo:<a href=“https://vimeo.com/31817442“>没有撤销——克里斯托夫·迪林杰（Christophe Dillinger），2:14</p></youtube-vimeo-embed>

哦，嘿，这里有一位专家在揭穿可访问性覆盖。你知道，如果你想使用测试视频嵌入到你的项目中。由于以下原因，视频开始31秒开始=31在查询字符串中。

<youtube-vimeo-embed><p>YouTube：<a href=“https://youtu.be/PLXAuxZKjs？start=31“>WordPress无障碍日的Overlay Underhelm，46:48</p></youtube-vimeo-embed>

此示例在14秒内开始，使用自定义海报图像（通过数据发布器)，并将纵横比设置为1:1，因为我的小我坚持海报图像更引人注目：

<youtube-vimeo-embed data-poster=“https://adrianroseli.com/wp-content/uploads/2024/06/web-components-logo.png“data-ratio=”1/1“><p><a href=“https://youtu.be/Sq5oiHjwFxI？start=14“>Kevin Powell：与Dave Rupert一起创建Web组件，持续了一个半小时。</p></youtube-vimeo-embed>

GitHub回购

这是完美的，你们都很尴尬，无法假装不一样。你可以通过忽略GitHub回购<youtube-vimeo-embed>.

方法

以下内容地标每页只能出现一次（否则可能不起作用相当地如你所料):

• <标题>/横幅
• <主要>/主要的
• <页脚>/内容信息

你不应该给他们起容易理解的名字。上下文和唯一性就足够了。

对于其余的地标，可能不要给它们起一个可访问的名称，除非用户说它对它们很有价值。

如果您给这些区域提供了一个可访问的名称，请理解使用阿里亚·拉贝尔引入本地化风险.

有些元素不是地标直到你给他们一个容易理解的名字（相同及其角色). 在这种情况下，你应该考虑它是否是一个地标，或者是增加了噪音。我的经验表明，一旦你超过5或6个地标，它们就会增加噪音。这是针对通用网站上的通用用户的，因此熟悉页面上经过培训的用户可能会依赖页面的许多地标（这将由这些用户确认）。

例子

A类＜导航＞/航行它本身不需要可访问的名称。填充在<标题>，它仍然不需要。添加第二个<导航>，但在<页脚>，不需要名称。背景很清楚。

一旦将一个地标的两个实例放在同一“范围”中（在同一地标内或没有地标），那么您可能希望至少命名其中一个。如果您有<导航>在中<标题>和也另一个<导航>在同一个<标题>，可能至少给其中一个简明的名称。

真实的例子

在地狱那边，Ashlee Boyer让Vercel知道它的导航有一个奇怪的可访问名称（不要判断Ashlee，Vercel选择留在那里，这样她就可以让他们知道）：

<导航aria-label=“带5个链接的导航标题和带链接的1个下拉菜单”>

有三个菜单和两个链接，所以这是一个谎言。这是冗长的。它使用了行话（“下拉列表“）。这也是完全不必要的，因为页面上只有一个其他导航区域-在<页脚>:

<导航aria label=“Vercel目录”role=“导航”>

多余和不必要的航行角色是很好的接触.

无论如何，我在一些示例中使用了过去时，因为Vercel立即对其主导航进行了更新：

<导航aria-label=“Main”>

我本不想让这件事泄露出去，但作为莱奥尼说过至少十年来，它不一定要完美，只需要比昨天好一点。

我不知道第一次剪的是不是Vercel的生产就绪v0 LLM，但为了一些可能会尴尬的人，我希望如此。

相关的

• 关于aria-label用法的注释不那么简短——大表版作者：史蒂夫·福克纳
• 标记控件的方法的优先级通过我
• ARIA备注`通过我

对下次我被问及时有用，对读者纠正我有用，对其他读者借用有用，对我修改有用，等等。

我的方法

一般来说，当谈论叙事内容中的图像时，这些图像不是图像学的，也不是用作交互控制的一部分…

• 我考虑可能遇到它的受众（社交媒体追随者、营销网站的用户、电子商务流的客户、我的博客等）
• 我会考虑他们的潜在经验、技能水平、阅读水平和一般技术概况。
• 我查看周围的上下文，了解已经提供了哪些细节以及需要传达什么。
• 然后我考虑如何（通过屏幕阅读器导航技术或显示类型）显示备选文本，当图像被破坏时，作为可访问名称的一部分（用于链接或按钮或其他），等等。
• 然后我写一些内容，把重要的部分放在前面，并尽量保持周围的色调和风格。
• 这可能包括根据种族、性别、能力等来识别人，也可能不这样。
• 我试图通过删除编辑和雕刻SEO工作来避免描述图像中没有的东西。
• 我考虑了可能需要传达但可能不在直接描述中的文化线索。
• 当图像是噱头或双关语时，我尽量保持原意。
• 我考虑使用标点符号（避免句点居中，使用适当的引号，而不是以属性结尾的双质数），并小心避免换行。
• 我不使用表情符号（也许有一个角落的情况，可能值得一个）。
• 我希望在保持最小描述（考虑图表和图形）的同时，可以将哪些内容转移到相邻的结构化描述中。
• 在这一切中，我努力使内容尽可能简短合理。

这份不完整的清单并不意味着其他指南是错误的或不太理想。编写备选文本不是一项技术练习（至少不超过基本的WCAG一致性）；这是为你的观众量身定制的文案和约束。应该像页面上的所有其他纯文本内容（或社交媒体帖子或其他内容）一样仔细考虑。

进一步阅读

一些参考资料：

• 安中高音决策树来自W3C的Web可访问性计划
• 如何为视障人士编写替换文本和图像描述来自珀金斯盲人学校
• 文本描述和情感丰富的图像作者：Léonie Watson
• 关于编码alt文本的简短注释作者：史蒂夫·福克纳
• 使用双引号的风险""在中高音属性文本值作者Steve Faulkner
• ALT LEFT（左高度）作者：史蒂夫·福克纳
• “alt text”没有字符限制作者：埃里克·艾格特
• 论漫画的描写作者：Liana Fink
• 你的形象可能没有装饰性作者：埃里克·贝利
• 如何在BBC新闻文章中编写文本描述（alt text）来自BBC GEL

我的东西：

• 这个编写备选文本节来自改善推文的可访问性，2018年1月6日
• 无障碍Memes可以实现，2018年4月24日
• 指责屏幕阅读器🚩×52021年10月16日
• 参考：SR和扩展字符2021年10月19日
• 长Alt2024年4月20日

如果你有自己喜欢的资源或技术，请分享。

ARIA公司

这个咏叹调属性，当应用于标题（或具有标题角色）允许作者设置整数标题级别的值。While期间咏叹调自1.0以来一直在ARIA规范中这个便条在ARIA 1.3草案中增加：

关于具有角色的元素标题，的值咏叹调以上6项可能会给用户带来困难。此外，在撰写本文时，大多数用户代理和辅助技术的组合仅支持咏叹调标题上的整数1-9。

本说明是ARIA工作组的成果拒绝对咏叹调2023年2月。相反，它是基于当时的支持。

HTML格式

HTML具有总是有标题特别是级别1到6。

虽然HTML5试图实现HTML第一版本中最初的一个想法，特别是文档大纲算法，但事实证明它是站不住脚的，而且从未有浏览器实现过。2016年我写了关于移除它的努力从HTML规范来看，考虑到它对用户的负面影响。

这种努力的一个结果，或者说直到现在都没有取得进展的许多结果，是标题水平偏移的概念。这将允许作者集成已有标题结构的内容，同时根据包含文档的提示动态调整所有标题。

这个航向起点2019年提出的属性（虽然它经历了几个名字）是一个得到牵引力。这将负担从作者转移到浏览器，这比用户更好，但仍然需要用户的浏览器在每次加载时进行工作，而不是作者的模板在单个渲染上。

浏览器

浏览器需要支持这个新的HTML属性，所以有机会。我们可以查看当前对咏叹调以了解此操作的效果。

Gecko（Firefox）和WebKit（Safari）都支持超过20亿的值，即2147483647（简化为2³¹−1). Chromium（Chrome，Edge）仅支持高达9级的级别。铬固定支架咏叹调大于6，但故意不用于标题（我会找出原因）。

与此同时，Chromium记录了其原型支持意图航向起点. TheChrome平台状态页面更详细地介绍。没有迹象表明它将支持或不支持超过9的标题级别。

当Chromium遇到大于9的值或无效值时，它会返回到值6。除非在<小时#>元素，在这种情况下，它将使用元素的级别。WebKit也将回到<小时#>元素，否则可以不对无效值指定级别，但以下情况除外arialevel=“-1”，揭露为4294967295。

太平洋岛民

Windows平台辅助功能APIUI Automation具有标题级别的上限特别是九（9）。我没有深入研究Microsoft Active Accessibility（MSAA）和IAccessible2（IA2），这是Windows上另外两个（较旧的）AAPI。

现在来了解一下为什么Chromium选择不修复咏叹调用于标题。由于UIA的限制，铬明确限制标题级别为9。因此提交的问题具有核心AAM限制 咏叹调标题为9。未做任何更改Core-AAM中未列出级别限制（见上述ARIA注释）。

由于HTML和ARIA的标题级别通过相同的AAPI公开，这将影响提议的航向起点属性以及咏叹调.

屏幕阅读器

这一切最重要的地方是标题级别如何向屏幕阅读器公开，然后由屏幕阅读机向用户公开。

NVDA、VoiceOver（macOS和iPadOS）和Orca似乎都能处理最多2个值³¹−1，由浏览器提供。无效值由浏览器处理并作为级别2传递（VoiceOver将不提供级别）或<h#>元素级别。

JAWS无法处理任何高于6的级别，2019年提交。也许更麻烦的是JAWS可能会忽略咏叹调在<小时#>元素.

TalkBack不喜欢级别高于6。当与Firefox搭配时，它宣布没有级别，但依靠Chrome的bug宣布2。

在“讲述人”中，任何级别大于9的标题（通过HTML或ARIA）不再作为标题发布。如果你有一个无效咏叹调，它可以将以下内容与它连接起来，并将其全部作为2级的标题发布。

测验

你不必相信我的话。我做了一个测试页(调试模式)包括我的结果。我的测试工具：

火狐125

NVDA 2024.1年

Ubuntu 22.04.2 LTS上的Orca

讲述人Win11 23H2

对讲14.2

铬124

爪2024.2403.3

NVDA 2024.1年

反馈14.2

边缘124

讲述人Win11 23H2

野生动物园17.4

VoiceOver macOS 14.4.1

iPadOS 17.4.1上的VoiceOver

查看钢笔ARIA航向水平测试作者：Adrian Roselli(@奥尔德良人)在代码笔.

判决

1. 在JAWS和TalkBack修复它们的错误之前，可能不允许任何高于6的标题级别。
2. 然后，除非UIA（以及Chrome和可能的Narrator）更改其限制，否则可能不允许任何标题级别高于9。
3. 使用标题（可能<h6>)带有咏叹调对于任何高于6的级别，都比角色扮演另一个元素咏叹调.
4. 如果你希望头部启动将通过导入的或用户生成的内容来解决标题级别的问题，您可能最终会创建混淆和WCAG风险基于本文中列出的原因（可能还有其他原因）。
5. 如果你需要超过20亿一亿四千七百四十八万三千六百四十七个标题级别，你可能需要雇佣一名文案撰写人。

相关的

• 没有文档大纲算法2016年8月29日
• 斯科特·奥哈拉的测试标题级别超过6，2019年10月22日
• 避免混淆：标题什么时候不符合WCAG？2020年3月17日，David Swallow
• 指责屏幕阅读器🚩×52021年10月16日
• 不合理的标题2022年7月21日
• 史蒂夫·福克纳h7-h9通过arialevel元素测试页，2024年3月28日
• A11y支架测试：ARIA标题高于6级2024年1月31日
• 解决网络最古老的问题2024年4月30日，与Brian Kardell、Eric Meyer和Keith Cirkel

CSS上下文

CSS提供了一些方法来设置浏览器从选定文本应用的突出显示的样式(：：选择)，链接目标文本(：：目标文本)，以及拼写和语法错误文本(：：拼写错误和：：语法错误).

为了限制布局偏移，规范仅允许设置背景色,颜色,文本删除（及其相关属性），文本阴影,笔划颜色,填充色、和冲程宽度.

CSS伪元素模块4级工作草案规范涵盖了这一点§ 3. 高亮显示伪元素，包括允许的属性。

使用Windows高对比度模式/对比度主题/强制颜色时，：：目标文本将使用CSS系统颜色关键字标记文本和作记号.同时：：选择将使用突出显示文本和突出相反，：：拼写错误和：：语法错误使用文本删除，而不是背景/前景颜色。

根据马斯托顿岛上的德兰·阿扎巴尼，Igalia正在致力于在页面中引入find伪元素选择器(：：搜索文本和：：search-text：当前)至至少铬在操作时同样的CSSWG问题。我找不到它将使用的系统颜色关键字（尽管我只是问了而且它有自己的问题截至5月14日）。

WCAG上下文

WCAG公司SC 1.4.3：对比度（最小值）要求文本与其背景的对比度至少为4.5:1。较大或较粗的文本可以通过3:1的对比度。

SC 1.4.11非文本对比类似地，需要3:1的对比度来区分UI组件的状态（例如选中）。这可能是页面背景，也可能是容器的背景。这意味着可能需要在页面中多次定义此突出显示颜色（及其文本）。

当你将这两个成功标准配对时，这意味着你的高亮背景需要与它自己的背景形成3:1的对比度，文本需要与之形成4.5:1的对比度（除非粗体/大）。

作为一个曲线球，SC 1.4.1颜色的使用指出颜色并不是传达信息或区分视觉元素的唯一方法。挑战在于，CSS规范允许的有限样式大多是彩色的，只有明显的例外文本删除（及其相关属性），文本阴影、和冲程宽度。在许多情况下，依靠这些可能是不切实际的，但我预计AGWG在某些时候会被拖入其中（参见关于访问/未访问链接的讨论例如）

您可能已经注意到，默认用户代理样式经常存在对比度问题。这并不意味着它们可以，但它们超出了WCAG的范围。一旦您修改了浏览器的默认样式，您就面临着遵守WCAG的问题。考虑以下注释WCAG对比度定义（突出显示相关位）：

应对内容中指定的颜色对进行WCAG一致性评估，作者希望这些颜色对在典型演示中出现在相邻位置。作者无需考虑不寻常的演示，例如用户代理所做的颜色更改，除非由作者代码引起。

此外，1.4.11有此雕刻:…但[…]除外，其中组件的外观由用户代理决定，而不是由作者修改。

本质上，如果你触摸它，你就拥有它。

相关的

我的其他帖子介绍了如何定制其他系统默认值，如果你不搞乱这些默认值，它们通常都很好：

• WHCM和系统颜色
• 滚动条可用性的基线规则

总结

如果计划设置浏览器高亮显示的文本的样式，则必须为其提供足够的对比度-高亮显示块与背景的对比度为3:1，高亮显示块中的文本与背景的对照度可能为4.5:1。

你能为地球做的一件简单的事是不使用“AI”工具。

将其视为程序员、网页开发人员、网页设计师、文案撰写人、网站管理员等。这些工具包括任何以生成性人工智能、LLM、计算机视觉工具、Copilot、ChatGPT、Bard、Grok、Dall-e、Midtrivel等命名的工具。

如果您也是一个需要使用这些工具之一来生成图像描述或简化内容阅读级别的用户，因为作者创建了一个禁用体验，那么我不会将您包括在这个大范围中。

我认为Molly White很好地总结了这些工具的当前实用性：

[…]它们很方便，就像偶尔将一些任务委托给一个缺乏经验、有时很马虎的实习生一样。

此外，实习生还吃三明治。与将汽油（几乎是字面意义上的）倒入大火中烧毁我们的家相比。

有很多文章证明了这些“工具”对于生产就绪代码是多么无效。我们知道他们将偏差编码到输出中。我们嘲笑那些把聊天机器人扭曲成给他们交易并把他们的公司老板搞砸的人。

但我们通常忽略了每一个请求对我们的星球、我们的环境和我们的后代造成的损害。以下是非常简短的参考列表：

• 训练一个单一的人工智能模型可以在其一生中排放多达五辆汽车的碳《麻省理工学院技术评论》，2019年6月6日
• 人工智能的碳影响《自然》，2020年8月12日
• 一些专家将人工智能视为应对气候变化的工具。其他人则表示，其自身的碳足迹可能是一个问题。哥伦比亚广播公司新闻，2023年8月26日
• 人工智能革命的环境影响开始成为人们关注的焦点，The Verge，2023年10月10日
• AI的气候影响超出了其排放量，《科学美国人》，2023年12月7日
• 管理人工智能的碳足迹《哈佛商业评论》，2024年1月10日
• 生成性人工智能的环境成本正在飙升，而且大多是秘密的《自然》杂志，2024年2月20日
• AI可能增加能源使用并加速气候错误信息的传播——报告《卫报》，2024年3月7日
• Arm首席执行官警告称，到2030年，人工智能最终可能消耗美国四分之一的电力，Tom’s Hardware，2024年4月11日
• 谷歌的人工智能答案会给环境带来什么代价？，《科学美国人》，2024年6月11日

你每天可以做的其他与假冒人工智能无关的事情：

• 试穿草稿Web可持续发展指南来自可持续网页设计社区小组。
• 使用网站碳计算器作为一种工具来减少您的总体足迹。
• 作为一些更大影响的代理，您可以使用我的网站花费多少？评估您所在国家以外的影响。

哦，是的，也离开区块链。亲爱的读者，我不知道有哪个能干、负责任的人能全力以赴，所以我怀疑我是否需要向你证明这一点。

请注意，有人能帮我做一下吗地球日现场不太容易接近？真 的。

开头的图像是我自己对memed的重画“这很好”面板从枪炮表演KC Green报道。的图像地球是NASA的合成物在这一场景中，地球其他地区，尤其是全球南部地区，首当其冲地受到了火灾的影响，而北美地区迄今为止没有受到任何影响。

我们开始吧

有时您可能会有太多可选文本，尤其是<图像>.我不是说有一个限制我的意思是，人类可以使用的东西是有限制的。这张猫的长照片证明了这一点。

它应该是一个易于描述的图像。作者可能希望包含许多然而，内容的。也许是图像信用，或者是对迷因的描述，或者是URL，或者只是老式的SEO关键词填充。见鬼，这可能是他们Notes应用程序的屏幕截图，其中包含六段道歉，这是真实的，也是有用的。

大多数情况下，只有屏幕阅读器用户才会体验到这些内容，但连接不良或页面图像源损坏的用户将导致文本填充、溢出或被排除与缺失图像的差距。

由于可选文本不是富文本，因此它没有结构，也无法通过单词、字母或段落导航。这为各种破损留下了空间。无法标记外语文本。嵌入的引用可以打断它。可以跳过特殊字符（符号、页面语言以外的语言中的符号等）。换行和回车正在讨论中。

如果您做这项工作的时间足够长，那么您会看到HTML、JSON、base64文件、脚本、大部头书等等都被塞进了图像替代文本中。如果你是一个相对较新的人，那么这篇文章旨在展示用户是如何体验这些内容的。

首先，该图像中的可选文本：

现在让我们看看它是如何向用户公开的。

作为破碎的图像

我在起草这篇文章时拍下了屏幕快照。每个浏览器有两个快照，一个带有宽度和高度属性（也定义了纵横比）和一个没有的属性。

在这个网站上，我给我的图像设置了斜体文本样式，使它们的替代文本更加明显：

国际货币基金组织{字体样式：斜体；}

对于向右对齐的图像（在足够宽的视口中），我将其最大宽度设置为49%。这就是为什么在我的屏幕截图中，文本选项不会从边缘到边缘填充窗口：

左侧，右侧{最大宽度：49%；高度：自动；}

在下面的屏幕截图中，我将周围的文字变暗，并用黄色圈出缺失的图像，使它们更明显。

Firefox浏览器

铬

游猎

通过屏幕阅读器

我的计划是在桌面上用NVDA、JAWS、VoiceOver、Narrator和Orca录制这段视频，然后在手机上漫游到VoiceOve和TalkBack。但后来我花了小时制作NVDA视频并决定我可以告诉你与其他人有什么不同。这并不是你付钱给我的。

这绝非详尽无遗。

全部阅读

NVDA打破了基于换行和文本块长度的可选文本，在每一个文本之前都宣布了“图形”一词。对于盲屏阅读器用户，他们可能无法立即理解他们听到的是一幅图像，而不是16幅。还要注意日语和中文字符是如何被跳过的，URL和符号是多么冗长。

Chrome JAWS的不同之处在于没有宣布“图形”。

Safari的VoiceOver也没有宣布“图形”，但它宣布了日语和中文单词。VoiceOver也会忽略大多数符号。

带边缘的讲述人不会宣布“图形”，并忽略大多数符号。令人烦恼的是，它还宣布了标题，前缀为“graphic”。

iPadOS上的VoiceOver与macOS上的VoiceOver相匹配。虽然出于某种原因，当到达图像末尾时，VO也会说话碳钢全螺纹顶部THA.

与Firefox或Chrome一起使用时，TalkBack会发布完整的可选文本，包括日语和中文文本。当与Firefox搭配时，TalkBack通过屏幕上的字幕将其打破，但与Chrome相比，一切都是一块。TalkBack还将alt文本和标题在它们之间填充“图形”一词。最后，他们都宣布“https://”为https:2斯拉申语这是一种氛围。

虚拟光标

由于NVDA将可选文本分成块，因此需要16个↓按键以完成此示例。值得注意的是，用户可以通过这些块反向工作，我在视频的最后四个部分演示了这一点↑按键（从1:34向前）。

Chrome的JAWS在一个键上有所不同——只需按一下箭头键即可。缺点是你不能倒退浏览备选文本的大块内容，所以如果你在第一遍错过了什么，你必须重新开始。

VoiceOver不会读取图像的可选文本，除非我按下指节Ctrl键+选项+班次+↓combo（你可以按下→，但VoiceOver指示您进行数字体操）。VoiceOver也不允许您反向浏览备选文本。

带Edge的讲述人的行为与read-all一样，包括其决定滚动到宣布标题属性。

iPadOS上的VoiceOver与macOS上的VoiceOver相匹配。包括令人好奇的图像结尾繁荣。

与Firefox或Chrome一起使用时，TalkBack的行为与使用read-all时相同。

按图像

我会给你（我）一段视频，甚至是一个详细的描述，然后把这个JAWS图像对话框放在这里，向你展示它是如何从这个荒谬的替代文本中扩展出来的。

Android上的TalkBack不允许通过图像导航。其余的屏幕阅读器将其视为通过虚拟光标导航。

啊哈标题

这个标题在许多情况下，属性是一个麻烦。浏览器将其视为一个可访问的描述（假定有可选文本），这可以使屏幕阅读器体验更加详细。为了完整起见，我将其包含在这篇文章中。不要用它。

触摸和语音用户通常不会从中受益，因为生成的工具提示会在悬停时出现（IE和pre-Chromium Edge是在键盘焦点上实现的）。

A类标题也可以阻止工具tip后面的内容。我参加过用户研究，用户的鼠标光标刚刚挂在视口中，巨大的工具提示为他们屏蔽了内容。这些用户无法轻松移动光标，因此他们必须上下滚动才能看到被阻止的内容。

总结

保持图片的替代文本简短，没有特殊字符，没有URL，最好是一种语言。

替代文本不适合搜索引擎优化（SEO）胡说八道、编辑、URL、图像信用，甚至不适合一句话（当然，这一千个单词的图像可能并不值钱）。任何主张更多的人都应该尝试将其与屏幕阅读器一起使用（可能需要额外的任务来跟踪嵌入的URL或复制嵌入的名称）或禁用图像。

社交媒体不能成为忽视这一建议的借口。

这篇文章并没有指导你什么写，只有什么不来写作。已经有很多好文章和帖子介绍如何制作有用的替代文本。我重新创建了W3C alt文本决策树如果不想去其他地方，请在本网站上发布。

与本网站相关

• 这个编写备选文本节来自改善推文的可访问性，2018年1月6日
• 无障碍Memes可以实现，2018年4月24日
• 指责屏幕阅读器🚩×52021年10月16日
• 参考：SR和扩展字符2021年10月19日

幻灯片中的文本设置为阿特金森超清晰室外图像由Midtravel生成。在确认阅读顺序和替代文本并转换每个em-dash、省略号、撇号和引号之后，PDF将从PowerPoint导出，否则它们将作为没有替代文本的图像导出。PDF本身没有编辑功能。我知道这并不完美。

我使用iframe嵌入幻灯片，但只有在用户点击后才能下载。有些用户将浏览器配置为下载幻灯片，因此这种方法可以防止他们在打开页面时被推送5MB的文件。如果这对你来说是坏的或有问题的，那么你应该在CSUNATC找到我并让我知道。不过，在我的谈话中可能不会。

我不提供PowerPoint文件，因为我的幻灯片以前曾被其他人拍摄和使用过，我相信他们至少应该付出一些努力才能从我这里窃取。

这个帖子是用来放幻灯片的存根在期间我的演讲，几天后会更新之后如果需要的话，我会与更多掘金对话。

演讲中使用的示例

我演讲中使用的示例屏幕快照不仅仅是插图。我在代码中做了这些，以确认我所说的内容是准确的。当然，我只需要在Firefox的Windows上确认一下屏幕截图的范围。无论如何，您可以在下面的嵌入式框架中自己玩它们，或者直接访问他们自己的URL.

更新

克里斯托弗·菲利普斯已收集到的链接Google Sheet中的所有演示文稿。请注意工作表底部的选项卡，以查看相关资源、赞助商和以前年份。

澄清

让我澄清一下：不要设置基本字体大小。

车身{/*font-size：是的，不是*/}

你需要设置一个线头或代码检查器或boss-man来烦你某物？好的，使用有点像这个：

html格式{字体大小：100%；}

因为

这种方法的优点是总是继承用户首选的字体大小。他们在浏览器或系统中选择的那个。即使他们没有明确选择一个（因为默认设置可能已经足够好了）。

所有其他字体大小（标题、导航、页脚等）应使用相对单位。理想情况下没有较小的大于默认大小（非常特殊的例外情况除外）。

因为你避免计算魔法，任何较小的尺寸都可能更容易被作者发现-.9雷姆和90%明显更小。

或者，基于视口单位的字体大小带来风险，尤其是防止用户缩放它大到可以阅读。那你还需要更多计算魔法以防止其发生。

形式

当您删除不必要的基本字体大小声明时，可能添加向您的CSS致敬，以尊重用户在表单中的偏好：

选择，文本区，输入，按钮{字体：继承；}

我在我的帖子中更详细地解释了这一点未经设计的文本框和未经工程设计的选择菜单.

打印

当谈到打印样式时，文本对于您的读者来说可能太大（无论您是否或如何设置）。如果是这样，您可以在适当的指向size和所有其他相对字体大小都将以此为基础。

@媒体打印{车身{字体大小：8pt；}}

扼要重述

就是这样。这就是秘密。不要设置基本字体大小。

但是…

当然，你的情况很特殊。您的案例比尊重用户选择更重要。我不是你爸爸。我无法阻止你。合法地。

更新日期：2024年4月3日

根据Mike Mai的反馈（链接如上）和斯科特·凯勒姆的评论下面，我修改了您的示例不得不但是里面有些风格。现在它使用html格式作为选择器，而不是身体.

虽然这篇文章是关于不设置任何东西，我犯了一个错误，如果你被迫加入的话，我会把它包括进去。

更新日期：2024年4月22日

Mike Mai写道定义基本字体大小的案例他的论点是，字体可以保证设置基本字体大小。我不一定不同意。你给用户使用的字体可能太小（或太大），所以如果你强加一个决定，堆叠另一个决定并不是一件难事。

这假设用户可以下载字体（它没有被阻止或中断），并且用户可以使用该字体（并且没有通过首选项阻止它）。

更新日期：2024年5月1日

我的300字的一次性帖子被放在了一段视频中，我是通过Spencer Wohlerson the A11y Slack了解到的。还有，我有那件衬衫。

以前年度

2014年是网络25周年纪念日万维网联盟（HTML和CSS以及其他标准背后的标准主体）和万维网基金会联合创建网站webat25.org网站.

该网站离线，域名被允许失效（由随机购买）。方便地WebAt25.org位于互联网档案馆希望能再保存25年。

为了纪念2019年网络30周年，W3C、万维网基金会和欧洲核子研究所合作创建30^第个周年纪念地。该网站仍处于联机状态。

同样在2019年，CERN召集了一些开发人员重新编写了第一个web浏览器，作为可以在自己的浏览器中运行的客户端脚本。你可以读一些历史和文档，然后启动并开始冲浪worldwideweb.cern.ch/浏览器（你需要说明书）。

今年

今年W3C发表了一篇博客文章。这不是陷阱。我宁愿他们把钱花在WAI上，而不是花在一个与AARP会员资格无关的周年纪念活动上，或者花在与宝石或贵金属无关的年份上。

多年来，网络及其基础标准为新出现的问题提供解决方案全世界。举几个例子，1997年创建的Web无障碍倡议（WAI）对部署所有人（包括残疾人）都可以访问的内容和网站具有开创性意义；1998年采用了国际化（i18n）框架，使网络技术适应世界上各种写作系统，从而使万维网真正走向世界；但也有一些进步持续塑造了网络平台，例如支持电子商务的网络支付；通过WebAuthn、分散标识符（DID）、ActivityPub等提供安全、尊重隐私和强大的在线体验。

你可以阅读Tim Berners-Lee 1989年3月对网络的最初定义，信息管理：建议它包括最先进的图表。

相关的

我在博客上还介绍了其他一些历史信息：

• 互联网50岁，可能会流行起来2019年10月29日
• 网络30岁，似乎很受欢迎2019年3月12日。
• 网络25岁，似乎很受欢迎2014年3月12日。
• NCSA马赛克旋转20圈2013年4月22日。
• WWW项目20岁2013年4月30日。
• Netscape Navigator 2.01庆祝16周年2012年3月20日。
• 互联网40岁，可能会流行起来2009年10月30日。