0

We have a hamburger that looks like

bbq button

and when you click it, a popup will show (the class "open" is added to a div).

popup

This is accomplished with fixed positioning. However, it seems like accessibility programs reacts on that kind of positioning elements. We try out SortSite 5.

Is that really good stuff for the purpose?

Actually, it calls the positioning "absolute" although it is "fixed". The same thing probably, because the reason would be that screen readers have problems with those elements.

We really want to have the menu like a popup this way and when you click the bbq-button, the document should not grow in a strange way. For instance, ugliness happened when we tried to float the popup instead.

  • How do I made those programs happy?
  • Should I try to use a screen reader myself instead?
  • Should I have a <nav>-element?

html

<div id="drawer">
  <table role="presentation" class="buttons" style="width: 100%">
    <tr>
       <td class="bbq-parent">
         <div class="bbq"></div>
       </td>
       <td class="logo-parent">
         <div class="logo"
           onclick="javascript:location='.'; event.stopPropagation();"
           onkeypress="javascript:location='.'; event.stopPropagation();"
           tabindex="0"></div>
       </td>
     </tr>
   </table>
   <ul>
     <li><a href="item1.html">item 1</a></li>
     <li><a href="item2.html">item 2</a></li>
     <li><a href="item3.html">item 3</a></li>
     <li><a href="item4.html">item 4</a></li>
   </ul>
</div>

css

#drawer
{
  position: fixed;
  z-index: 1;
  top: 5px;
  left: 5px;
}

#drawer ul
{
  padding-left: 0;
  display: none;
  list-style: none;
  margin-top: -10px;
}

#drawer.open ul
{
  display: block;
}

#drawer .bbq
{
    background: url("Images/bbq.svg") no-repeat;
    background-size: 100% auto;
    width: 23px;
    height: 25px;
    cursor: pointer;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Anders Lindén
  • 6,839
  • 11
  • 56
  • 109
  • Opinion-based questions like "should I do X" and "is this good" are off-topic on Stack Overflow. Instead, focus on _actual problems_ you are facing. Code not compiling, inability to implement a desired layout, resolving an error message, etc. – TylerH Sep 29 '22 at 18:35
  • I had wcag included in the tags, so it is not opinion based but functionality based @TylerH – Anders Lindén Sep 30 '22 at 08:56
  • That's not really accurate. Including WCAG tags might indicate you are looking for WCAG compliance, but you didn't _ask_ about WCAG compliance, you _asked_ multiple opinion-based questions. You can't just include a given tag in an effort to validate an otherwise off-topic question. – TylerH Sep 30 '22 at 13:57
  • The problems I am facing are quite different from those that we normally see here on Stack overflow, I agree about that. They are like "how do I make tool X content" or "is the web audience happy with this or that". But I found no alternative forums so I leaned upon the fact that wcag is an existing tag on Stack Overflow (although it is very design related if I might say so). – Anders Lindén Oct 03 '22 at 21:30

2 Answers2

2

The button should have a button role, or (preferably) it should be a proper <button> element (which gives you that tabindex and basic keyboard operation 'for free'), although you may need to remove some user-agent styles to keep the appearance you have now.

You should also add aria-haspopup="true" to the button, because it opens a popup menu. It would be useful to add aria-expanded="true" when the menu is open as well, and remove it again when the the menu is closed. Assistive tech understands these attributes, and uses them to communicate the state of the button. You can also use them in attribute selectors to change the style. This is much better than using custom class names such as open, because it kills two birds with one stone.

There's another ARIA attribute, which is intended to connect a control to the thing it controls. It has a number of conceptual and implementation issues which make it inadvisable. More details about the failures of aria-controls are available from heydonworks.

Given that aria-controls has so many problems, the menu should immediately follow the button that opens it in the source order, which will establish a connection between the two. This pattern has surprisingly good support from assistive tech. but I am not sure if that will play well with your presentational table.

BTW you can get table-layout without using <table> via CSS display values. There's table, table-row, table-cell, flex, grid etc. All of these are preferable to using table markup for presentation these days. flex is probably the easiest to work with.

The button must have an accessible name (i.e. a text label). This does not have to be visible. The 'hamburger icon' idiom is well established for menu buttons. An invisible label can be achieved with something like aria-label="toggle menu" or whatever expresses what the button does.

And yes, if this is a navigation menu, definitely do wrap it in a <nav> element, or use role="navigation" on the <ul>. This provides assistive tech with alternative mechanisms for accessing the links, although I would consider hiding the closed menu by moving it offscreen to negative coordinates, instead of using display:none; so that these mechanisms work even when the menu button is not being used.

I would support Jonas Carlbaum' recommendation to look at the w3 aria practices page. They have an example of a navigation menu, using many of the suggestions mentioned here, and with appropriate focus handling which you can get inspired by.

brennanyoung
  • 6,243
  • 3
  • 26
  • 44
1

Think it's more or less a markup issue, not a css issue.

  1. check out Chrome plugins Wave and Axe and see what they reports.
  2. look at w3.orgs: wai-aria-practices examples for menubutton for suggestions on how to comply with WCAG in this case. The example at the bottom of that page shows the complete markup.

It seems like this post on mobile menu accessibiliy from a11ymatters is a good read for this issue too...

Jonas Carlbaum
  • 549
  • 4
  • 9