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

Fails everything as is.

Let's try to fix it.

===Start===

===finish===

Code used

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

This will also require trapping the enter key and spacebar and firing the same code when these keys are pressed, as the mouse click fires.

Accessibility Support technology used

Comments

xxxxxxxx