HTML5辅助功能：如何指示网格和列表布局之间的切换？(HTML5 Accessibility: How to indicate switching between grid and list layout?)
我想创建按钮以在网格和列表布局之间切换以显示图像表：
Layout:
Set list layout
Set grid layout
如果选择列表布局看起来像常规表(
和分离的的图像数据，没有缩略图)，当选择网格时，它看起来像缩略图的网格。 但我不知道如何标记屏幕阅读器/搜索引擎， Layout标签描述了这2种可能性。 如果涉及无线电/复选框，这很容易，因为可以使用fieldset / legend方法 ，但没有形式。 看起来有两种可能的解决方案： aria-describedby或aria-labelledby 。 但他们非常相似，IMO他们不能完全适应我的问题 - 因为我需要像fieldset / legend这样的东西来指示可能的值而不是附加描述，我想。 有什么东西可以帮助我，比如fieldset / legend但不是表格吗？ 提前感谢您的每一个答案。I want to create buttons to switch between grid and list layout for displaying table of images:
Layout:
Set list layout
Set grid layout
And if list is chosen layout looks like regular table (
and image data in separated s, no thumbnail), when grid is chosen it looks like grid of thumbnail. But I don't know how to label to screen readers / search engines that Layout label describes this 2 possibilities. It's easy if it comes to radios/checkboxes cause then fieldset / legend approach can be used, but there is no form. It looks like there is 2 possible solutions: aria-describedby or aria-labelledby. But they quite similar and IMO they do not fit in 100% to my problem - cause I need something like fieldset / legend to indicate possible values rather than aditional description, I think. Is there something which can help me, something like fieldset / legend but not for forms? Thank you in advance for every answer.原文：https://stackoverflow.com/questions/39377343
更新时间：2020-10-24 16:10
最满意答案
您可以在没有form情况下使用fieldset / legend 。
但是你首先需要做什么吗？ button元素已经具有描述性标签(它们的内容)，并且可以独立存在。 像“布局”这样的附加标签并没有真正添加任何内容，因为按钮已经明确表示他们设置了布局。
您可以考虑使用menu角色 (“为用户提供选项列表的一种小部件类型。”)，并为每个按钮指定menuitem角色 ：
menu或menubar包含的一组选项中的选项。
请注意，您不能在fieldset元素上使用menu 。 你可以使用这样的东西：
Set grid layout
Set list layout
(注意我添加了type="button" ;否则按钮被认为是提交按钮。)
You could use fieldset/legend without a form.
But do you need to do anything in the first place? The button elements already have descriptive labels (their content), and can stand on their own. An additional label like "Layout" doesn’t really add anything, as the buttons already make clear that they set the layout.
You could consider to use the menu role ("A type of widget that offers a list of choices to the user."), and give each button the menuitem role:
An option in a group of choices contained by a menu or menubar.
Note that you can’t use menu on a fieldset element. You could use something like this:
Set grid layout
Set list layout
(Note that I added type="button"; otherwise the buttons are considered to be submit buttons.)
相关问答
立即突出的两件事可以改进： 1)你正在使用看似有字体图标的东西似乎有没有文字替代的含义：
您可以为此提供aria-label属性 。 另外，如果<1> ，我建议使用span：
2)链接中的文本是重复的，没有关于链接目的地的具体信息。 屏幕阅读器用户经常扫描链接以了解页面内容， 而没有周围的内容，这可能没那么有用 (“了解更多”，“了解更多”，“
...
仅适用于div： 要仅将列更改应用于div，请将div添加到div，例如#gridView 。 使用此ref来获取包含grid-list的div的width 。 然后我们可以在div宽度改变时使用flex-layout [fxShow] ，并根据div的大小设置col编号。 HTML：
#gridView
[ngStyle]="{ 'width.px': divSize }"
[fxShow]="set
...
如果你正在寻找一个网格，X.Forms内置列表不是最好的。 但是你可以使用这个： https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView 对于您正在寻找的网格显示器来说，这太棒了。 非常灵活和有据可查。 Xamarin.Forms ListView非常稳定，所以你不会有任何问题与她合作 对于性能问题，请使用此列表视图性能 祝你好运 If you're looking for a Grid
...
问题是你没有重置队列。 所以，如果你快速鼠标悬停/鼠标。 它什么都不会显示。 尝试这个： $('body').on("mouseenter", ".image a img", function () {
$(this).stop(true, false).fadeTo('slow', 0.7);
})
.on("mouseleave", ".image a img", function(){
$(this).stop(true, false).fadeTo('slow',
...
您可以在没有form情况下使用fieldset / legend 。 但是你首先需要做什么吗？ button元素已经具有描述性标签(它们的内容)，并且可以独立存在。 像“布局”这样的附加标签并没有真正添加任何内容，因为按钮已经明确表示他们设置了布局。 您可以考虑使用menu角色 (“为用户提供选项列表的一种小部件类型。”)，并为每个按钮指定menuitem角色 ： menu或menubar包含的一组选项中的选项。 请注意，您不能在fieldset元素上使用menu 。 你可以使用这样的东西：
...
已决定使用两个不同的模板和切换开关来完成。 到目前为止，似乎是最新版角度的最佳解决方案。 Have decided to do it using two different templates and the toggle switch. Seems the best solution thus far in latest version of angular.
以下是使用现有标记的示例 请注意它们从上到下流动，而不是从左到右流动。 div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 220px; /* 30px + 80px times 2 row */
}
div > * {
width: 33.33%;
box-sizing: border-box;
}
h3 {
margin: 0
...
从OS X 10.10开始， NSStatusItem具有button属性，这是一个基于NSView的常规控件，符合NSAccessibility协议，允许直接更改accessibilityTitle属性。 在早期版本的OS X中，您可以实现一个自定义按钮，其外观和行为与vanilla NSStatusItem完全相同，并通过-[NSStatusItem setView:]方法将其分配给项目，然后使用-[NSView accessibilitySetOverrideValue:... forAtt
...
“简单”的方式： img {
float: left;
}
这是一个jsfiddle。 http://jsfiddle.net/Sp3pU/ The "easy" way: img {
float: left;
}
Here's a jsfiddle. http://jsfiddle.net/Sp3pU/
现在你可以使用flex。 对于边框，您可以从阴影中绘制它们并添加负边距以重叠它们： ul , li{
display:flex;
flex-wrap:wrap;
padding:1em;
}
li {
min-width:40px;/* you can let content decide */
min-height:40px;/* you can let content decide */
box-shadow:inset 0 0 0 1px;
ma
...
62
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
