Wenn man ~~~HTML <ul class="tree" role="tree" aria-labelledby="main-nav"> <li class="main-treeitem" role="main-treeitem"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button> <ul class="group" role="group"> ~~~ dort das erste ul und li löschen kann / könnte , dann ist mein Problem wohin mit dem role="tree" und vorallem dem aria-labelledby="main-nav" ist das nicht wichtig? Das war auch der Grund warum ich noch ein "umschliessendes" ul und li dort hingemacht habe. Oder kann man auf das aria-labelledby="main-nav" verzichten. Menno, wie macht man es richtig? Ansonsten lasse ich es weg und dann ist es so wie mein ursprünglicher Quelltext, hier und da muß ich die Pfade zu den Buttons und den <li>`s anpassen, also da: ~~~CSS nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; } [aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded]::after { content: " "; white-space: normal; } [aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded="false"]::after { content: " "; } [aria-expanded="false"] + * { display:none !important;} ~~~ Also WAS ist jetzt wichtig für meine Navi betreffs WAI-ARIA??? ODER wäre es so richti(er)? ~~~HTML <div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav" aria-labelledby="main-nav"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button> <ul class="group" role="group"> <li class="treeitem" role="tree-item"> etc. etc... ~~~ Hoffe auf Antworten... Es geht mir um die richtige "Form"... lieben gruß und gute n8 der einsiedelnde

Wenn man ~~~HTML <ul class="tree" role="tree" aria-labelledby="main-nav"> <li class="main-treeitem" role="main-treeitem"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button> <ul class="group" role="group"> ~~~ dort das erste ul und li löschen kann / könnte , dann ist mein Problem wohin mit dem role="tree" und vorallem dem aria-labelledby="main-nav" ist das nicht wichtig? Das war auch der Grund warum ich noch ein "umschliessendes" ul und li dort hingemacht habe. Oder kann man auf das aria-labelledby="main-nav" verzichten. Menno, wie macht man es richtig? Ansonsten lasse ich es weg und dann ist es so wie mein ursprünglicher Quelltext, hier und da muß ich die Pfade zu den Buttons und den <li>`s anpassen, also da: ~~~CSS nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; } [aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded]::after { content: " "; white-space: normal; } [aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded="false"]::after { content: " "; } [aria-expanded="false"] + * { display:none !important;} ~~~ Also WAS ist jetzt wichtig für meine Navi betreffs WAI-ARIA??? ODER wäre es so richti(er)? ~~~HTML <div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav" aria-labelledby="main-nav"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button> <ul class="group" role="group"> <li class="treeitem" role="tree-item"> etc. etc... ~~~ Hoffe auf Antworten... lieben gruß und gute n8 der einsiedelnde

Wenn man ~~~HTML <ul class="tree" role="tree" aria-labelledby="main-nav"> <li class="main-treeitem" role="main-treeitem"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button> <ul class="group" role="group"> ~~~ dort das erste ul und li löschen kann / könnte , dann ist mein Problem wohin mit dem role="tree" und vorallem dem aria-labelledby="main-nav" ist das nicht wichtig? Das war auch der Grund warum ich noch ein "umschliessendes" ul und li dort hingemacht habe. Oder kann man auf das aria-labelledby="main-nav" verzichten. Menno, wie macht man es richtig? Ansonsten lasse ich es weg und dann ist es so wie mein ursprünglicher Quelltext, hier und da muß ich die Pfade zu den Buttons und den <li>`s anpassen, also da: ~~~CSS nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; } [aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded]::after { content: " "; white-space: normal; } [aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded="false"]::after { content: " "; } [aria-expanded="false"] + * { display:none !important;} ~~~ Also WAS ist jetzt wichtig für meine Navi betreffs WAI-ARIA??? lieben gruß und gute n8 der einsiedelnde