Wave 辅助功能工具显示对齐文本警报

问题描述 投票：0回答：2

enter image description here

div.icons {                    
                    margin-left: auto; 
                    margin-right: 20%;
                    text-align: justify;
                    -ms-text-justify: distribute-all-lines;
                    text-justify: distribute-all-lines;
                    width: 100%;
 }
<div class="icons">
                    <a href="#"><img alt="scan the QR code" src="~/Content/images/icon-QR.png" /></a>
                    <a href="https://itunes.apple.com/us/app/my-eap/id436292883?mt=8&ls=1" target="_blank"><img src="~/Content/images/icon-app-store.png" alt="Apple appstore"/></a>
                    <a href="https://play.google.com/store/apps/details?id=com.onetapsolutions.morneau.activity&hl=en" target="_blank"><img src="~/Content/images/icon-google.png" alt="Google playstore"/></a>
                    <a href="https://appworld.blackberry.com/webstore/content/43853/" target="_blank"><img src="~/Content/images/icon-bb.png" alt="BlackBerry world"/></a>
                    <span class="stretch"></span>
                </div>

Wave 辅助功能工具显示对齐文本的警报。我应该怎么做才能摆脱这个警告信息？

html css accessibility wave
2个回答
0
投票

不要对齐文本。从来没有。

F88：成功标准 1.4.8 失败，因为使用了对齐的文本（与左右边距对齐）

-1
投票

Colin Wheildon 前一段时间做了一些研究，以评估不同排版元素对理解的影响。在许多有用的统计数据中，与使用右对齐文本相比，[正常视力]读者的良好理解率几乎是使用右对齐文本的两倍（67% 对 38%）。请注意，ragged-left 只达到了 10%。

正当文本不合规的理由 [双关语] 是一些视力有限的人可以在文本中看到“白色河流”。自闭症患者也往往会被多余的空格推迟，但也会被连字符分割的单词和太靠近的线条所推迟，大多数人对此没有问题。

我想知道当显示没有很好地调整文本时是否进行了这项研究，并且确实留下了几乎双倍的空间，这些空间往往会凝结到列的中心。今天情况通常不是这样，尤其是对于具有高分辨率的便携式设备，这些设备可以平滑地分隔单词并很好地呈现字体和衬线细节。 Colin 的研究是针对印刷媒体进行的，dpi 有效地进入了 1000s，并继续使用 Linotype 1200 和 2400 进入数字时代。

F88：成功标准 1.4.8 失败，因为使用了对齐的文本（对齐到左右边距） 曾经说过你可以提供对齐的文本，但如果你这样做了，你应该提供一个容易的可识别的方法来关闭它。现在它说“避免这个问题的最好方法是不要创建完全合理的文本布局”，这是歧视性的，会给大多数人带来阅读负担（即使他们不这么认为）。 WAG现在被歧视了。

兼顾两者的可能方法是：

  1. 包括一个 css 类，将对齐的文本更改为左对齐（如果 dir=rtl，则更改为右对齐），以添加到 body 标签中。它还可以增加行间距，删除连字符并为所有链接添加下划线。

  2. 在链接到同一页面的每个页面上包含一个链接，但在 URL 后附加一个 GET 变量。

  3. 当页面渲染软件（比如 PHP 或 XSL）检测到 GET 变量时，它会将特殊类添加到 

    <body>
    标签中，并将 GET 变量附加到每个链接，这样以后的每个页面也是衣衫褴褛

请注意，为了合规，您还需要检查 css 

::before
和 
::after
伪类的使用，以确保它们不包含辅助功能软件不会选择的任何非装饰性（即重要的）内容向上。使用这些的典型地方可能是自定义列表，特别是如果试图满足 html 在列表中支持的有限数量的语言。

在这种情况下，选择一刀切的方法会使大量读者处于不利地位。这就像让每个人都使用长坡道而不是楼梯。不照顾那些有困难的人是不公平的，但为了照顾相对较少的少数人而让大多数人更加困难也是不公平的。这是一种零和的情况，选择一种解决方案会给其他人带来问题，而那些提倡这种解决方案的人假装其他人对他们所谓的解决方案没有问题，这就是他们现在声称要对付的人所做的事情代表。更好的方法是提供一种跨站点维护的替代阅读模式。

我知道 ragged-right 在网络上被广泛使用，与 sans-serif 文本一起，与 serif 相比，后者的良好理解率更差（12% 对 67%）。当衬线字体和间距的渲染很差时，使用这两种较差的计算选择是有效的，但显示器现在可以在接近用于高质量打印的分辨率下渲染，其中完全对齐和衬线字体已经使用了一个多世纪，因为他们工作得最好。每家主要报纸都在印刷中使用它们。请注意，早期的单色绿色或琥珀色计算机显示器显示的是等宽衬线字体的文本，尽管这可能与字母之间没有过多的间距有关

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.