Fehlerhafte Darstellungen im Edge

[beatovich]

hallo

`<a class="anzume" href="#main-nav">zum Hauptmenü</a>

<nav id="main-nav" aria-label="main navigation">

<button aria-controls="exp_MainMenu" aria-expanded="false"> </button>

  	<ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu">

  			<li>
  					<a class="a-link" href="http://xxx.de/aktuell.html">Aktuelles</a>
  					<button aria-controls="exp_SubMenu_1" aria-expanded="false"> </button>
  					<div id="exp_SubMenu_1" aria-labelledby="label_exp_SubMenu_1" class=nav-group>
  					<a class="a-sublink" href="http://xxx.net/ausstellungen.html">aktuelle Ausstellungen</a>
  						<a class="a-sublink" href="http://xxx.net/ausstellungen.html">Blog</a>
  					</div>
  			</li>

  				<li>
  					<a class="a-link" href="http://xxx.de/arbeiten.html">Arbeiten</a>
  					<button aria-controls="exp_SubMenu_2" aria-expanded="false"> </button>
  					<div id="exp_SubMenu_2" aria-labelledby="label_exp_SubMenu_2" class=nav-group>
  						 <a class="a-sublink" href="http://xxx/arbeit01.html">Drifters, 2012</a>
  						 <a class="a-sublink" href="http://xxx/arbeit02.html">Waldfrieden, 2006</a>
  						 <a class="a-sublink" href="http://xxx/arbeit03.html">Eremitage für Paris, 2006</a>
  						 <a class="a-sublink" href="http://xxx/arbeit04.html">Der Bau, 2007</a>
  					</div>
  				</li>
  </ul>`

bisher hatte ich <button> ein icon, informeines .svg gegeben

Menno wie macht man das richtig und ist wenigstens das ari-gedöns nun richtig?

sparsam.

Meines Erachtens ist aria-controls hier nicht notwendig da das unmittelbar folgende Element kontrolliert wird.

aria-expanded="false" wird erst dann richtig, wenn der zustand auch mit javascript umgeschaltet werden kann.

Es ist hier vertretbar aria-expanded="" zu notieren, was zwar ein ungültiger Wert ist, aber dazu führt, dass assistive Technologie die Angabe nicht (und deshalb auch nicht falsch) interpretiert. Trotzdem existiert die Angabe, um von javascript dann initialisiert und geschaltet zu werden.