back to CanAdapt home

Icon-fonts as search button in WordPress

===start invisible code=== (no CSS used to render icons)

===end sample

Description

This is a snip from a WordPress implemementation nstall of a search bar. Icon fonts are used, and we'll experiment to make them accessible.

Code Used

<nav id="smartMenu">
<ul><li><a href="#">another link</a></li>
<li>
<a id="toggleSearch">
<i class="icon-search"></i>
</a>
</li>
</ul>
</nav>

Fails everything as is.

Let's try to fix it.

===Start===

===finish===

Code used

<nav id="smartMenu">
<ul>
<li>
<a id="toggleSearch" aria-label="search" tabindex="0" role="button" aria-expanded="false">
<i class="icon-search" role="search"></i>
</a>
</li>
</ul>
</nav>

Accessibility Support technology used

Comments

xxxxxxxx