Background image et accessibilité, la suite

Bonjour tout le monde

J'ai lu avec attention le récent débat sur les images en arrière plan d'un titre.

Quelque chose que l'on retrouve souvent et qui est aussi problématique, c'est ce même problème mais dans les liens d'un menu !
Or là, l'accessibilité me semble encore plus primordiale étant donné que c'est des liens.
Il est très tentant d'utiliser des css et la méthode des background position pour obtenir un effet rollover sur les liens d'un menu. Tant que ce sont des vrais background, aucun problème.
Mais quand le texte est inclus dans l'image, tout se complique.
Personnellement, je déconseille d'inclure le texte dans l'image et je l'évite autant que possible. Je préfère les menu comme sur Alsa avec un texte par dessus une image.
Cependant, c'est pas toujours moi qui décide et parfois il faut le faire quand même.
On peut tout faire en javascript mais quand on veut s'en tenir à des css (pour plus d'accessibilité ?) ca commence à bloquer au niveau de l'accessibilité avec les options "css activé sans images"

Voici un code que je viens d'inventer pour essayer de palier à ce problème :
Le résultat

code css :

            #menu {
               background-color: #52B5FF;
               height: 26px;
            }
            #menu li {
                position: relative;
                display: block;
                float: left;
                color: #fff;
                background: #3c83b8; /* couleur de fond du lien */
                height: 25px;
            }
            
            #menu li a {
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                height: 25px;
                text-indent: -5000px;
                overflow: hidden;
            }
            
            #menu li a.home {
                background: transparent url(nav_home.gif) top left no-repeat;
                
            }
            #menu .home {
                width: 64px;
            }
            
            #menu li a.offers {
                background: transparent url(nav_offers.gif) top left no-repeat;
                
            }
            #menu .offers {
                width: 84px;
             }
            
            #menu li a.courses {
                background: transparent url(nav_courses.gif) top left no-repeat;
                
            }
            
            #menu .courses {
                width: 63px;
            }
            
            #menu li a:hover {
                background-position: bottom left;
            }

xhtml

    <ul id="menu">

        <li class="home">Home: <a class="home" href="#">Home</a></li>
        <li class="offers">Offers: <a class="offers" href="#">Offers</a></li>
        <li class="courses">Courses: <a class="courses" href="#">Courses</a></li>
    </ul>

L'idée principale (pour ceux qui ont la flème de lire), c'est de répéter l'information contenue dans le lien directement dans la liste et de placer le lien en absolu pour qu'il recouvre le texte.

Bien sûr, ce code a des défauts. Déjà, on répète quelque chose ce qui ets un peu pourri. Pour les "sans css", ca fait qu'ils voient à peu près la même chose deux fois.
Si vous testez, ca rend :
* Home: Home
* Courses: Courses
* Offers: Offers

Surtout qu'on ne doit pas remplacer le texte du lien par un simple "cliquez ici" qui serait très dommageable pour le réfencement. C'est d'ailleurs déconseillé par le W3C.

Que pensez-vous de ce code ?
Solution pas trop pourrie ou solution pire que le problème de départ ?