WebAIM -考虑网页的可访问性

文本/排版布局

请注意

这篇文章涵盖了文本和排版布局。有关文本字符和符号的可访问性的更多信息,请参见关于字体和字体的WebAIM文章

文本对齐

默认情况下,浏览器对齐文本左侧。文本也可以右对齐,居中或对齐(左,右页边距都一致)。左对齐文本几乎总是最容易阅读,除了一些亚洲和中东的语言是传统垂直读从上到下或水平从右到左。

居中的长文本块导致每个新行从略微不同的位置开始。这可能会在读取时引入开销。

完全对齐文本通过调整单词和字母的间距来强制每行扩展到左右边距。虽然结果显示可能在一开始看起来更整齐,这些间距变化损害可读性。完全对齐的文本也会产生令人分心的“白色河流”——意想不到的空白模式,分散眼睛从文本的自然流动。

呈现出白色空间对齐文本内河流的说明。

有些情况下,如标题居中或文件日期右对齐,可能是合适的,但这些应视为例外。

边距、填充和空白

用于分隔内容的空白

文档中有空白,或“空白”,围绕块文本通常更容易阅读和扫描。这样的空间可以帮助读者将注意力集中在文本上,并创建一个更清晰的布局。然而,当文本靠近查看区域的边缘时,文档可能会感觉更杂乱,文本行可能更长,一些阅读障碍的读者可能会发现更难阅读。

当为小屏幕设计时,可以限制边距内的空白量,以更好地确保最佳的线长。

空格用来区分段落

段落和其他文本内容块之间应该容易区分。浏览器默认情况下在段落之间插入垂直空格。分隔段落的另一种方法是消除段落上下额外的空间,而不是缩进每个段落的第一行。印刷材料,如书籍和杂志通常遵循这一惯例。因为在线内容往往需要滚动,段落间距使得区分段落更容易。

线长

长行文本(每行包含许多字符)需要用户努力追溯到下一行的开头。非常短的行长度会导致花费大量时间跟踪后续行的开头。

线长度由字体,文字大小,文字/字母间距,以及最终用户的显示大小和设置的影响。虽然没有每行的字符,在一般情况下,大约50少于或每行可能会引进困难多于大约120个字符的普遍最佳数目。

但也有例外。
有时需要短行。
就像俳句一样。

响应式网页设计,最小和最大宽度,可变宽度根据视口大小等,可以实现,以确保线的长度是合适的。

文本装饰

下划线

下划线链接的惯例自万维网诞生以来就一直存在。在web上为其他目的使用下划线文本可能会使一些用户感到困惑,他们可能会试图单击下划线术语。同样,没有下划线的链接也可能不那么明显。

删除< del >, 插< ins >、透油<年代>

属性可以指示已删除的文本< del >元素,该元素使文本带有删除线显示。属性可以识别插入到文档中的文本< ins >元素。的<年代>元素可用于删除不再相关或不准确的文本。

删除、插入和删除有时在法律文档中用于显示从一个版本到另一个版本的变化。不幸的是,当使用这些元素时,屏幕阅读器并不总是通知用户,因此很难判断作者是否将段落划掉了。屏幕阅读器软件的制造商早就应该解决这个问题了,但是他们没有。这些限制可以通过向页面添加文本(可能使用CSS)来解决::之前后::)表示插入和删除的开始和结束。

CSS行通创建一个视觉删除线的效果,但是这是从来没有传达给屏幕阅读器的用户。