Skip to content

Inaccessible icon link to mozilla.org in footer #13153

@denmch

Description

@denmch

The footer on all MDN page contains two links to Mozilla.org:

  1. In .page-footer-moz, there's a hyperlink to mozilla.org containing an inline SVG.
  2. In .page-footer-legal, there's a hyperlink to mozilla.org with text that reads "Mozilla Corporation's."

The main issue is that the SVG doesn't contain a <title> or any other text equivalent, like aria-label, and so is inaccessible.

(Another version of this SVG is used in the site header on mozilla.org as a replaced element within an img element, with the alt text "Mozilla.")

The SVG in .page-footer-moz on MDN should contain <title>Mozilla</title>, but then we would have two links to the same resource with different link text.

And so for consistency and to avoid a different WCAG error, in .page-footer-legal, the hyperlink should only be on "Mozilla" and not include " Corporation's":

<a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla</a> Corporation’s

Unless the hyperlink is deemed redundant in close proximity to the icon that precedes it in the footer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    idleneeds triageTriage needed by staff and/or partners. Automatically applied when an issue is opened.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions