E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Sarah Jevnikar
Date: Thu, Nov 16 2017 1:29PM
Subject: Combo Box Displays incomplete items - content or accessibility issue?
No previous message | Next message →

Hi again all,
I've been presented with a combo box which repeats or truncates items with both JAWS and NVDA using IE and Chrome (though not when using Firefox). This has been documented as a Drupal plugin (called Dropkick) problem. It would appear we are too far along in the development process to retrofit this for accessibility.

My concern right now lies elsewhere. I'm told that the text is visually cut off, which has been flagged as an accessibility issue. Is this an issue of accessibility or content? It's obviously not ideal that text is shortened, but does it violate WCAG? I'm told by sighted colleagues that it's not an uncommon occurrence on the web but don't like the thought of it.

The page is below:
https://www.cihi.ca/en/news-events-and-education/news
where filters are presented as dropdown lists.
Any thoughts or suggestions are greatly appreciated.
Thank you very much,
Sarah

From: Meacham, Steve - FSA, Kansas City, MO
Date: Thu, Nov 16 2017 1:43PM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | Next message →

I'm not aware of a Success Criteria that covers this situation, but I think it clearly violates WCAG 2.0 Principles 1 and 3, and Guidelines 1.3, 1.4, and 3.1. The Success Criteria, as good as they are, will shift over time with technology. The Principles and Guidelines are more durable, though more abstract.

Principle 1 "Perceivable - Information and user interface components must be presentable to users in ways they can perceive,"

Guideline 1.3 "Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure"

Guideline 1.4 "Distinguishable: Make it easier for users to see and hear content including separating foreground from background"

Principle 3 "Understandable - Information and the operation of user interface must be understandable"

Guideline 3.1 "Readable: Make text content readable and understandable"

From: Sarah Jevnikar
Date: Fri, Nov 17 2017 7:38AM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | Next message →

Makes sense - thank you so much for your thoughts.
Sarah


Sarah Jevnikar

Accessibility Consultant

Digital Echidna

p: 519-858-4438 ex. 211
e: = EMAIL ADDRESS REMOVED =

From: Jim Allan
Date: Mon, Nov 27 2017 12:07PM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | Next message →

In my testing with Chrome Jaws/NVDA there is no auditory truncation of
content in the dropdowns. But everything is repeated twice (e.g. Access and
Wait times, Access and wait times)
Visually there is truncation of content in the display. If the user tabs to
the control and uses the down arrrow to make a selection the text is
truncated within the displayed box. if the user clicks on the dropdown, it
opens and all the text is there and word wrapped (nice). However, I could
not find a keyboard mechanism (standard to open comboboxes on windows is
alt-down-arrow) to open the combobox which is a failure of 2.1.1.
Surprisingly, ESC would close a combobox that was opened with the mouse
(nice), tho there was no screenreader announcement that the combobox
collapsed.
as the full content is available on dropdown opening, I would not count
that as an error. The non-functionality by keyboard - not be able to open
the combobox to see the full content is an error.

Jim
.

On Fri, Nov 17, 2017 at 8:38 AM, Sarah Jevnikar < = EMAIL ADDRESS REMOVED = >
wrote:

> Makes sense - thank you so much for your thoughts.
> Sarah
>
>
> Sarah Jevnikar
>
> Accessibility Consultant
>
> Digital Echidna
>
> p: 519-858-4438 ex. 211
> e: = EMAIL ADDRESS REMOVED =
>
>

From: JP Jamous
Date: Mon, Nov 27 2017 12:18PM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | Next message →

Sarah,

If I take a step back and review this issue, I notice one thing that pops up at me directly. It isn't just an A11Y problem, rather a UX problem. If someone with 20/20 vision takes a look at this UI, the text will be cut off unless the dropdown is expanded.

I agree with your teammates that they don't like it. It does not sound user friendly for anyone. That's a huge problem.

Obviously no UX thoughts were implemented into this back in the design phase. This tells me 2 things.

1. Either this was a requirement that they couldn't fix
Or
2. No one realized what occurred until it was too late

I would fail it as bad UX then bad A11Y, as it blocks all users from seeing the content unless they engage with the dropdown box.

From: Steve Green
Date: Mon, Nov 27 2017 2:37PM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | Next message →

In addition to the issues that others have reported, there are a number of other ways in which these comboboxes do not behave like native ones, such as:

a. If the list of options has been opened, pressing the Tab key closes the list as expected but the focus does not move to the next focusable element.

b. If a key is pressed, the focus correctly moves to the first instance of an option that starts with that character. However, if the same key is pressed again, the focus does not move to the next instance of an option that starts with that character. This is a behaviour I use a lot, because pressing the "u" key four times is the fastest way to get to United Kingdom in most Language comboboxes.

I have tested dozens of so-called accessible comboboxes and have not found a single one that replicates all the behaviours of a native element and is fully accessible. Most don't even come close, even when very good development teams have put in a lot of effort, so the chance of your developers achieving this is somewhere close to zero.

Until we find a good accessible design pattern, I recommend simply applying styling to native comboboxes and accept the fact that they will look different in some browsers. Unsurprisingly, I get a lot of push-back from clients over this, but it's all you can do if WCAG compliance is essential.

Jim mentioned that he could not open the comboboxes using keyboard controls - in fact the spacebar opens them, at least it does in Chrome and Internet Explorer 11. It also opens native comboboxes, which is a behaviour I was not aware of. Curiously, pressing it again does not close native comboboxes, although it does close them on the CIHI website.

Steve Green
Managing Director
Test Partners Ltd

From: Bryan Garaventa
Date: Mon, Nov 27 2017 5:16PM
Subject: Re: Combo Box Displays incomplete items - content or accessibility issue?
← Previous message | No next message

"In addition to the issues that others have reported, there are a number of other ways in which these comboboxes do not behave like native ones, such as: a. If the list of options has been opened, pressing the Tab key closes the list as expected but the focus does not move to the next focusable element. b. If a key is pressed, the focus correctly moves to the first instance of an option that starts with that character. However, if the same key is pressed again, the focus does not move to the next instance of an option that starts with that character. This is a behaviour I use a lot, because pressing the "u" key four times is the fastest way to get to United Kingdom in most Language comboboxes. I have tested dozens of so-called accessible comboboxes and have not found a single one that replicates all the behaviours of a native element and is fully accessible."

Hi,
I assume you are referring to simulated ARIA Combobox widgets, is that correct?

Can you please list all of the accessibility issues that you encounter on the following ARIA Combobox implementations?

1. Editable and Readonly Comboboxes, via State and Country select fields:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
(Spacebar saves selected auto suggested item when browsing by Up/Down arrow, and pressing Tab moves to next element in the tab order as expected.)

2. Simulated Readonly ARIA Combobox with simulated multi-character type-ahead functionality:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm
(Type "eng" to jump to English, "por" to jump to Portuguese, etc.)

Thanks,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com