1

I have a grid that displays some database records, and to the left of these I want to have edit/delete buttons.

I want these buttons to have a simple icon. I would use the following html:

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

and then a background-image etc to make them visible and style them.

However I'm concerned that the HTML itself is not meaningful enough, with regards to the "semantic web" concept.

I see several options:

  • Make the button have some text and hide it via CSS - but there is no proper cross-browser, no-hack way to do make text invisible AFAIK;
  • Include an <img> element - but img should not be used for stylistic purposes;
  • Use <input type="image"> instead. Is this the correct way?
MarioDS
  • 12,895
  • 15
  • 65
  • 121
  • 1
    @canon the issue is that it's not clear from the HTML alone what the button does. It's a button but it's also empty. How do screen-readers, for example, react to this? – MarioDS Mar 24 '15 at 18:12
  • 1
    *but there is no proper cross-browser, no-hack way to do make text invisible AFAIK*. what did you try to come to this conclusion? Here is one possible way: http://jsfiddle.net/72o0abhf/ – Nico O Mar 24 '15 at 18:15
  • 1
    @NicoO do screen readers interact with hidden elements? – canon Mar 24 '15 at 18:17
  • @canon that is a very good question. I don't know. But you are right, that this information is missing in my comment. [I Guess it will not be read](http://stackoverflow.com/a/1755802/3244925) – Nico O Mar 24 '15 at 18:19
  • Screen readers will not interact with elements that are not displayed (if you can't see them, why should they think they exist?) – gapple Mar 24 '15 at 18:27
  • elements are fine, but you should be using to give meaningful context. On a solid site, ``, `Text` and `` would all look the same based on the `.btn` class – Matthew Darnell Mar 24 '15 at 18:33

1 Answers1

3

Markup-wise, you have a button element with a descriptive class attribute. That's pretty semantic.

Accessibility-wise, a screen reader will have nothing to indicate the button's purpose since there is no text. You can either provide the text within the button, and use CSS to visually hide it (not using display: none or visibility: hidden, since those hide it from screen readers too), or provide an alternate text source for screen readers.

  • Place the text directly in the button element, and offset the text so that it is not visible
    <button>text</button>
  • Place the text within another element, that is hidden
    <button><span>text</span></button>
    e.g. Drupal's element-invisible class
  • Use ARIA label attributes
    <button aria-label="text" />
gapple
  • 3,463
  • 22
  • 27
  • The text inside the button will give you the best results if possible. Here's a quick fiddle: https://jsfiddle.net/avgLLm3w/3/ – Buck Mar 25 '15 at 17:23