Ich habe im header ein normales Suchfeld. Dieses wird erst minimiert angezeigt (siehe Bild1 Anhang) mit einer Art Lupe, Klickt man die Lupe an, öffnet sich erst das eigentliche Suchfeld (siehe Bild2 Anhang) . Das funktioniert für sehende Nutzer auch gut. Jedoch haben blinde Nutzer die per Tastatur steuern und per Screenreader die Seite erfassen z.B. das Problem, dass sich beim aktivieren der Lupe mittels Enter-Taste der Fokus nicht in das sich nun öffnende Suchfeld weiterbewegt. Der blinde Nutzer bemerkt also garnicht, dass sich das Suchfeld öffnet und er gezwungen ist, nochmals die TAB-Taste zu bestätigen, um überhaupt im Suchfeld zu landen. Das ist natürlich für Blinde mindestens unkomfortabel, wenn nicht sogar irritierend, da er damit rechnet, im unmittelbar nächsten Schrift sein Suchbegriff eingeben zu können und nicht erst weitere Tasten drücken zu müssen.
2 Lösungen fallen mir da theoretisch ein:
- entweder man bekommt das unmittelbare Suchfeld direkt angezeigt ohne diese 'Vorschau-Lupe' oder
- die elegantere Lösung, beim Betätigen der 'Lupe' öffnet sich das Suchfeld und der Fokus wandert automatisch in dieses Suchfeld (über den Screenreader sollte das kommuniziert werden)
Hier der derzeitige Code:
<nav id="site-navigation" class="main-navigation clear" role="navigation">
<h1 class="menu-toggle"><a href="#mainmenu"><?php _e( 'Menu', 'simone' ); ?></a></h1>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<div class="search-toggle">
<em class="fa fa-search"></em>
<a href="#search-container" accesskey="5" class="screen-reader-text"><?php _e( 'Search', 'simone' ); ?></a>
</div>
<?php simone_social_menu(); ?>
</nav><!-- #site-navigation -->
<div id="header-search-container" class="search-box-wrapper clear hide">
<div class="search-box clear">
<?php get_search_form(); ?>
</div>
</div>Für Hinweise bin ich sehr dankbar!