search

fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.55k stars 328 forks source link

dropdown accessibility #1332

Open andrewleith opened 4 years ago

andrewleith commented 4 years ago

Dropdowns (and search inputs) don't seem to be read at all by screen readers (I have only tried NVDA so far).

Is there a way to set these up to work with screen readers?

Thanks, Andrew

lubber-de commented 4 years ago

You can define your own dropdown templates for menu creation, select conversion or label creation where you can adjust everything you need, also aria labels

Either individually per dropdown:

$('.ui.dropdow').dropdown({
  templates: {
    dropdown: function(select, fields, preserveHTML, className) {
    // your implementation
    },
    menu: function(response, fields, preserveHTML, className){
    // your implementation
    },
    label: function(value, text, preserveHTML, className) {
    // your implementation
    },
  }
});

Or globally

$.fn.dropdown.settings.templates.dropdown = function(select, fields, preserveHTML, className) {
    // your implementation
};

$.fn.dropdown.settings.templates.menu =  function(response, fields, preserveHTML, className){
    // your implementation
};
$.fn.dropdown.settings.templates.label =  function(value, text, preserveHTML, className) {
    // your implementation
};

Look at the source to get an idea how your own template code should be adjusted https://github.com/fomantic/Fomantic-UI/blob/037a0402362fa2ffa44e434fe7e362c8cb753bb8/src/definitions/modules/dropdown.js#L4107

andrewleith commented 4 years ago

Very interesting, thank you. I didn't realize you could hook in and customize so deeply. I'll play around with this and see what I can come up with. As a short term solution I was going to modify some of the dropdown code to "announce" the currently selected item using a div with an aria-live tag, but it will probably be a bit hacky.

It always irked me about SUI that some of the controls weren't accessible. Are there any improvements on the horizon to bake accessibility into FUI?

lubber-de commented 4 years ago

@andrewleith Not yet focussed, but feel free to help improving fomantic and provide a proper PR 😉

andrewleith commented 4 years ago

Hey @lubber-de, I've been going back and forth with my accessibility team and I came across a very strange thing for IE11. In the code base there is mention of a fix for IE11 but what I found is that this actually causes severe usability issues for IE11 by wreaking havoc on the tab order. Removing that block of code entirely made IE11 function properly again. The offending code is here: https://github.com/fomantic/Fomantic-UI/blob/master/src/definitions/modules/dropdown.js#L1304

Jookia commented 4 years ago

I just want to chime in to say I did modify Fomantic's code to add some accessibility for dropdown menus. It was added to Gitea, but I didn't complete it as I came to the conclusion that Fomantic is a fundamentally inaccessible toolkit.

Instead of providing widgets which map easily to accessibility APIs it provides components. A dropdown can be used to make many things, such as a search box, a menu, a selection box. Fomantic has no real idea what you're making and so it can't provide accessibility support.

The only solution here I see is for applications to wrap Fomantic's components in to widgets and manually write accessibility code that hooks in to Fomantic's code. I would love to hear different, but as far as I can tell I'm the only person who's even tried to make Fomantic accessible.

andrewleith commented 4 years ago

Yeah I agree it isn't exactly easy to stitch accessibility in after the fact here. I took a bit of a simplistic approach to solve the dropdown problem. I added a div into the body element:

<div id="screen-reader" aria-live="polite" class="wb-inv"></div>

And then at certain life cycle events of the dropdown I put some info in that div (which is automatically read by screen readers because of the aria-live attribute). It was a bit tricky to figure out exactly where to put these "announcements" in the dropdown code. Here is one example in the filter method of dropdown:

 $('#screen-reader').text($item.length + resultsMsgEn + ' ' + $item.filter('.selected').text());

This would announce something like this:

25 records found. Use arrow keys to select. Dropdown Item 1

Certainly not perfect, and we've probably missed some events, but this is what we are going ahead with for internal apps.

Jookia commented 4 years ago

Dd you actually test that with a screen reader? I imagine that would break easily in browse mode on Orca.

andrewleith commented 4 years ago

I tested it with NVDA and our accessibility team tested it with whatever they use. What is orca? I have never heard of it.

Aria-live is a standard aria attribute, so I would be surprised if it didn't work.

On Tue., May 19, 2020, 11:14 a.m. Jookia, notifications@github.com wrote:

Dd you actually test that with a screen reader? I imagine that would break easily in browse mode on Orca.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-630847278, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGJDRNZK4YQ4QQXJ3IYBQLRSKH4ZANCNFSM4KXHGUZQ .

Jookia commented 4 years ago

Orca is a Linux screen reader. One of the issues I found is that with browse mode enabled and without a correct role the dropdown keys wouldn't be grabbed so you'd hit down and skip the element instead of pass the key to the dropdown menu.

On Tue, May 19, 2020 at 09:21:29AM -0700, Andrew wrote:

I tested it with NVDA and our accessibility team tested it with whatever they use. What is orca? I have never heard of it.

Aria-live is a standard aria attribute, so I would be surprised if it didn't work.

On Tue., May 19, 2020, 11:14 a.m. Jookia, notifications@github.com wrote:

Dd you actually test that with a screen reader? I imagine that would break easily in browse mode on Orca.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-630847278, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGJDRNZK4YQ4QQXJ3IYBQLRSKH4ZANCNFSM4KXHGUZQ .

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-630928456

Jookia commented 3 years ago

Any update to this?

lubber-de commented 3 years ago

Not that i know of. This issue is tagged as "help-wanted" 😉

Jookia commented 3 years ago

Are you willing to put in work to test with a screen reader?

On Mon, Jul 19, 2021 at 03:40:41AM -0700, lubber-de wrote:

Not that i know of. This issue is tagged as "help-wanted" 😉

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-882442697

lubber-de commented 3 years ago

As said, we are seeking for volunteers with time and experience implementing proper accessibility / aria adjustments to all related components (not only dropdown).

Jookia commented 3 years ago

But will the maintainers maintain the code and block non-accessible changes?

On Mon, Jul 19, 2021 at 03:46:39AM -0700, lubber-de wrote:

As said, we are seeking for volunteers with time and experience implementing proper accessibility / aria adjustments to all related components (not only dropdown).

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-882445996

lubber-de commented 3 years ago

Well, this is a community fork 😉. We are not blocking any/non accessibilty changes and welcome PRs providing properly implemented additional features. Especially the dropdown module is huge and has tons of features which still have to work after a change, so testing is time consuming.

I followed the gitea thread https://github.com/go-gitea/gitea/issues/7057 and as you already recognized yourself there is a lot to do to make the whole component work as you expect. In the worst case the SUI/FUI DOM structure of the Dropdown, as it is ever since, would need fundamental changes (dd button, clear icon, expanded menu, submenu support...), as any change has to be done in general without having only giteas layout in mind.

What i could offer myself short term is a ui native dropdown which will style a ususal select tag in collapsed mode to the same look as a FUI dropown via pure CSS, without any JS (thus no other FUI DD features) involved. Unfortunately styling the expanded native select list is not completely possible cross browser (if any). I doubt, this will help the gitea project, because they make use of enhanced dropdown features.

Rewriting the whole Dropdown module (and others, like search, as well!) to be completely accessible is time consuming and, unfortunately, not desired by many users of SUI/FUI.

Most open source software (maintained by volunteers in their free time without being paid or having a bigger company like facebook (react) or twitter (bootstrap) in the back) tend to only add features when there is a personal need, so somebody spends time implementing a feature him/herself. But, those people almost never donate their changes back to original project. That's a pity.

lubber-de commented 3 years ago

Here is some draft of ui native dropdown to a select tag i tried some time ago https://jsfiddle.net/lubber/cupwk8sh/75/

Jookia commented 3 years ago

The reason why I wouldn't donate changes back is that they'd break due to people adding more features and introducing regressions.

If you're not going to test for regressions and bugs, why bother sending a merge request when someone might clobber it with buggy code?

On Mon, Jul 19, 2021 at 04:16:18AM -0700, lubber-de wrote:

Well, this is a community fork 😉. We are not blocking any/non accessibilty changes and welcome PRs providing properly implemented additional features. Esepcially the dropdown module is huge and has tons of features which still have to work after a change, so testing is time consuming.

I followed the gitea thread https://github.com/go-gitea/gitea/issues/7057 and as you already recognized yourself there is a lot to do to make the whole component work as you expect. In the worst case the SUI/FUI DOM structure of the Dropdown, as it is ever since, would need fundamental changes (dd button, clear icon, expended menu, submenu support...), as any change has to be done in general without having only giteas layout in mind.

What i myself could offer short term is a ui native dropdown which will style a ususal select tag in collapsed mode to the same look as a FUI dropown via pure CSS, without any JS (thus no other FUI DD features) involved. Unfortunately styling the expanded native select list is not completely possibly cross browser (if any). I doubt, this will help the gitea project, because they make use of enhanced dropdown features.

Rewriting the whole Dropdown module (and others, like search, as well!) to be completely accessible is time consuming and, unfortunately, not desired by many users of SUI/FUI.

Most open source software (maintainted by volunteers in their free time without being paid or having a bigger company like facebook (react) or twitter (bootstrap) in the back) tend to only add features when there is a personal need, so somebody spends time implementing a feature him/herself. But, those people almost never donate their changes back to original project. That's a pity.

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/fomantic/Fomantic-UI/issues/1332#issuecomment-882465723

6543 commented 3 years ago

I'm not a frontend dev ... but in backend if you like to make sure your feature will stay you ensure this with tests :)