Remove inline images from Menu so that screen readers don't read them

cleanAccessibleMenu.html

<!-- Bad -->
<ul id="toolbar">
    <li class="menuButton"><a href="#"><div><img src="img/btn_menu.gif" aria-label="Menu" alt=""></div><span>MENU</span></a>
    </li><li class="resourcesButton"><a href="#"><div><img src="img/btn_resources.gif" aria-label="Resources" alt=""></div><span>RESOURCES</span></a>
    </li><li class="helpButton"><a href="#"><div><img src="img/btn_help.gif" aria-label="Help" alt=""></div><span>HELP</span></a>
    </li><li class="exitButton"><a href="#"><div><img src="img/btn_save_exit.gif" aria-label="Save and exit" alt="Save & Exit"></div><span>SAVE & EXIT</span></a></li>
</ul>

<!-- Good -->
<!--  Removed the inline images. These can be added as background images via CSS
      so that screen readers don't read them, and our code remains clean. All screen readers
      see is the text now -->
      
<ul id="toolbar">
    <li class="menuButton"><a href="#">MENU</a></li>
    <li class="resourcesButton"><a href="#">RESOURCES</a></li>
    <li class="helpButton"><a href="#">HELP</a></li>
    <li class="exitButton"><a href="#">SAVE & EXIT</a></li>
</ul>

TECHNICALLY, I would also convert the toolbar ID into a class, and add classes to the anchor tags themselves to keep the selector specificity as low as possible, but sometimes you just need a quick win