在 HTML 中拥有仅图像按钮的最佳方式
Best way to have an image-only button in HTML
我有一个显示一些数据库记录的网格，我希望在这些记录的左侧有 edit/delete 个按钮。
我希望这些按钮有一个简单的图标。我会使用以下 html:
<button class="grid-edit" type="button" />
<button class="grid-delete" type="button" />
然后 background-image 等使它们可见并设置样式。
不过，我担心 HTML 本身就 "semantic web" 概念而言意义不够。
我看到几个选项：
- 让按钮有一些文本并通过 CSS 隐藏它 - 但是没有合适的跨浏览器，无黑客方法可以使文本不可见 AFAIK；
- 包含一个
<img> 元素 - 但 img 不应用于风格目的；
- 改用
<input type="image">。这是正确的方法吗？
在标记方面，您有一个带有描述性 class 属性的按钮元素。这很语义化。
在可访问性方面，屏幕 reader 将没有任何内容来指示按钮的用途，因为没有文本。您可以在按钮内提供文本，并使用 CSS 以可视方式隐藏它（不使用 display: none 或 visibility: hidden，因为它们也将它从屏幕 reader 中隐藏） ，或为屏幕 readers.
提供备用文本源
- 将文本直接放在按钮元素中，并偏移文本使其不可见
<button>text</button>
- 将文本放在另一个隐藏的元素中
<button><span>text</span></button>
例如Drupal's element-invisible class
- Use ARIA label attributes
<button aria-label="text" />
我有一个显示一些数据库记录的网格，我希望在这些记录的左侧有 edit/delete 个按钮。
我希望这些按钮有一个简单的图标。我会使用以下 html:
<button class="grid-edit" type="button" />
<button class="grid-delete" type="button" />
然后 background-image 等使它们可见并设置样式。
不过，我担心 HTML 本身就 "semantic web" 概念而言意义不够。
我看到几个选项：
- 让按钮有一些文本并通过 CSS 隐藏它 - 但是没有合适的跨浏览器，无黑客方法可以使文本不可见 AFAIK；
- 包含一个
<img>元素 - 但img不应用于风格目的； - 改用
<input type="image">。这是正确的方法吗？
在标记方面，您有一个带有描述性 class 属性的按钮元素。这很语义化。
在可访问性方面，屏幕 reader 将没有任何内容来指示按钮的用途，因为没有文本。您可以在按钮内提供文本，并使用 CSS 以可视方式隐藏它（不使用 display: none 或 visibility: hidden，因为它们也将它从屏幕 reader 中隐藏） ，或为屏幕 readers.
- 将文本直接放在按钮元素中，并偏移文本使其不可见
<button>text</button> - 将文本放在另一个隐藏的元素中
<button><span>text</span></button>
例如Drupal'selement-invisibleclass - Use ARIA label attributes
<button aria-label="text" />