1. 首页
  2. IT资讯

组件的设计思路:从大量选项中进行多选

“u003Cdivu003Eu003Cpu003E在GOV.UK上,我们一直在寻找改善我们的查找页面的方法,比如服务(https:u002Fu002Fwww.gov.uku002Fsearchu002Fservices )、新闻和通讯(https:u002Fu002Fwww.gov.uku002Fsearchu002Fnews-and-communications )。查找器页面允许用户搜索特定类型的内容,并使用主题和组织等facet(方面)来缩小搜索结果的范围。u003Cu002Fpu003Eu003Cpu003E其中一个facet是使用一个名为“option select(选项选择)”的组件在一个可展开的框中显示多个复选框。这是考虑到可访问性的解决方案——它可以与键盘一起使用,使用一个按钮来展开u002F折叠功能,并能自动应用正确的ARIA属性(https:u002Fu002Fdeveloper.mozilla.orgu002Fen-USu002Fdocsu002FWebu002FAccessibilityu002FARIA )。它是这样的:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F390f53772ea146309c231ec909ca569b” img_width=”498″ img_height=”266″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E尽管如此,该组件在规模化运行时效果并不理想。在包含数百个选项的一些情况下使用它时,使用键盘或屏幕阅读器来导航到最后一个复选框是一项缓慢的任务。u003Cu002Fpu003Eu003Cpu003E即使在使用鼠标或移动设备时,这也会出现问题,因为随着选项数量的增加,在如此多的复选框中精确导航变得更加困难。u003Cu002Fpu003Eu003Cpu003E更糟的是,无法在复选框中进行搜索。想一下你可能会怎样去找一个人。他们是按名字的字母顺序排列,还是按头衔的顺序排列?如果你只知道他们的姓呢?在这么多人中间找到他们可能会很难。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E寻找一个替代方案u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E几年前,GDS的一个团队构建了一个可访问的自动完成(https:u002Fu002Fdesignnotes.blog.gov.uku002F2017u002F04u002F20u002Fwere-building-an-autocompleteu002F )。一个自动完成是一个文本输入框,它的行为类似于一个select元素,但是你也可以在其中进行输入来过滤结果。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fdd1131c56efc4cb4b90379547ef65122″ img_width=”256″ img_height=”101″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E可访问的自动完成u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E它看起来像是我们的选项选择的理想替代品,因为它提供了本质上相同的功能,只不过它允许用户输入来过滤可用的选项。这意味着即使有大量的选项,用户仍然能够浏览它们,而不需要去考虑要怎样使用这些选项。u003Cu002Fpu003Eu003Cpu003E最重要的是,它在构建时考虑到了可访问性(https:u002Fu002Faccessibility.blog.gov.uku002F2018u002F05u002F15u002Fwhat-we-learned-from-getting-our-autocomplete-tested-for-accessibilityu002F ),因此我们有信心它将是可用的。u003Cu002Fpu003Eu003Cpu003E实现和迭代u003Cu002Fpu003Eu003Cpu003E通过创建一个新组件并将自动完成添加到其中,我们开始将可访问的自动完成添加到我们的查找器中。经过一些工作,我们让它运行起来,这是一个巨大的改进。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F86be8662b1a44844ba5628e200e44e7c” img_width=”620″ img_height=”458″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E可访问的自动完成替代了新闻和会话查找器中的选项选择u003Cu002Fpu003Eu003Cpu003E尽管自动完成运行地很好,但有一个大问题——它只允许用户选择一个选项,而它替换了的“选项选择”组件允许多个选择。u003Cu002Fpu003Eu003Cpu003E幸运的是,有一个版本的可访问自动完成允许多个选择,但是当我们切换到使用它时,我们发现了另一个问题。在单项选择模式下,用户的选择仍然保留在文本框中,但是在多项模式下,由于文本框中没有足够空间,选择将显示在文本框下面。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fdd1131c56efc4cb4b90379547ef65122″ img_width=”256″ img_height=”101″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fae856553026448c0a66d038302a50582″ img_width=”350″ img_height=”260″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E单项选择模式(顶部)和多项选择模式(底部)中的可访问的自动完成操作u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们将用户选择的选项称为“facet标记”。单击一个facet标记将从用户的选择中删除它。这运行地很好,但是我们已经为其他facet查找器添加了facet标记,所以有了这个更改,功能就会重复。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F4900a19e554b4d17977cc4d7055a8e46″ img_width=”620″ img_height=”326″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在多重选择模式下,查找器中的可访问自动完成u003Cu002Fpu003Eu003Cpu003E如果我们保留自动完成的facet标记,我们将会得到一个混乱的界面。最好的选择是删除它们并使用我们自己的标记,但是在自动完成中选择一个选项是否成功并不是很明显,结果可能是一个空文本框。u003Cu002Fpu003Eu003Cpu003E这个问题在移动设备上更严重,由于搜索结果上面的facet重叠,我们的facet标记常常根本不可见,因此用户无法知道他们的自动完成选择是否成功。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Ffba495923dd44fa4a75dda88889bbf53″ img_width=”620″ img_height=”525″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E可访问的自动完成在一个移动设备上的多项选择模式通过将facet标记隐藏,以避免重复。u003Cu002Fpu003Eu003Cpu003E用户无法看到他们所选择的内容,因为它位于屏幕的可视区域之下。u003Cu002Fpu003Eu003Cpu003E为了将它添加到我们的问题中,可访问的自动完成被设计成一个独立的代码段,这意味着没有API来控制它。由于需要在不直接使用它的情况下删除其中的选择,我们不得不编写越来越复杂的代码,以便在查找器中操作它。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E艰难的决定u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E经过慎重的考虑和讨论,我们得出了一个困难的结论,即可访问的自动补全不是一个适合我们的问题的解决方案。这是一个艰难的决定——因为我们已经投入了相当多的时间,并且也没有更好的替代方案。u003Cu002Fpu003Eu003Cpu003E我们又重新返回到原来的选项选择组件来考虑这个问题。受自动完成的启发,我们创建了一个原型,并添加了一个文本输入,允许用户过滤可见选项。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F96706a4fd6964975884adbc870c2a0a5″ img_width=”329″ img_height=”345″ alt=”组件的设计思路:从大量选项中进行多选” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E虽然过滤器控件看起来很简单,但是我们必须仔细考虑如何使其性能良好并易于访问。u003Cu002Fpu003Eu003Cpu003E对用户输入进行清洗,以帮助用户更容易地匹配选项;它不区分大小写,忽略重复的空格,并将’and’与 ‘&’ 匹配,反之亦然。u003Cu002Fpu003Eu003Cpu003E隐藏文本会向屏幕阅读器反馈找到了多少匹配项,选择了多少选项,并在提供用户输入文本时提供实时上下文。u003Cu002Fpu003Eu003Cpu003E无论过滤器是怎样,选中的复选框都会显示出来。u003Cu002Fpu003Eu003Cpu003E选项选择组件仍然有一些其他的小的可访问性问题,但是这个过滤器的添加极大地改进了它。我们还在测试和改进它,你可以在我们的新闻和通讯(https:u002Fu002Fwww.gov.uku002Fsearchu002Fnews-and-communications )查找器上亲自尝试。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E结论u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E从这次经历中我们可以学到一些重要的东西。u003Cu002Fpu003Eu003Cpu003E如果有些东西是不可访问的,这对每个人来说都是一个问题。在数百个复选框中找到一个复选框不仅对使用屏幕阅读器的人来说是一个问题,对我们所有人来说都是困难的。u003Cu002Fpu003Eu003Cpu003E让某些东西变得可访问并不一定需要一个全新的方法。尽管自动完成看起来是更好的选择,但最终对原始组件的一个小更改则更适合我们的需要。u003Cu002Fpu003Eu003Cpu003E在某件事上投入时间和精力不应该让它变得不可或缺。虽然我们花了很多时间将自动完成集成到我们的查找器中,但这并不是解决问题的最佳方法。丢弃某样东西可能很难,但有时这是正确的做法。u003Cu002Fpu003Eu003Cpu003E最后,虽然我们没有在查找器中使用它,但是自动完成组件被GOV.UK上的其他团队成功地使用了。u003Cu002Fpu003Eu003Cblockquoteu003E英文原文:https:u002Fu002Faccessibility.blog.gov.uku002F2019u002F04u002F08u002Faccessibility-lessons-dealing-with-a-large-amount-of-form-inputsu002F?utm_source=CSS-Weekly&utm_campaign=Issue-359&utm_medium=web 译者:浣熊君( ・᷄৺・᷅ )u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:组件的设计思路:从大量选项中进行多选

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/10826.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code