HTML/CSS: Navigation links

[beatovich]

hallo

<!-- tablist should have accessible name -->

<div role="tablist" aria-orientation="vertical">

    <button id="tab-1"
            type="button"
            role="tab"
            tabindex="0"
            aria-selected="true">Tab 1</button>

...
</div> <section role="tabpanel" aria-labelledBy="tab-1">

<!-- content of tab 1 -->

</section>

Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?

Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.

Was soll geschehen, wenn der Fokus den Tabcontent verlässt?

Die wahrscheinlichste Antwort: Es soll der button fokusiert werden, der durch aria-labeledby (oder aria-controls) beschrieben wird.

Zusatzfrage: wo soll mein Fokus hin, wenn ich den letzten Button der Tabgruppe verlasse?

Die wahrscheinlichste Antwort, es soll das erste fokusierbare Element nach der Tab-Panel-Gruppe navigiert werden.

Kurzer Sinn der Fragen: Tabpanels sind weit komplexer. Auch dein Code reicht nicht, geht aber in die richtige Richtung.