Question

我有一个显示一些数据库记录的网格，在这些记录的左边我想要编辑/删除按钮。

我希望这些按钮有一个简单的图标。我会使用以下html：

<button class="grid-edit" type="button" />
<button class="grid-delete" type="button" />

然后是background-image等，以使它们可见并为其设置样式。

然而，我担心HTML本身对于“语义网”概念没有足够的意义。

我看到了几个选项：

让按钮有一些文字并通过CSS隐藏它 - 但是没有正确的跨浏览器，没有黑客的方法来使文本隐形AFAIK;
包含<img>元素 - 但img不应用于文体目的;
请改用<input type="image">。这是正确的方法吗？

Answer 1

标记方式，您有一个带有描述性类属性的按钮元素。这很有语义性。

可访问性方面，屏幕阅读器没有任何东西可以指示按钮的用途，因为没有文本。您可以在按钮内提供文本，并使用CSS直观地隐藏它（不使用display: none或visibility: hidden，因为它们也会将其隐藏在屏幕阅读器中），或者为屏幕提供备用文本源读者。

将文本直接放在按钮元素中，并使文本偏移，使其不可见 <button>text</button>
将文本放在另一个隐藏的元素中 <button><span>text</span></button>
例如Drupal's element-invisible class
Use ARIA label attributes
<button aria-label="text" />

Answer 2

使用它的传统形式是创建一个<a></a> html标记并使用CSS对其进行样式化，DOM语言（Javascript，JQuery ...）将操作此标记。

例如，一个用于排除的按钮：

https://jsfiddle.net/5nw1deg0/

HTML

<a href="#" class="button-exclude"> Exclude</a>

CSS：

.button-exclude{
    background: url('https://cdn4.iconfinder.com/data/icons/linecon/512/delete-20.png') no-repeat;
    padding-left: 30px;
}

JQuery的：

$('.button-exclude').click(function(event){
    event.preventDefault(); // used for block de default action of 'a' element.
    alert('Item excluded.');
});

在HTML中使用仅图像按钮的最佳方法

2 个答案: