Use the aria-label attribute to provide an invisible label when there is no visible label but the context and visual appearance of the control make its purpose clear.

Simple Icon

How it looks

image of simple phone icon

The code

<div class="phone-icon" aria-label="Telephone"></div>
.phone-icon {
display: inline-block;
word-break: break-all;
padding-left: 25px;
position: relative;
}

.phone-icon:before {
content: '\e903';
color: #57068c;
display: inline-block;
width: 20px;
font-family: icomoon;
font-size: 18px;
text-align: center;
vertical-align: middle;
position: absolute;
left: 0px;
top: 0px;
}
 

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.

Button Icon

How it looks

image examples of button icons

The code

<button class="icon-cls" aria-label="Close"></button>
<button class="icon-next" aria-label="Next"></button>
<button class="icon-download" aria-label="Download"></button>
<button class="icon-reset" aria-label="Reset"></button>
<button class="icon-gallery" aria-label="Gallery"></button>
.icon-cls {
display: inline-block;
width: 43px;
height: 43px;
cursor: pointer;
}

.icon-cls:before {
font-family: icomoon;
content: "";
font-size: 20px;
color: #57068c;
display: block;
height: 100%;
width: 100%;
text-align: center;
line-height: 40px;
}