PF 6.2 selectOneMenu not accessible with Windows10/IE11/JAWS 2018.1805.33

[christophs78]

We evaluated a Primefaces 6.2 application with a blind colleague. My blind colleague uses Windows 10, IE11 and JAWS 2018.1805.33.
I was surprised, that selectOneMenu is not accessible to him. (selectOneMenu renders a good amount of role and aria-* - Attributes)

We had been able to reproduce this issue with https://www.primefaces.org/showcase/ui/ ... Menu.xhtml.
Then we checked, weather PrimeNG-DropDown ist accessible to him. (https://www.primefaces.org/primeng/#/dropdown)

The PrimeNG-DropDown is accessible to him but Primefaces-selectOneMenu not.

This is hard do understand. There had been some efforts to make Primefaces accessible over the last ~5 years. This year in january the last accessiblity-changes had been made to selectOneMenu: https://github.com/primefaces/primefaces/issues/3199

With issue 3199 the placing of the role-attribute had been changed. (Before the role-attribute had been placed at the input-element. Now (since PF 6.2) it is placed at the outer div-element. (PrimeNG-DropDown places the role-attribute at the input-element.)

https://www.w3.org/TR/wai-aria-1.1/#combobox specifies the usage of role=combobox. I don´t think that the placement of the of the role-attribute matters.

Is there somebody with experience in this topic?

[christophs78]

I looked at https://www.w3.org/TR/wai-aria-practice ... combo.html and
compared
https://github.com/primefaces/primeface ... derer.java
with
https://github.com/primefaces/primeface ... derer.java

When we open the browser - developer tools and look into the html-tree we see the panel of the selectOneMenu is moved to the end of the html-tree. (PrimeNG-DropDown does not do this.) Maybe this confuses the screenreader.

[tandraschko]

You can try to set appendTo="", normaly it uses @(body).

[kukeltje]

This is indeed something that might be relevant. Compliments btw for the investigation. If every developer was this good it would make forums like this and stackoverflow take waaaaay less of my time Keep in mind though that if you change the appendTo, it might result in issues that the 'drowpdown' parts behaves differently when e.g. used in layouts or dialogs or...

[christophs78]

I tried

Code: Select all

<p:selectOneMenu id="sautomarke" value="#{fahrzeugView.form.automarke}" converter="at.gv.ooe.frw.SelectItemsBaseEntityConverter" appendTo="sautomarke">
	<f:selectItem itemLabel="" itemValue="" />
	<f:selectItems value="#{fahrzeugView.automarken}" var="automarke" itemLabel="#{automarke.bezeichnung}" itemValue="#{automarke}" />
</p:selectOneMenu>

This changes - as expected - the position of the overlay (dropdown-part) in the html-tree. But it is still not accessible to my blind colleague.
There must be some more differencen between Primefaces (SelectOneMenu) and PrimeNG (DropDown) i did not figure out yet.

[christophs78]

How do Primefaces-SelectOneMenu (not accessible) and PrimeNG-DropDown (accessible) "look" in JAWS? (Screenreader-Output at the top of the screen.)

Primefaces-SelectOneMenu (JAWS - surface mode):


Primefaces-SelectOneMenu (JAWS - struct mode):


PrimeNG-DropDown (JAWS - struct mode):

[kukeltje]

This changes - as expected - the position of the overlay (dropdown-part) in the html-tree

Where **does** it end-up? Compare with the PrimeFaces version where it did work

There must be some more differencen between Primefaces (SelectOneMenu) and PrimeNG (DropDown) i did not figure out yet.

Same here, what are the differences in html? Screenshots help, but the html code is more relevant. Could be that the PF code fixed some (other) usecase that PrimeNG does not have (yet) but in the mean time breaking accessibility

[christophs78]

I compared the HTML already yesterday.

Primefaces renders way more ARIA-Tags compared to PrimeNG. So it´s realy weird that PrimeNG-DropDown is accessible and PrimeFaces-SelectOneMenu not.
http://www.land-oberoesterreich.gv.at/f ... eMenu.html
http://www.land-oberoesterreich.gv.at/f ... pDown.html

I´ll come back tomorrow with an update after testing with older Primefaces-Versions. (My blind colleague is already out of office.)

[christophs78]

selectOneMenu from Primefaces 6.0 und 6.1 is accessible with JAWS 2018.1805.33. selectOneMenu from Primefaces 6.2 not.
BUT: Even https://www.w3.org/TR/wai-aria-practice ... combo.html is not accessible with JAWS 2018.1805.33
Primefaces 6.2 made improvements to comply with the official W3-ARIA examle. (https://github.com/primefaces/primefaces/issues/3199)
At the current point in time i´ll classify this as an JAWS-Bug. All togehter very depressing.

[Melloware]

Good research @christophs78. Let us know if there is anything that you discover that we can fix because yeah that 3199 ticket was to bring more ARIA standards to SelectOneMenu.