583087 - Bugzilla should use headings for different sections for screen readers

Status: NEW

(Bugzilla :: User Interface, defect, P2)

Description

[Guy Pyrzak]

Per a tweet/request from Mkanat. Bugzilla should use headings for different to make screen reading easier.

>This got RT'ed a lot--it's for blind people, I think they want show_bug to have >sections for their screen readers. I'm away from a machine and can't file a bug >for it right now though.

Comment 1

[James Teh [:Jamie]]

Thanks for filing this.

Bugzilla pages are logically divided into sections. There is the header info, the tables containing information about the bug, attachments, the description, comments and possibly others I've missed. I'm assuming this division is more obvious visually, but for a screen reader user, it isn't immediately obvious unless you examine the page closely or are already familiar with it.

HTML headings provide a way to semantically mark the heading of a section. Screen readers will then notify the user that this is a heading. This also facilitates features such as jumping between headings with a single keystroke, which is extremely useful for rapidly moving to individual sections of a page. For example, if the headings were marked, I would be able ot very quickly jump to the bug description without having to search for "description" or manually cursor through the page.

Unfortunately, not all sections on the show_bug page have headings as such. However, the following would be a great start:
* The bug number and summary displayed just below the "Last comment" link (just after the close of the "last_comment_link" span) should be a level 1 heading.
* The "Attachments" text (ID of "a0") should be a level 2 heading.
* The "Description" text (ID of "c0") and the "Comment n" text for all of the comments (ID of "c<n>") should be level 2 headings.

Note that Trac uses heading levels quite well. See this page for an example:
http://www.nvda-project.org/ticket/1

Comment 2

[Max Kanat-Alexander]

So, what I'd ideally like to do is to add these accessibility features (which I think do sound awesome) without adding too much visual noise for people using the sighted interface.

Now, I have to admit, I'm not too familiar with screen readers. Is the only way to get this functionality to use <h1> or <h2> tags, or are there attributes (perhaps even ARIA attributes) that would suffice? Or perhaps the new HTML5 <section> tags--although I don't think we can use those, because Bugzilla is not valid HTML5.

Comment 3

[James Teh [:Jamie]]

You can use ARIA; e.g. <span role="heading" aria-level="2">...</span>. However, this isn't as widely supported by browsers/ATs, although NVDA definitely supports it with Firefox. You may also be able to mitigate the visual affects of the h1-h6 tags using css, although that's certainly not my area of expertise. :)

Comment 4

[Max Kanat-Alexander]

Hmm. I think for now, using the ARIA attributes would be the best solution. You agree, pyrzak?

Comment 5

[Guy Pyrzak]

I'd prefer ARIA, but I was going to suggest h tags with css that basically hid the tags:
.screen_reader_tag {
    font-size:0, 
    width:0, 
    height:0,
    color: transparent
}

so either one works for me. But I do think we should use whatever is mostly widely use by the blind, unfortunately I don't have any data/knowledge on that.

Comment 6

[James Teh [:Jamie]]

(In reply to comment #5)
> I'd prefer ARIA
I'd definitely prefer ARIA to hidden headings. On the other hand, if the headings were actually visible (perhaps with styling to cancel out the visual styling), that would be better. In other words, I would prefer something that isn't faked or unnecessarily duplicated.

> but I was going to suggest h tags with css that basically hid
> the tags:
> .screen_reader_tag {
>     font-size:0, 
>     width:0, 
>     height:0,
>     color: transparent
> }
I don't actually think this will work, as it will be classed as invisible by the screen reader as well. The way to do this is:
.screen_reader_tag {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

> so either one works for me. But I do think we should use whatever is mostly
> widely use by the blind, unfortunately I don't have any data/knowledge on that.
Unfortunately, I don't either for screen readers other than the one I work on. :) I can tell you that NVDA handles ARIA headings correctly in Firefox, but while it reads them correctly in IE, it doesn't allow for quick navigation. This is most definitely a bug that will hopefully be fixed eventually.

Marco, do you have any data on support for ARIA headings in other screen readers?

Comment 7

[Marco Zehe (:MarcoZ)]

Unfortunately I don't. But I am also inclined to suggest that this is their problems, and that users always have a free choice in NVDA if their own screen reader doesn't work with these headings. So I would not block on this question. Let's lead, and not cringe on incomplete support of others!

Comment 8

[Marco Zehe (:MarcoZ)]

Max, can we move forward on this? It's a regular annoyance for our blind users. The suggested ARIA attributes are in the official ARIA 1.0, which means there are at least two implementations that do work, and one of them involves Firefox with at least two screen readers, NVDA and JAWS.

Comment 9

[Dylan Hardison [:dylan] (he/him)]

Max isn't really involved with bugzilla these days. 

There is no reason to not support screen readers in 2016 so I will look into this as my time allows.

Comment 10

[rugk]

FYI: This is a Greasmonkey "patch" to fix this issue: https://github.com/nvaccess/axSGrease/blob/master/BugzillaA11yFixes.user.js

Comment 11

[James Teh [:Jamie]]

This has been fixed with the modern look on bugzilla.mozilla.org, but I'm not sure if that only applies to that instance or the whole Bugzilla product.

Comment 12

[Marco Zehe (:MarcoZ)]

I just recently visited the WebKit instance of Bugzilla, which uses an older interface, and no headings there. I felt quite thrown back to the early 2000s while visiting that instance. :-)