Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Raphael Hertzog]

On Mon, 11 Jul 2016, Sam Hartman wrote:
> First, that didn't make it clickable.  In general, I'd expect focusing
> on a button and pushing space to activate the button.  Enter sometimes
> activates a default action for a form, and definitely is the wrong
> keyboard approach to pushing a button outside a web browser.  However, I
> think most people will try enter when space fails.
[...]
> Luke Faraone (copied) said he'd be willing to help out with this.
> He has much more accessibility experience at the css and html layer than
> me.

Luke Faraone had a look. He committed a simple change to add href="#" to
the link behind the chevron used to toggle the display of more details.

Does it work better now?

Cheers,
-- 
Raphaël Hertzog ◈ Debian Developer

Support Debian LTS: http://www.freexian.com/services/debian-lts.html
Learn to master Debian: http://debian-handbook.info/get/

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Samuel Thibault]

Hello,

Raphael Hertzog, on Mon 11 Jul 2016 13:08:30 +0200, wrote:
> Putting Samuel Thibault in copy as he might be able to provide some
> useful input.

Unfortunately I'm really not an expert of *web* accessibility :)

Samuel

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Sam Hartman]

> "Raphael" == Raphael Hertzog  writes:


Sort of.
First, that didn't make it clickable.  In general, I'd expect focusing
on a button and pushing space to activate the button.  Enter sometimes
activates a default action for a form, and definitely is the wrong
keyboard approach to pushing a button outside a web browser.  However, I
think most people will try enter when space fails.

However, there is a mechanism for activating a button directly that
works, and as you say, hitting enter after tab focusing works.
Luke Faraone (copied) said he'd be willing to help out with this.
He has much more accessibility experience at the css and html layer than
me.

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Raphael Hertzog]

Hi Sam,

On Fri, 08 Jul 2016, Sam Hartman wrote:
> If it's a link, the screen reader lets me execute the action associated
> with the link, not the onclick action.
> If you want me to click on it you'll need to manipulate it so the screen
> reader thinks it is clickable.

I made multiple changes:
- the link has a role="button" to make it clear that it's meant to be
  clicked
- the link is now focusable (i.e. I can use TAB to focus it, and then
  I can press Enter to activate it and I can see the content being
  toggled)

Is it better?

> Raphael> Are there "aria" attributes that we can set on title of
> Raphael> panels to get them recognized as headings or interesting
> Raphael> navigation points?
> 
> I do not know.  I'm not a web front end person; I don't know CSS.
> I'm an end user in this space.

I documented myself and I added a few role attributes that should help
the screen reader to build a structure of the webpage. Is that the
case?

> Raphael> Here I really don't understand... we have a link and within
> Raphael> that link we have the icon and the 
> Raphael> tag with the text that you are supposed to see. And given
> Raphael> it's placed within the link, you should be able to interact
> Raphael> with it.
> 
> That's not what I'm seeing.

Basically the situation of that "versioned links" panel should be the same
than for the "toggle chevron" embedded in the action needed panel. They
are focusable with TAB and they are normal links that can be used as link.

The span tags that add an image with CSS magic are tagged with role="img"
and they should be recognized as images.

I'm not quite sure how I can reproduce the way you navigate within a web
page... because it's hard for me to try to help you when I'm not able to
check the impact of my changes. Putting Samuel Thibault in copy as he
might be able to provide some useful input.

Cheers,
-- 
Raphaël Hertzog ◈ Debian Developer

Support Debian LTS: http://www.freexian.com/services/debian-lts.html
Learn to master Debian: http://debian-handbook.info/get/

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Sam Hartman]

> "Raphael" == Raphael Hertzog  writes:

Raphael> Hi Sam,
Raphael> On Fri, 08 Jul 2016, Sam Hartman wrote:
>> Now I can interact with the toggle details string, but nothing
>> happens when I do.  Since you've made it a link, I'm going to
>> interact with it that way.  Are you expecting it to be clicked on
>> rather than selected as a link?

Raphael> Yes, the toggling is managed by the javascript onClick
Raphael> event on a parent  tag, so you should click on the
Raphael> link.

I can't.
If it's a link, the screen reader lets me execute the action associated
with the link, not the onclick action.
If you want me to click on it you'll need to manipulate it so the screen
reader thinks it is clickable.

There are some cases wher I can click on a link using some screen reader
mouse interaction, but it's unreliable, and it's better to either click
on something the screen reader thinks is clickable or run the link
action associated with something the screen reader thinks is a link.

>> Other accessibility problems:
>> 
>> * The page is hard to navigate.  There are no headings, and none
>> of the screen reader controls for navigating the page work, so
>> you have to scroll through the whole thing.

Raphael> Are there "aria" attributes that we can set on title of
Raphael> panels to get them recognized as headings or interesting
Raphael> navigation points?

I do not know.  I'm not a web front end person; I don't know CSS.
I'm an end user in this space.

Raphael> I could change them to  but I would then have to
Raphael> disable all default styles that apply to this tag.

>> * In the table listing versions and letting you look at the
>> changelogs/control files/etc, we have the same hard/impossible to
>> interact with items problem as with the action needed display.

Raphael> Here I really don't understand... we have a link and within
Raphael> that link we have the icon and the 
Raphael> tag with the text that you are supposed to see. And given
Raphael> it's placed within the link, you should be able to interact
Raphael> with it.

That's not what I'm seeing.

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Raphael Hertzog]

Hi Sam,

On Fri, 08 Jul 2016, Sam Hartman wrote:
> Now I can interact with the toggle details string, but nothing happens
> when I do.
> Since you've made it a link, I'm going to interact with it that way.
> Are you expecting it to be clicked on rather than selected as a link?

Yes, the toggling is managed by the javascript onClick event on a parent
 tag, so you should click on the link.

> Other accessibility problems:
> 
> * The page is hard to navigate.  There are no headings, and none of the
>   screen reader controls for navigating the page work, so you have to
>   scroll through the whole thing.

Are there "aria" attributes that we can set on title of panels to get
them recognized as headings or interesting navigation points?

I could change them to  but I would then have to disable all default
styles that apply to this tag.

> * In the table listing versions and letting you look at the
>   changelogs/control files/etc, we have the same hard/impossible to
>   interact with items problem as with the action needed display.

Here I really don't understand... we have a link and within that link
we have the icon and the  tag with the text that
you are supposed to see. And given it's placed within the link, you should
be able to interact with it.

Cheers,
-- 
Raphaël Hertzog ◈ Debian Developer

Support Debian LTS: http://www.freexian.com/services/debian-lts.html
Learn to master Debian: http://debian-handbook.info/get/

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Sam Hartman]

Now I can interact with the toggle details string, but nothing happens
when I do.
Since you've made it a link, I'm going to interact with it that way.
Are you expecting it to be clicked on rather than selected as a link?

Other accessibility problems:

* The page is hard to navigate.  There are no headings, and none of the
  screen reader controls for navigating the page work, so you have to
  scroll through the whole thing.

* In the table listing versions and letting you look at the
  changelogs/control files/etc, we have the same hard/impossible to
  interact with items problem as with the action needed display.

--Sam

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Raphael Hertzog]

On Thu, 07 Jul 2016, Sam Hartman wrote:
> > "Raphael" == Raphael Hertzog  writes:
> Raphael> The chevron that controls the expansion of the action item
> Raphael> is accompanied by a "[Toggle details]" string which is
> Raphael> supposed to be shown to screen readers only because it has
> Raphael> a CSS class of "sr-only" which is provided by the default
> Raphael> bootstrap CSS.
> 
> That part works.
> What fails is that I cannot interact with that string because Orca
> thinks it is neither a link nor clickable.

Ok I turned the string into a local link. Can you check if it's any
better? I'm wondering whether the click event on the link will bubble
up to the click event on the higher .

Cheers,
-- 
Raphaël Hertzog ◈ Debian Developer

Support Debian LTS: http://www.freexian.com/services/debian-lts.html
Learn to master Debian: http://debian-handbook.info/get/

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Sam Hartman]

> "Raphael" == Raphael Hertzog  writes:

Raphael> Hi Sam,
Raphael> On Thu, 07 Jul 2016, Sam Hartman wrote:
>> The new tracker is significantly less accessible using the Orca
>> screen reader on firefox than the old PTS.  The big problem is
>> that I cannot find a way to easily expand the collapsed tabs, so
>> I cannot get to most of the information.

Raphael> I guess that you are referring to "action items" which hide
Raphael> the details.  Is that correct?

Raphael> The chevron that controls the expansion of the action item
Raphael> is accompanied by a "[Toggle details]" string which is
Raphael> supposed to be shown to screen readers only because it has
Raphael> a CSS class of "sr-only" which is provided by the default
Raphael> bootstrap CSS.

That part works.
What fails is that I cannot interact with that string because Orca
thinks it is neither a link nor clickable.

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Raphael Hertzog]

Hi Sam,

On Thu, 07 Jul 2016, Sam Hartman wrote:
> The new tracker is significantly less accessible using the Orca screen reader 
> on firefox  than the old PTS.
> The big problem is that I cannot find a way to easily expand the collapsed 
> tabs, so I cannot get to most of the information.

I guess that you are referring to "action items" which hide the details.
Is that correct?

The chevron that controls the expansion of the action item is accompanied by
a "[Toggle details]" string which is supposed to be shown to screen readers
only because it has a CSS class of "sr-only" which is provided by
the default bootstrap CSS.

Is that not working for you?

Maybe it needs to be converted into a link so that it's actionable?

> to reproduce, install gnome-orca, and connect to tracker in firefox.

I might try at home, but not here in a conference room :)

Cheers,
-- 
Raphaël Hertzog ◈ Debian Developer

Support Debian LTS: http://www.freexian.com/services/debian-lts.html
Learn to master Debian: http://debian-handbook.info/get/

Bug#830213: tracker.debian.org: Accessibility regressions over old pts

[Sam Hartman]

Package: tracker.debian.org
Severity: important



Hi.
The new tracker is significantly less accessible using the Orca screen reader 
on firefox  than the old PTS.
The big problem is that I cannot find a way to easily expand the collapsed 
tabs, so I cannot get to most of the information.

to reproduce, install gnome-orca, and connect to tracker in firefox.

This is probably a reasonably simple css fix.

-- System Information:
Debian Release: stretch/sid
  APT prefers testing
  APT policy: (550, 'testing'), (500, 'stable-updates'), (500, 'stable'), (200, 
'unstable')
Architecture: amd64 (x86_64)

Kernel: Linux 4.6.0-1-amd64 (SMP w/4 CPU cores)
Locale: LANG=en_US.utf8, LC_CTYPE=en_US.utf8 (charmap=UTF-8)
Shell: /bin/sh linked to /bin/dash
Init: systemd (via /run/systemd/system)