ARIA for this type of sidebar
Hi all, new to frontend and especially CSS.
I've made a sidebar, semantically like this:
Attached are flicks for desktop and mobile (sidebar open).
I'd really appreciate tips, links and information on how to proceed from here to make this sidebar accessible
I've made a sidebar, semantically like this:
<c-sidebar data-hidden="true" data-opened-by="c-header__button-open" data-closed-by="c-header__button-close">
<aside class="c-sidebar__main-aside" inert>
<nav class="c-sidebar__main-nav">
Links would go here
</nav>
</aside>
</c-sidebar>
<main>
<c-header data-open-by=".c-header__button-open" data-close-by=".c-header__button-close">
<header>
<div class="container">
<div class=" display-wrapper">
<div class="controls">
<button class="c-header__button-close">
<span slot="close-sidebar-icon">{% include "icon/panel_left_close.html" %}</span>
</button>
<button class="c-header__button-open">
<span slot="open-sidebar-icon">{% include "icon/panel_left_open.html" %}</span>
</button>
</div>
<a href="#">
<span slot="logo">{% include "m.html" %}</span>
</a>
</div>
</div>
</header>
</c-header> <c-sidebar data-hidden="true" data-opened-by="c-header__button-open" data-closed-by="c-header__button-close">
<aside class="c-sidebar__main-aside" inert>
<nav class="c-sidebar__main-nav">
Links would go here
</nav>
</aside>
</c-sidebar>
<main>
<c-header data-open-by=".c-header__button-open" data-close-by=".c-header__button-close">
<header>
<div class="container">
<div class=" display-wrapper">
<div class="controls">
<button class="c-header__button-close">
<span slot="close-sidebar-icon">{% include "icon/panel_left_close.html" %}</span>
</button>
<button class="c-header__button-open">
<span slot="open-sidebar-icon">{% include "icon/panel_left_open.html" %}</span>
</button>
</div>
<a href="#">
<span slot="logo">{% include "m.html" %}</span>
</a>
</div>
</div>
</header>
</c-header>Attached are flicks for desktop and mobile (sidebar open).
I'd really appreciate tips, links and information on how to proceed from here to make this sidebar accessible
