Accessibility of an anchor (or button) with a glyphicon - html

Question

I'm trying to make my site more accessible. I'm having trouble how to properly do buttons or anchor buttons. In my example I'll have an anchor but the same problem occur for buttons.
Here's how I did an anchor with a glyphicon. The Title attribute helps the mouse user understand what it does.
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
Is this enough for screen readers? Do I also have to add a the same description as sr-only?
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</a>
Or maybe there's a better way that I haven't thought of.

Answer 1

Use aria-label on the interactive element (using title to display the tooltip is perfectly fine but you should also make it visible for keyboard or touchscreen users).
There's no need to set any special attribute (aria-* or role) on the empty span element.
<a href="#" title="Delete lawn project" aria-label="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</a>
As said by #steveax, you should use a native button element :
<button title="Delete lawn project" aria-label="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>

Answer 2

This example would be better as a button since the functionality is a button (an action rather than navigating). If you use an <a> link with a button role, you need to handle all the keyboard interactions that you get for free with a button. Aside from that, what you had looks pretty good. I would make a small adjustment of adding role=img to the icon.
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</button>
Depending upon what browsers/screen readers you need to support, and alternate approach would be to use an aria-label property and omit the extra sr-only content:
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-label="Delete lawn project"></span>
</button>
As always, test.