outpostHQ/numl

Demo page: Twitter, Facebook, main icons are not accessible via keyboard

Closed this issue · 6 comments

pepelsbey commented

Steps to reproduce:

  1. Go to https://tenphi.me/
  2. Tab trough the page
  3. Try to reach all interactive elements

Is there a reason for messing with built-in links via ARIA?

<a href tabindex="-1" aria-hidden="true" role="none"></a>

Why tabindex=-1, why hidden or role=none, and why it’s empty or not labelled?

tenphi commented

This is the menu element. It's made based on an example from an official recommendation - https://w3c.github.io/aria-practices/examples/menubar/menubar-1/menubar-1.html

Menu items are fully accessible using arrows and End/Home buttons.

<a> links are used just to create native right-click and status bar behaviors.

I understand your frustration. If you have any idea how to improve this behavior without breaking ARIA specification I would love to hear it.

tenphi commented

This issue is related to the Numl itself. So I transferred it.

pepelsbey commented

This is a mistake: navigation menus are not UI menus. In your case it’s just a bunch of links to external pages that you’ve over-engineered into an ARIA menu. Please read Menus & Menu Buttons, (there’s Russian translation).

This is a <menu> (or role=menu):

image

This is a menu too:

image

In any case: if your interactive elements are not available via keyboard, you did it wrong.

tenphi commented

All interactive elements on the site are available via the keyboard, mouse, and screen reader.

I indeed used a wrong semantic element to describe social links.

I used <nu-menu> trying to implement roving focus to reduce the number of tabs required to reach other elements. https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex
I will research this approach to implement a better solution for such cases.

pepelsbey commented

Link is an independent interactive element and some links are not available via keyboard on this page. This is what people expect from their experience.

What is an interactive element? It’s not something you decided to wrap into a <my-component> in your architecture. In most cases it’s an HTML element that represents a usage pattern, based on plain HTML behavior. This is what every user expects:

  • You get to combo-box via Tab and then select an option via arrows
  • You get to a list of radio buttons via Tab and then use arrows to select a single option

But there’s no such pattern as “navigation menu” in HTML, there’s just a link. But there’s “true menu” for apps that’s let’s you customize something or invoke some command. If it’s just a page with a photo and a bunch of link, don’t make an app out if it.

So if you have custom patterns in your library, make sure that they’re clearly defined in the docs, so developers won’t misuse them just like you did here.

tenphi commented

https://tenphi.me/ updated with <nu-nav> element. All <nu-menuitem> were replaced with<nu-btn> elements (link role).

As far as I see the problem is solved. Thanks for your help.