CODEWITHSUNDEEP
htmlcssimagebutton
MarioDS
MarioDS

Reputation: 13063

Best way to have an image-only button in HTML

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:

Upvotes: 1

Views: 3156

Answers (1)

gapple
gapple

Reputation: 3474

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" />

Upvotes: 3

Related Questions