flutter 网格排序_网格，内容重新排序和可访问性

最新推荐文章于 2024-05-24 09:31:32 发布

cundai5745

最新推荐文章于 2024-05-24 09:31:32 发布

阅读量283

点赞数

文章标签： java 人工智能 python 机器学习编程语言

原文链接：https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/

版权

flutter 网格排序

I have long been concerned about the potential accessibility problems that grid layout could cause. These essentially centre around the concept of disconnecting the source from the visual display.

长期以来，我一直担心网格布局可能导致的潜在可访问性问题。这些本质上是围绕从视觉显示中断开源的概念。

As a short explanation, values of display - other than none, do not change the logical order or visibility of your content. So, the order that things are in the source, is the order that they are tabbed to, and the order they are read out by a screen reader. If you mess around with the order - be that with flexbox flex-direction: row-reverse, or grid-auto-flow: dense, or by positioning items with grid layout - you risk making a very odd and disconnected experience. I’m not an a11y expert, for a much better description see:

作为一个简短的说明，值display -比其他none ，不改变你的内容的逻辑顺序或知名度。因此，事物在源中的顺序是它们被制表的顺序以及屏幕阅读器将其读出的顺序。如果您弄乱了顺序（使用flexbox flex-direction: row-reverse或grid-auto-flow: dense densed，或通过使用网格布局放置项目），则可能会遇到非常奇怪且脱节的体验。我不是专家，有关更好的说明，请参见：

When people first start using grid they do pretty basic things, and so for a couple of years we haven’t really been running into this too much in the wild. However, it seems that all of a sudden I’m seeing really great tools and tutorials pop up, that make me worry. You’ve all learned grid, you are now doing neat stuff with it, and some of that stuff is potentially terrifying from the content reordering standpoint. It has to be said, most of the people publishing these tutorials are also adding a warning about this issue, and I’m glad that the message is out there. I think I have included that information in every one of my grid talks one way or another. However we know that not everyone is so diligent, and the code of those tutorials will not always be used with such care. Recent examples are:

当人们第一次开始使用网格时，他们会做非常基本的事情，因此几年来，我们并没有真正在野外碰到太多东西。但是，似乎突然之间我看到了非常棒的工具和教程，这让我感到担心。大家已经学过网格，现在正在使用它做一些整洁的事情，而从内容重新排序的角度来看，其中的一些事情可能会令人恐惧。不得不说，大多数发布这些教程的人都在添加关于此问题的警告，我很高兴看到此消息。我想我已经以一种或另一种方式在每个网格讨论中都包含了这些信息。但是，我们知道并不是每个人都那么勤奋，并且这些教程的代码不会总是如此谨慎地使用。最近的例子有：

Creators of these things, please don’t see this as me calling you out personally, I needed to include them to demonstrate the things people are doing which are cool but also potentially problematic in the wild.

这些东西的创造者，当我亲自叫你出来时，请不要看到它，我需要包括它们，以证明人们正在做的事情很酷，但在野外也可能存在问题。

I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess. We’ve given people these great tools, and now I feel as if I’m having to tell people not to use them. Some people won’t, because they know and care. Many others will because they either don’t know, don’t care, or are using some visual grid builder which does not expose this information to them.

我认为这是我们非常需要在CSS级别解决的问题。我们需要提供一种允许标签和阅读顺序遵循视觉顺序的方法。源顺序是一个很好的默认设置，如果您利用正常流程，那么紧随其后的很多时间正是您想要的。但是，并非总是如此，并非在每个断点处。如果我们不为人们提供解决方案，那么最终将是一团糟。我们已经为人们提供了这些出色的工具，现在我感觉好像不得不告诉人们不要使用它们。有些人不会，因为他们知道并关心。许多其他人会因为他们不知道，不在乎或正在使用某些可视化网格生成器而不会向其公开此信息。

For developers, and those writing tutorials reading this, please do consider these issues in your excitement to use Grid Layout. Please ensure the issue is raised in any talk, tutorial, or tool you create. A pretty good way to check that you haven’t made a terrible mess is by using the Tab Stops Checker in the Accessibility Insights tool.

对于开发人员，以及那些正在阅读此书的教程，请在使用Grid Layout时兴奋地考虑这些问题。请确保在您创建的任何演讲，教程或工具中都出现了此问题。检查您没有造成严重混乱的一种不错的方法是使用Accessibility Insights工具中的Tab Stops Checker。

For those working on a11y and CSS, this has been discussed before, however given the things I am starting to see in the wild, I think this has to have some urgency behind it. We’re can’t keep asking people to abstain from using the powerful and fun tools we’ve handed them. We need to offer a way to use these things safely, particularly before we end up with a lot of tools which auto-generate grid code.

对于从事a11y和CSS工作的人，之前已经讨论过了，但是鉴于我开始在野外看到的东西，我认为这背后必须有一些紧迫性。我们不能不让人们放弃使用我们交付给他们的强大而有趣的工具。我们需要提供一种安全使用这些东西的方法，尤其是在我们最终获得许多自动生成网格代码的工具之前。