Improve accessibility of cover images

vufind-org · Oct 1, 2024 · 1e36dc4 · 1e36dc4
1 parent 5e939de
commit 1e36dc4
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 26 deletions.
diff --git a/module/VuFind/src/VuFind/View/Helper/Root/Record.php b/module/VuFind/src/VuFind/View/Helper/Root/Record.php
@@ -538,15 +538,16 @@ public function getCheckbox($idPrefix = '', $formAttr = false, $number = null)
     /**
      * Render a cover for the current record.
      *
-     * @param string $context Context of code being generated
-     * @param string $default The default size of the cover
-     * @param string $link    The link for the anchor
+     * @param string $context    Context of code being generated
+     * @param string $default    The default size of the cover
+     * @param string $link       The link for the anchor
+     * @param bool   $linkUnique Is there no other link with the same href?
      *
      * @return string
      */
-    public function getCover($context, $default, $link = false)
+    public function getCover($context, $default, $link = false, $linkUnique = false)
     {
-        $details = $this->getCoverDetails($context, $default, $link);
+        $details = $this->getCoverDetails($context, $default, $link, $linkUnique);
         return $details['html'];
     }
 
@@ -575,20 +576,22 @@ protected function getPreviewCoverLinkSetting($context)
     /**
      * Get the rendered cover plus some useful parameters.
      *
-     * @param string             $context Context of code being generated
-     * @param string             $default The default size of the cover
-     * @param string|array|false $link    The href link for the anchor (false
-     * for no link, or a string to use as an href, or an array of attributes
-     * to include in the anchor tag)
+     * @param string             $context    Context of code being generated
+     * @param string             $default    The default size of the cover
+     * @param string|array|false $link       The href link for the anchor
+		 * (false for no link, or a string to use as an href, or an array of
+		 * attributes to include in the anchor tag)
+     * @param bool               $linkUnique Is there no other link with the
+		 * same href?
      *
      * @return array
      */
-    public function getCoverDetails($context, $default, $link = false)
+    public function getCoverDetails($context, $default, $link = false, $linkUnique = false)
     {
         $linkAttributes = is_string($link)
             ? ['href' => $link]
             : (is_array($link) ? $link : []);
-        $details = compact('linkAttributes', 'context') + [
+        $details = compact('linkAttributes', 'linkUnique', 'context') + [
             'driver' => $this->driver, 'cover' => false, 'size' => false,
             'linkPreview' => $this->getPreviewCoverLinkSetting($context),
         ];

diff --git a/themes/bootstrap3/templates/RecordDriver/DefaultRecord/collection-info.phtml b/themes/bootstrap3/templates/RecordDriver/DefaultRecord/collection-info.phtml
@@ -2,7 +2,7 @@
 <div class="media">
   <?php
     $QRCode = $this->record($this->driver)->getQRCode('core');
-    $coverDetails = $this->record($this->driver)->getCoverDetails('collection-info', 'medium', $this->record($this->driver)->getThumbnail('large'));
+    $coverDetails = $this->record($this->driver)->getCoverDetails('collection-info', 'medium', $this->record($this->driver)->getThumbnail('large'), true);
     $cover = $coverDetails['html'];
     $preview = $this->record($this->driver)->getPreviews();
   ?>

diff --git a/themes/bootstrap3/templates/RecordDriver/DefaultRecord/core.phtml b/themes/bootstrap3/templates/RecordDriver/DefaultRecord/core.phtml
@@ -6,7 +6,7 @@
     $QRCode = $this->record($this->driver)->getQRCode('core');
     $largeImage = $this->record($this->driver)->getThumbnail('large');
     $linkAttributes = $largeImage ? ['href' => $largeImage, 'data-lightbox-image' => 'true'] : [];
-    $coverDetails = $this->record($this->driver)->getCoverDetails('core', 'medium', $linkAttributes);
+    $coverDetails = $this->record($this->driver)->getCoverDetails('core', 'medium', $linkAttributes, true);
     $cover = $coverDetails['html'];
     $preview = ($this->previewOverride ?? false)
       ? $this->previewOverride : $this->record($this->driver)->getPreviews();

diff --git a/themes/bootstrap3/templates/RecordDriver/DefaultRecord/cover.phtml b/themes/bootstrap3/templates/RecordDriver/DefaultRecord/cover.phtml
@@ -4,20 +4,23 @@
   if ($linkAttributes && !isset($linkAttributes['class'])) {
     $linkAttributes['class'] = 'record-cover-link';
   }
-  $alt = $linkAttributes ? trim($this->driver->tryMethod('getTitle') ?? '') : '';
 ?>
-<?php if ($linkAttributes && !empty($alt)): ?><a<?=$this->htmlAttributes($linkAttributes)?>><?php endif; ?>
+<?php if ($linkAttributes): ?>
+  <a href="<?=$this->escapeHtmlAttr($linkAttributes)?>" class="record-cover-link" <?php if (!$this->linkUnique): ?>tabindex="-1" aria-hidden="true"<?php endif; ?>>
+<?php else: ?>
+  <div aria-hidden="true">
+<?php endif; ?>
 <?php /* Display thumbnail if appropriate: */ ?>
 <?php if ($cover): ?>
-  <img src="<?=$this->escapeHtmlAttr($cover); ?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="<?=$this->escapeHtmlAttr($alt); ?>">
+  <img src="<?=$this->escapeHtmlAttr($cover); ?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="<?=$this->transEscAttr('Cover Image') ?>">
 <?php elseif ($cover === false): ?>
-  <img src="<?=$this->url('cover-unavailable')?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="">
+  <img src="<?=$this->url('cover-unavailable')?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="<?=$this->transEscAttr('No Cover Image') ?>">
 <?php else: ?>
   <div class="ajaxcover">
     <div class="spinner"><?=$this->icon('spinner') ?> <?=$this->translate('loading_ellipsis')?></div>
     <div class="cover-container">
-      <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>data-context="<?=$this->escapeHtmlAttr($this->context)?>" data-recordsource="<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>" data-recordid="<?=$this->escapeHtmlAttr($driver->getUniqueID())?>" data-coversize="<?=$this->escapeHtmlAttr($size)?>" class="recordcover ajax" alt="<?=$this->escapeHtmlAttr($alt); ?>">
+      <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>data-context="<?=$this->escapeHtmlAttr($this->context)?>" data-recordsource="<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>" data-recordid="<?=$this->escapeHtmlAttr($driver->getUniqueID())?>" data-coversize="<?=$this->escapeHtmlAttr($size)?>" class="recordcover ajax" alt="<?=$this->transEscAttr('Cover Image') ?>">
     </div>
   </div>
 <?php endif; ?>
-<?php if ($linkAttributes && !empty($alt)): ?></a><?php endif; ?>
+<?php if ($linkAttributes): ?></a><?php else: ?></div><?php endif; ?>
diff --git a/themes/bootstrap3/templates/RecordDriver/EDS/cover.phtml b/themes/bootstrap3/templates/RecordDriver/EDS/cover.phtml
@@ -1,20 +1,24 @@
 <?php
-  // set $alt to empty when we have an icon ($cover === false), because we don't want to link the icons (it looks weird)
-  $alt = $this->link && $cover !== false ? trim($this->driver->tryMethod('getTitle') ?? '') : '';
+  // we don't want to link the icons ($cover === false) (it looks weird)
+  $includeLinkInMarkup = $this->link && $cover !== false;
 ?>
-<?php if ($this->link && !empty($alt)): ?><a href="<?=$this->escapeHtmlAttr($this->link)?>" class="record-cover-link"><?php endif; ?>
+<?php if ($includeLinkInMarkup): ?>
+  <a href="<?=$this->escapeHtmlAttr($this->link)?>" class="record-cover-link" <?php if (!$this->linkUnique): ?>tabindex="-1" aria-hidden="true"<?php endif; ?>>
+<?php else: ?>
+  <div aria-hidden="true">
+<?php endif; ?>
 <?php /* Display thumbnail if appropriate: */ ?>
 <?php if ($cover): ?>
-  <img src="<?=$this->escapeHtmlAttr($cover); ?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="<?=$this->escapeHtmlAttr($alt); ?>">
+  <img src="<?=$this->escapeHtmlAttr($cover); ?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" alt="<?=$this->transEscAttr('Cover Image') ?>">
 <?php elseif ($cover === false): ?>
   <span class="recordcover pt-icon pt-<?=$this->driver->getPubTypeId()?>"></span>
   <div><?=$this->driver->getPubType()?></div>
 <?php else: ?>
   <div class="ajaxcover">
     <div class="spinner"><?=$this->icon('spinner') ?> <?=$this->translate('loading_ellipsis')?></div>
     <div class="cover-container">
-      <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>data-context="<?=$this->escapeHtmlAttr($this->context)?>" data-recordsource="<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>" data-recordid="<?=$this->escapeHtmlAttr($driver->getUniqueID())?>" data-coversize="<?=$this->escapeHtmlAttr($size)?>" class="recordcover ajax" alt="<?=$this->escapeHtmlAttr($alt); ?>">
+      <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>data-context="<?=$this->escapeHtmlAttr($this->context)?>" data-recordsource="<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>" data-recordid="<?=$this->escapeHtmlAttr($driver->getUniqueID())?>" data-coversize="<?=$this->escapeHtmlAttr($size)?>" class="recordcover ajax" alt="<?=$this->transEscAttr('Cover Image') ?>">
     </div>
   </div>
 <?php endif; ?>
-<?php if ($this->link && !empty($alt)): ?></a><?php endif; ?>
+<?php if ($includeLinkInMarkup): ?></a><?php else: ?></div><?php endif; ?>