Need to add aria-hidden="true" to all 7 anchor links in order to prevent failing Level A for "Empty link".. could anyone help write a patch and commit?

  switch (mt_rand(0, 6)) {
    case 0:
      return '<div><a aria-hidden="true" rel="nofollow" href="' . $link . '"><!-- ' . $word . ' --></a></div>';
    case 1:
      return '<div><a aria-hidden="true" rel="nofollow" href="' . $link . '" style="display: none;">' . $word . '</a></div>';
    case 2:
      return '<div aria-hidden="true" style="display: none;"><a rel="nofollow" href="' . $link . '">' . $word . '</a></div>';
    case 3:
      return '<div><a aria-hidden="true" rel="nofollow" href="' . $link . '"></a></div>';
    case 4:
      return '<!-- <a aria-hidden="true" href="' . $link . '">' . $word . '</a> -->';
    case 5:
      return '<div style="position: absolute; top: -250px; left: -250px;"><a aria-hidden="true" rel="nofollow" href="' . $link . '">' . $word . '</a></div>';
    case 6:
      return '<div><a aria-hidden="true" rel="nofollow" href="' . $link . '"><span style="display: none;">' . $word . '</span></a></div>';
// In some browsers case 7 renders a visible link that could be clicked by users
//    case 7:
//      return '<div style="height: 0px; width: 0px;"><a aria-hidden="true" rel="nofollow" href="'. $link .'">'. $word .'</a></div>';
  }
CommentFileSizeAuthor
#3 adding-aria-to-anchor-links-2982685-2.patch2.15 KBdat deaf drupaler
#2 adding-aria-to-anchor-links-2982685.patch10.28 KBdat deaf drupaler

Comments

dat deaf drupaler created an issue. See original summary.

dat deaf drupaler’s picture

dat deaf drupaler commented
Status: Active » Needs review
StatusFileSize
new adding-aria-to-anchor-links-2982685.patch10.28 KB

Woot, my first patch!!

dat deaf drupaler’s picture

dat deaf drupaler commented
StatusFileSize
new adding-aria-to-anchor-links-2982685-2.patch2.15 KB

Resubmitting proper patch file...

dat deaf drupaler’s picture

dat deaf drupaler commented
Version: 7.x-1.x-dev » 7.x-1.0
bryrock’s picture

bryrock commented
Version: 7.x-1.0 » 7.x-1.x-dev
Assigned: Unassigned » bryrock

Hi

Thanks for your patch. My head's sorta in D8 version testing right now so I haven't yet tested this for 7.x, but I borrowed the code in your patch to update 8.x.

If you would open a new issue for this for 8 ("D8 WCAG accessibility" for example), then I can credit you when I make that commit, and invite the community to review this 7.x patch as well.

dat deaf drupaler’s picture

dat deaf drupaler commented
Related issues: +#2991993: D8 WCAG accessibility

Thanks @bryrock! I've created an issue here - https://www.drupal.org/project/httpbl/issues/2991993

andrewmacpherson’s picture

andrewmacpherson commented
Issue tags: -accessibility wcag +Accessibility, +WCAG

cleaning up bad tags, these were missing the comma separator

andrewmacpherson’s picture

andrewmacpherson commented

Adding aria-hidden="true" here is misguided. It won't solve all the accessibility problems here.

Notes:

  • Cases 0 and 3. aria-hidden="true" will hide the link from assistive technology, but these are still operable links for keyboard users who are not using assistive technology, who can accidentally trigger it.
  • Cases 1 and 2. aria-hidden="true" only hides if from assistive tech users, not all users. CSS display:none on either the will hide it from every one who has CSS turned on. Some users will be able to accidentally activate this link, notably keyboard users without assitive technology and with CSS off. (This is a real group of users!)
  • Case 4. This is hidden from everybody because it's in a HTML source comment. There's no point in using aria-hidden="true" here.
  • Case 5. This is operable by keyboard users who are not using assistive technology. It probably fails WCAG focus visible by being an opreable link outside the viewport.
  • Case 6. This link is operable by keyboard users who are not using assistive technology.