KPC
Kevin Powell - Community•3mo ago
Elias

ARIA for this type of sidebar

Hi all, new to frontend and especially CSS. 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
No description
No description
5 Replies
Kevin Powell
Kevin Powell•3mo ago
First, I don't think you want to use inert in the aside? ~Though maybe you are removing it when it opens? If you're trying to make it accessible, my first thought would be the buttons to open and close it. Accessibility starts with those, where they need to use a aria-controls="" and aria-expanded="" The controls should point to the ID of the element that the button opens/closes, and the expanded is true/false, depending on if it's opened or not. Do you need two buttons? Looking at the screenshots, I only see one... if you're hiding/showing based on whether it's opened or not, I'd just have a single button and update the icon depending on if it's opened or closed. Also, it looks like the buttons only have icons in them. If that's the case, you either need some visually hidden text, or an aria-label . My last question would be whether or not the nav should be in an aside or not. It very much depends on the types of links and the page content... if it's the primary navigation for the site, it shouldn't be in an aside, but if it's complementary things (like say, a course platform, and it links to other lessons), then an aside would be good...
Elias
EliasOP•3mo ago
Hey @Kevin Powell , really appreciate your time on this, to go through the points you've raised. inert is removed when data-hidden is false. I hope this is correct. Next, with respect to the buttons, if I remove one of them then I just use an aria-controls and an aria-expanded (I think you showed this on your recreate a frontend masters layout video). Question, should I use JS to update the button with the correct icon? For the hidden text, I'll use the .visually-hidden class you forwarded in that same video with some text like "Menu". It's for primary navigation. I'm not married to an aside, infact the nesting has caused me more trouble than it's worth.
Kevin Powell
Kevin Powell•3mo ago
yeah that visually hidden class would work perfect for that. You can google that and find the code to copy/paste as well. Since it's the primary nav, I wouldn't bother with the aside. Aside isn't for sidebars, but for tangential information 🙂
Elias
EliasOP•3mo ago
My man! thank you. @Kevin Powell Sorry there was one thing I asked that I don't know if you answered but do you use JS to change the icon? I can't quite get my head around how you would do that in CSS without doing one of those url( functions (which ends up in another request so it's not something I want to do) I suppose if I just used an arrow I could transform it or something but an arrow isnt' really as good as that icon.
Kevin Powell
Kevin Powell•3mo ago
yeah, you're already using js, so no problem doing it that way 🙂

Did you find this page helpful?