使内容可移植和可访问的10种绝佳方法

作者: Peter Berry
创建日期: 17 七月 2021
更新日期: 11 可能 2024
Anonim
NestJS 入门
视频: NestJS 入门

内容

当Kerie在她的iPhone上打字时,她看起来像在吹笛子。她将其靠近脸部,手指以惊人的速度移动。她写完了,递给我她的手机来阅读她刚刚键入的消息。它具有完美的拼写和语法,而且打字速度比使用iPhone的触摸键盘时快得多。

Kerie使用一个名为Fleksy的应用程序来帮助她使手指在手机上移动,使其变成单词。她还阅读新闻,收听广播应用程序,检查Twitter并使用手机搜索火车时刻。她是完全失明的。

“发布”对不同的人意味着不同的事物。对某些人来说,这意味着要制作印刷的实际工作量。其他人将发布与通过设备和应用分发书面作品的能力联系在一起。人们越来越频繁地认为发布是将内容以任何格式提供给用户,无论是将文章推送到博客还是更新Google Plus帖子。


现实情况是,用户之间的期望有所不同,并且这些期望会随着时间而变化。曾经狂热地在博客上消费最新文章的读者现在希望他们可以在任何方便的时间和地点阅读该博客文章或任何文章或书籍。今天的内容跟随着我们,从博客到手机的Reeder,再到iPad上的Instapaper,再到通过Whispernet发送到Kindle的电子邮件版本。

每个人的阅读工作流程都不同,对于那些需要使用屏幕阅读器,高对比度或放大文本等辅助功能的人来说,当作者和发布者未能考虑较小但必要的格式细节时,该工作流程就会中断,有时是无法修复的。不要以为没有选中“可访问性”框。而是要意识到,您正在有效地将您的内容变成许多潜在客户的黑匣子。

辅助功能不是“功能”

确实,听力和视力障碍的人使用了可访问的控件,但也有许多其他人也从中受益。视力不好的人会调整字体大小,以更轻松地阅读屏幕上的内容。色盲的人喜欢调整调色板的能力,这样红色警告文字之类的东西确实能脱颖而出。通勤时间长的人使用屏幕阅读器来收听正在阅读的文章。非母语人士使用带字幕的视频和音频来帮助他们理解新语言。所有这些情况都代表了内容的更广泛范围,更佳的用户体验和同理心,甚至可能带来更多收入。


有关可访问性含义的详尽概述,请参见伊恩·汉密尔顿(Ian Hamilton)的文章。

定义平台

让我们从一些定义开始,这些定义是我们可以专注于哪些格式以使我们的内容更易于阅读:

  • HTML: 借助HTML5,网络是作家和发行者展示作品的更好场所。新标签,例如 文章, 部分, 标头页脚 现在已在许多浏览器中实现,并且可以半可靠地用于在您的写作中添加语义上下文。另外,即将推出的CSS3页面模块可能也吸引了那些希望获得更固定页面阅读体验的用户。
  • EPUB: EPUB是国际数字出版论坛(IDPF)的官方标准。 EPUB3于2011年10月获得批准,它允许出版物具有更多样式和可自定义的内容,更接近于HTML / CSS所具有的功能,而不是以前的更静态的指南。
  • 手机: MOBI是Mobipocket的缩写,是Kindle和其他数字阅读器使用的一种格式。它的可定制性要比EPUB少,但是我们在这里介绍了它,因为您可以选择使用它来将内容发布到Amazon。根据AbilityNet的Robin Christopherson的说法,某些型号的Kindle可供盲人使用。但是,iOS上的Kindle应用程序不是。 Kindle Fire目前支持Kindle的新格式KF8,并将很快推广到最新一代的Kindle电子墨水设备和Kindle阅读应用程序。
  • PDF: PDF已成为网络上无处不在的实体。我之所以将其包含在此处,是因为大多数平板电脑确实具有良好的内置技术,可以读取PDF并启用辅助技术。对于PDF,决定性因素是其创建方式。爱尔兰国家残疾人管理局的无障碍开发顾问艾伦·道尔顿(Alan Dalton)表示:“您可以使PDF变得可访问;但是许多人却不知道。他们不知道自己的工具在生产不良产品。是HTML。”除了导航和可访问性之外,PDF还不能很好地适应不同的大小,并且任何尝试在智能手机上阅读PDF的人都熟悉这样做所需的笨拙的缩放,缩放和平移。

可以将您的内容转换成大图像的应用不属于此类别。尽管这可以确保外观和样式在各个平台上都一样,但是您在吸引大量受众的同时还创建了大量下载。当我们开始谈论Retina显示器和双倍尺寸的图像时,这个问题会更加严重。要感受被拒绝阅读的内容的感觉(仍然需要付费),请参阅有关报亭应用的评论,这些报亭应用几乎无法通过iOS中的VoiceOver进行访问。


要查看这些类型的杂志对易接近的技术用户的印象,请参阅我的视频内嵌视频,其中显示了尝试通过以下方式阅读这些杂志的无奈体验:
辅助工具,例如VoiceOver:

保持内容的可移植性和可访问性

专注于便携式格式,使我们能够愉快地将内容处理在更多的浏览器,电话,数字阅读器设备和阅读应用程序中。我们需要对我们的内容做些什么,以确保它可以在这些不同格式之间很好地转换,同时保持自定义样式和出色的体验?

我在下面整理了一些指南,供那些希望其受众尽可能广泛并且不想将其内容锁定在许多用户的黑匣子中的人们使用。这些技术可以应用于博客文章,长篇新闻报道以及您考虑自行发布的其他任何作品:

1.从HTML5开始

通过最初使用HTML5创建文档,您将来无需担心。 HTML5标记将有助于使您的文档易于浏览和转换为其他格式。如果从一开始就在其中包含语义信息,则将您的出版物“重新装配”成其他格式的情况要少得多。

2. WAI-ARIA

WAI-ARIA是Web Accessibility Initiative-可访问的Rich Internet Applications套件。这是由以下机构的协议和格式工作组(PFWG)创建的一套准则
W3C。 WAI-ARIA定义了一种使残障人士更容易访问Web内容和应用程序的方法,并且它通过使用Ajax,HTML,JavaScript和相关技术开发的动态内容和高级用户界面控件提供了帮助。本文中的某些技术来自WAI-ARIA指南,尽管本文篇幅不足以涵盖所有规范,但我还是建议您检查一下以了解有关为什么推荐这些规范和最佳实践的更多详细信息。实施它们。

3.使用文档类型

尽管使用特定文档类型本身不会影响相关HTML代码的可访问性,但使用文档类型的重要原因是要确保未触发浏览器的怪癖模式。只需使用 !DOCTYPE html> 以确保不会发生这种情况。

4. HTML5文档标签

正确导航文档会影响其可访问性索引。我采访过的许多可访问技术的用户对内容提供商和开发人员感到沮丧,他们没有正确标记其文档的导航功能。与使用大量div相比,这些标记为文档的各个部分提供了更多的上下文。

  • 标头页脚 可以在一个页面中多次使用。它们可以表示文档的各个主要页眉或页脚,也可以用于文章或节中的页眉/页脚信息。
  • 在旁边 是一个很好的标签,可用于与文档互补但对理解的理解并非绝对至关重要的部分,例如书中的侧边栏。
  • 栏目 是有意义的分解想法或将内容分组在一起的方法。
  • 文章 是独立的,独立的片段,可以在没有其余内容的情况下存在。适当地使用这些标记有助于确保正确解释内容的结构。

5.坏链接

使用CSS,可以在链接和按钮上使用背景图片。对于网页设计师来说,这是一个不错的效果,因为它可以更好地控制排版。但是,这导致人们忘记包含文本描述。即使在图像中也使用文字,也要确保文字仍可访问。这也会影响诸如SEO和
国际化。

例子:

href =“ / contact”> / a>

这不好。

a href =“ / contact”>联系我们/ a>

好多了。

6.图片– ALT与标题

人们经常包括 alt 或者 标题 属性在他们的形象中,但并非两者兼有,因为它们常常被误解,因此似乎是多余的。为了消除混乱, 标题 可以代表咨询信息,例如可能出现在工具提示中的信息。当您将鼠标悬停在图像上时,这也可以为您提供其他信息,这是许多人在其博客上使用的一种技术。但是,随着触摸设备的增长,这种信息的用途越来越少。

Alt键 另一方面,辅助技术会使用它,并为元素提供上下文。您必须使用 alt 在您的图片上,并确保它是有用的信息。使用 img alt =“” src =“ 1348.webp”>

让人们知道

如果您的内容有多种格式,请确保有一种方法可以在您的网站上发现它。您可能已经看过“如果您在查看此电子邮件时遇到困难,请在线阅读
电子邮件通讯顶部的“版本”消息。请对您的内容进行相同的操作。如果您具有可访问的PDF或音频版本以及ePub,请确保用户可以找到该信息。测试以确保内容可查找和可读。

概括

您的潜在受众群体正在增长,并且正在快速增长。这些只是提供给您的内容保持尽可能多的读者可用和访问的众多技术中的少数几种。这是一个瞬息万变的领域,因此,如果您有兴趣帮助其发展,建议您查看Nick Disabato的出版标准组织。

下面还列出了此领域动荡的其他重要资源和文章。在本文的后续中,我将扩展可访问性的范围,并提供其他提示,以确保您的内容可以脱机工作并且更可移植。

正如我们在过去几年中在杂志行业中所看到的那样,如果您站不住脚,您将会迷失方向。创造性地思考,建立人们喜爱的精彩内容,并确保他们可以享受它。

致谢

衷心感谢所有为我提供帮助的人,她抽出时间向我展示了他们如何使用无障碍技术,描述了他们的挫败感并提出了对他们有用的建议。这份清单包括爱尔兰国家残疾人管理局的Shane Hogan和Alan Dalton,Joshue O’Connor,该书的作者 Pro HTML5辅助功能,NCBI的Stuart Lawler,Darragh“ Hiligh,Kerie Doyle,Ceri Clark,Gaylen Floy,Declan Meenagh以及AbilityNet和Paciello Group的同事们进行了出色的研究。

资源

  • 伊恩·汉密尔顿(Ian Hamilton)对网络可访问性的简单介绍
  • 在HTML中使用ARIA
  • HTML5辅助功能
  • 史蒂夫·福克(Steve Faulker)的HTML5可访问性印章
  • Web辅助功能评估工具
  • Ashley Nolan和Nicholas Oliver的理解设计
  • 使用CSS3构建书籍Nellie McKesson撰写
  • 出版标准,第1部分,作者Nick Disabato
  • 出版标准,第2部分,作者Nick Disabato
推荐给你
Affinity Designer:如何使用效果和样式
阅读更多

Affinity Designer:如何使用效果和样式

通过将矢量和栅格工具结合使用,Affinity De igner是Adobe CC的价格适中但功能强大的替代产品。它适用于Mac,PC和iPad。在本教程中,我们将引导您浏览“效果”面板,以及如何创建和使用样式来快速应用效果。“效果”面板使您可以将非破坏性效果应用于矢量对象–您可以打开和关闭以及调整效果的元素。样式可用于捕获创建特定效果所需的步骤。这些可以保存为模板以在将来的对象上重用,从而确保一...
今日字体:Wabeco
阅读更多

今日字体:Wabeco

在Creative Bloq,我们是排版的忠实拥护者,并且我们一直在寻找新颖有趣的字体-特别是免费字体。因此,如果您需要最新设计的字体,或者只是想保留一个收藏以便做好准备,我们可以为您提供帮助。每天,我们都会运行“一天的字体”,我们将在其中发布网络必须提供的最好的最佳免费和付费字体。Wabeco是图形设计师Paul Rei 的个人项目,始于对装饰艺术元素,形式,形状和色彩的研究。 Rei 评论说:...
10种最佳线框工具
阅读更多

10种最佳线框工具

最好的线框工具可让您从一开始就确定网站或应用程序的设计。通过让所有利益相关者就UI的工作方式达成共识,可以尽早加入。这对于简化流程,防止一路走错和逆转至关重要。一些最好的线框工具是专门针对线框制作的。您选择哪种方式在很大程度上取决于您是要创建快速,粗糙的产品,还是更接近功能完善的原型的产品。另一方面,有些人不希望将自己的设计从专用线框图应用程序导出到完整的设计应用程序。相反,他们更喜欢在通用设计软...