[csswg-drafts] [css-a11y] Need a semantic option that can describe "focusable" or "accessible" (#6082)

Dafrok has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-a11y] Need a semantic option that can describe "focusable" or "accessible" ==
Recently I've been working on an accessibility feature and I found that CSS lacks an attribute to describe the focusable of elements, in other words, the semantics is incomplete.

For the non-visually impaired people, hiding multi-level submenus in navigation maybe help improve the user experience. For example:

```html
<style>
.main-menu>li {
    position: relative;
    display: inline-block;
}
.sub-menu {
    position: absolute;
    top: 100%;
    display: none;
}
.main-menu > li:hover .sub-menu {
    display: block;
}
</style>
<nav>
    <ul class="main-menu">
        <li>
            <span>MENU A</span>
            <ul class="sub-menu">
                <li><a>Menu A-1</a></li>
                <li><a>Menu A-2</a></li>
            </ul>
        </li>
        <li><a>MENU B</a></li>
    </ul>
</nav>
```

In the case above, the only way to reach the submenus is hover on the item `MENU A`. We can't focus the submenus by press the tab key. Obviousily it's unfriendly with visual impaired people.

I tried several ways, finnaly I found that I could only solve this problem by hacking CSS. If we want an element to be both focusable and invisible, we should setting its `opacity` to zero instead of setting `visibility` to `hidden`. If we want an element to be focusable without flow and hot areas, we should setting its `transform` to `scale(0)` and `position` to `fixed` instead of setting `display` to `none`.

I also refered to the implementation of Bootstrap, one of the most famous UI framework in the world. It uses the class "sr-only" to hide an element while keeping it accessible. To my regret, it's a hacking too.

```css
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}
```

This kind of practices destroys the original semantics. I can't correctly express that an element is **currently invisible or non-existent** but **accessible**. So I have a proposal: Add an attribute or option to CSS standard to describe at least scenes below to keep semantic integrity.

1. An element is invisible but focusable. (`visibility: hidden` & focusable)
2. An element is non-exists but focusable. (`display: none` & focusable)

When a focusable but visually unreachable element is about to be focused, the `:focus` and `:focus-within' pseudo class should be triggered, but still remain its invisible visually.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6082 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 March 2021 08:21:17 UTC