1134126 - Various accessibility issues on about:home page

Status: VERIFIED FIXED

(Firefox :: General, defect)

Description

[Marco Zehe (:MarcoZ)]

1. Search engine button icon has no alt text.
2. Activating that causes keyboard focus to get lost.
3. Link at bottom of page has no label, looks like an image without alt text. I believe it's something about Mozilla.

Comment 1

[:Gijs (he/him)]

(In reply to Marco Zehe (:MarcoZ) from comment #0)
> 3. Link at bottom of page has no label, looks like an image without alt
> text. I believe it's something about Mozilla.

I realize this is a difficult question to be asking, but what is this and/or where is it and/or what element ID does it have? In particular, I'm assuming you don't mean the Downloads/Bookmarks/History/Add-ons/Sync/Prefereces (potentially also Marketplace might be in there somewhere) buttons at the bottom, but the thing before that (?). In which case it's the snippet, and we'd need to talk to the snippet folks, I expect. :-(

1 & 2 are definitely something for fx-team to be fixing. I'll get this nom'd for fixing in the next iteration.

Comment 2

[Marco Zehe (:MarcoZ)]

It's this beauty from the bottom of the page:

<a id="aboutMozilla" href="https://www.mozilla.org/about/?utm_source=about-home&amp;utm_medium=Referral"/>

Comment 3

[:Gijs (he/him)]

(In reply to Marco Zehe (:MarcoZ) from comment #2)
> It's this beauty from the bottom of the page:
> 
> <a id="aboutMozilla"
> href="https://www.mozilla.org/about/?utm_source=about-home&amp;
> utm_medium=Referral"/>

Ah. This is absolutely positioned and visually at the top-right, which is why I was confused. Thanks for clarifying! :-)

Comment 4

[Marco Zehe (:MarcoZ)]

Hm, then perhaps while fixing this, it would also be a good idea to move it to a more logical position in the DOM, since screen readers don't care for the positioning of the element via CSS, but rather its position in the HTML.

Comment 5

[:Gijs (he/him)]

(In reply to Marco Zehe (:MarcoZ) from comment #4)
> Hm, then perhaps while fixing this, it would also be a good idea to move it
> to a more logical position in the DOM, since screen readers don't care for
> the positioning of the element via CSS, but rather its position in the HTML.

It's visually tucked away as not being important, "just" a brandmark. And actually now that I'm looking at it, it has too little contrast on the non-hover state. :-(

I'll file a separate bug for that because it probably needs UX fixes, while all 3 issues here can be adjusted without UX feedback.

Comment 6

[:Gijs (he/him)]

(In reply to :Gijs Kruitbosch from comment #5)
> (In reply to Marco Zehe (:MarcoZ) from comment #4)
> > Hm, then perhaps while fixing this, it would also be a good idea to move it
> > to a more logical position in the DOM, since screen readers don't care for
> > the positioning of the element via CSS, but rather its position in the HTML.
> 
> It's visually tucked away as not being important, "just" a brandmark. And
> actually now that I'm looking at it, it has too little contrast on the
> non-hover state. :-(

Point being, it probably makes sense to have it at the bottom in the "importance" / "logical document order" sense... I barely noticed it on the page! :-)

Comment 7

[Marco Zehe (:MarcoZ)]

OK fine, too, if it's not important visually. But the contrast thing should definitely be fixed. ;)

Comment 8

[:Gijs (he/him)]

Marco, how are we doing here now? about:home has been changed a few times since this got filed and I *think* 1 and 2 are now fixed, but I'm not sure.

Comment 9

[Marco Zehe (:MarcoZ)]

Yes, issues 1 and 2 are solved, issue 3 is still present.

Comment 10

[:Gijs (he/him)]

Attachment: add 'alt text' for the empty link using aria-label,

Using aria-label rather than a title because I think a tooltip isn't necessary/helpful here. Hardcoding the text because the link destination is also hardcoded, so making this be vendorShortName from the branding doesn't seem like it'd make sense (as e.g. 'Debian' for a debian build of iceweasel or whatever wouldn't be the correct label for this link). I don't think it makes sense to introduce a localized string for this, either, but maybe I'm wrong?

Comment 11

[Marco Zehe (:MarcoZ)]

Comment on attachment 8712147 [details] [diff] [review]
add 'alt text' for the empty link using aria-label,

Yes, an aria-label is definitely more appropriate than the title attribute here. I'll let you fight out the correct contents of this string, since it specifically links to the "About" page. I would have called it "About Mozilla", which would add the requirement to make it localizable.

Comment 12

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8712147 [details] [diff] [review]
add 'alt text' for the empty link using aria-label,

Review of attachment 8712147 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/base/content/abouthome/aboutHome.xhtml
@@ +73,5 @@
>        <div id="restorePreviousSessionSeparator"/>
>        <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button>
>      </div>
>  
> +    <a id="aboutMozilla" href="https://www.mozilla.org/about/?utm_source=about-home&amp;utm_medium=Referral" aria-label="Mozilla"/>

Yeah, I think something more communicative of what the user will get when they click on the link would be better. Let's do "About Mozilla" and make the string localizable.

The About dialog had the same problem, but there they used vendorShortName, which I agree with you is wrong as the link may not change and a new vendor may accidentally have a link that says their name but links to mozilla.org. http://mxr.mozilla.org/mozilla-central/source/browser/locales/en-US/chrome/browser/aboutDialog.dtd#27

Comment 13

[:Gijs (he/him)]

Attachment: MozReview Request: Bug 1134126 - add 'alt text' for the empty link using aria-label, r?jaws

Review commit: https://reviewboard.mozilla.org/r/32755/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/32755/

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8713155 [details]
MozReview Request: Bug 1134126 - add 'alt text' for the empty link using aria-label, r?jaws

https://reviewboard.mozilla.org/r/32755/#review29679

Comment 15

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/6ec6a204d6f5

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/6ec6a204d6f5

Comment 17

[Khalid Syfullah Zaman [:khalid32]]

I have reproduced this bug on Nightly 38.0a1 (2015-02-18) on ubuntu 14.04 LTS, 32 bit!

The bug's fix is now verified on Latest Nightly 47.0a1!

Build ID: 20160211030242
User Agent: Mozilla/5.0 (X11; Linux i686; rv:47.0) Gecko/20100101 Firefox/47.0

Comment 18

[:Gijs (he/him)]

(In reply to Khalid Syfullah Zaman [:khalid32] from comment #17)
> The bug's fix is now verified on Latest Nightly 47.0a1!

Thanks!