Bug 39502: Web Usability: Decorative Images Do Not Need ALT Text
A accessibility audit has highlighted that some of the decorative images on
the opac have alt text which is often followed by a spen that also contains the same
text. This results in screen readers reading this information twice.
The suggested solution is to set the alt text to null in these instances.
Test Plan:
Prior to applying patch:
1) Navigate to Koha OPAC
2) Carry out a search
3) On one of the records right click on the Material Type: under the heading
4) Select Inspect
5) Note that the image has an alt text that matches the span that follows
6) Click on the item title and repeat the process for the icon below the contributors.
7) Scroll down to the holdings table and repeat the process for the image in the Item Type column
8) Apply the patch
9) Repeat the steps above and notice that the alt is now null in order to ignored by screen readers
11) Note that for the Dev tools may show alt but if you right click on the page and select View Page Source you will see that the code is alt="" as expected by screen readers
12) Note that for alt tags that have been updated in the xsl files e.g. the small icons that follow 'Material Type: ' may be cached.
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
(cherry picked from commit c5f99a3150)
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
This commit is contained in:
Alexander Blanchard
Paul Derscheid
parent
80526a92b4
commit
8a6c09f9e3
|
|
@ -396,7 +396,7 @@
|
|||
[% UNLESS noItemTypeImages %]
|
||||
let image_location = item_type_image_locations[row.item_type_id];
|
||||
node += image_location
|
||||
? '<img class="itemtype-image" src="%s" alt="%s" title="%s" /> '.format(escape_str(image_location), escape_str(item_type_description), escape_str(item_type_description))
|
||||
? '<img class="itemtype-image" src="%s" alt="" title="%s" /> '.format(escape_str(image_location), escape_str(item_type_description), escape_str(item_type_description))
|
||||
: '';
|
||||
[% END %]
|
||||
node += '<span class="itypedesc itypetext">%s</span>'.format(escape_str(item_type_description));
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@
|
|||
<label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
|
||||
[% UNLESS ( Koha.Preference('noItemTypeImages') ) %]
|
||||
[% IF ( itemtypeloo.imageurl ) %]
|
||||
<img class="itemtype-image" src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
|
||||
<img class="itemtype-image" src="[% itemtypeloo.imageurl | html %]" alt="" />
|
||||
[% END %]
|
||||
|
||||
[% END %]
|
||||
|
|
|
|||
|
|
@ -657,7 +657,7 @@
|
|||
[% IF ( !item_level_itypes ) || Koha.Preference('BiblioItemtypeInfo') %]
|
||||
<div class="result-biblio-itemtype">
|
||||
[% IF !noItemTypeImages && SEARCH_RESULT.imageurl %]
|
||||
<img class="itemtype-image" src="[% SEARCH_RESULT.imageurl | html %]" alt="[% SEARCH_RESULT.description | html %]" />
|
||||
<img class="itemtype-image" src="[% SEARCH_RESULT.imageurl | html %]" alt="" />
|
||||
[% END %]
|
||||
<span class="itypetext">[% SEARCH_RESULT.description | html %]</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -351,7 +351,7 @@
|
|||
[% UNLESS ( item_level_itypes ) %]
|
||||
<td>
|
||||
[% UNLESS ( noItemTypeImages || !itemsloo.imageurl ) %]
|
||||
<img class="itemtype-image" src="[% itemsloo.imageurl | html %]" alt="[% itemsloo.description | html %]" title="[% itemsloo.description | html %]" />
|
||||
<img class="itemtype-image" src="[% itemsloo.imageurl | html %]" alt="" title="[% itemsloo.description | html %]" />
|
||||
[% END %]
|
||||
<span class="itypetext">[% itemsloo.description | html %]</span>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -512,20 +512,20 @@
|
|||
<xsl:choose>
|
||||
<xsl:when test="$leader7='c' or $leader7='d' or $leader7='m'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/book.png" alt="book" title="book" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader7='i' or $leader7='s'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/newspaper.png" alt="serial" title="serial" class="materialtype mt_icon_CR"/> Continuing resource</xsl:when>
|
||||
<xsl:when test="$leader7='a' or $leader7='b'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/book_open.png" alt="article" title="article" class="materialtype mt_icon_AR"/> Article</xsl:when>
|
||||
<xsl:when test="$leader7='a' or $leader7='b'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/book_open.png" alt="" title="article" class="materialtype mt_icon_AR"/> Article</xsl:when>
|
||||
</xsl:choose>
|
||||
</xsl:when>
|
||||
<xsl:when test="$leader6='t'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/book.png" alt="book" title="book" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader6='o'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/report_disk.png" alt="kit" title="kit" class="materialtype mt_icon_MX"/> Kit</xsl:when>
|
||||
<xsl:when test="$leader6='p'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/report_disk.png" alt="mixed materials" title="mixed materials" class="materialtype mt_icon_MX"/>Mixed materials</xsl:when>
|
||||
<xsl:when test="$leader6='m'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/computer_link.png" alt="computer file" title="computer file" class="materialtype mt_icon_CF"/> Computer file</xsl:when>
|
||||
<xsl:when test="$leader6='e' or $leader6='f'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/map.png" alt="map" title="map" class="materialtype mt_icon_MP"/> Map</xsl:when>
|
||||
<xsl:when test="$leader6='g'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/film.png" alt="Film" class="materialtype mt_icon_VM"/> Film</xsl:when>
|
||||
<xsl:when test="$leader6='k'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/picture.png" alt="Picture" class="materialtype mt_icon_GR"/> Picture</xsl:when>
|
||||
<xsl:when test="$leader6='r'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/object.png" alt="Object" title="Object" class="materialtype mt_icon_OB"/> Object</xsl:when>
|
||||
<xsl:when test="$leader6='c' or $leader6='d'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/music.png" alt="score" title="score" class="materialtype mt_icon_PR"/> Score</xsl:when>
|
||||
<xsl:when test="$leader6='i'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/sound.png" alt="sound" title="sound" class="materialtype mt_icon_MU"/> Sound</xsl:when>
|
||||
<xsl:when test="$leader6='j'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/sound.png" alt="music" title="music" class="materialtype mt_icon_MU"/> Music</xsl:when>
|
||||
<xsl:when test="$leader6='o'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/report_disk.png" alt="" title="kit" class="materialtype mt_icon_MX"/> Kit</xsl:when>
|
||||
<xsl:when test="$leader6='p'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/report_disk.png" alt="" title="mixed materials" class="materialtype mt_icon_MX"/>Mixed materials</xsl:when>
|
||||
<xsl:when test="$leader6='m'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/computer_link.png" alt="" title="computer file" class="materialtype mt_icon_CF"/> Computer file</xsl:when>
|
||||
<xsl:when test="$leader6='e' or $leader6='f'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/map.png" alt="" title="map" class="materialtype mt_icon_MP"/> Map</xsl:when>
|
||||
<xsl:when test="$leader6='g'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/film.png" alt="" class="materialtype mt_icon_VM"/> Film</xsl:when>
|
||||
<xsl:when test="$leader6='k'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/picture.png" alt="" class="materialtype mt_icon_GR"/> Picture</xsl:when>
|
||||
<xsl:when test="$leader6='r'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/object.png" alt="" title="Object" class="materialtype mt_icon_OB"/> Object</xsl:when>
|
||||
<xsl:when test="$leader6='c' or $leader6='d'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/music.png" alt="" title="score" class="materialtype mt_icon_PR"/> Score</xsl:when>
|
||||
<xsl:when test="$leader6='i'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/sound.png" alt="" title="sound" class="materialtype mt_icon_MU"/> Sound</xsl:when>
|
||||
<xsl:when test="$leader6='j'"><img src="/intranet-tmpl/prog/img/famfamfam/silk/sound.png" alt="" title="music" class="materialtype mt_icon_MU"/> Music</xsl:when>
|
||||
</xsl:choose>
|
||||
</span>
|
||||
</xsl:if>
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@
|
|||
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
|
||||
[% IF ( itemtypeloo.imageurl ) %]
|
||||
<label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
|
||||
<img class="itemtype-image" src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
|
||||
<img class="itemtype-image" src="[% itemtypeloo.imageurl | html %]" alt="" aria-hidden="true" />
|
||||
</label>
|
||||
[% END %]
|
||||
|
||||
|
|
|
|||
|
|
@ -1357,7 +1357,7 @@
|
|||
<td class="itype">
|
||||
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
|
||||
[% IF ( ITEM_RESULT.imageurl ) %]
|
||||
<img class="itemtype-image" src="[% ITEM_RESULT.imageurl | html %]" title="[% ITEM_RESULT.description | html %]" alt="[% ITEM_RESULT.description | html %]" />
|
||||
<img class="itemtype-image" src="[% ITEM_RESULT.imageurl | html %]" title="[% ITEM_RESULT.description | html %]" alt="" />
|
||||
[% END %]
|
||||
[% END %]
|
||||
<span class="itypetext">[% ITEM_RESULT.description | html %]</span>
|
||||
|
|
|
|||
|
|
@ -401,7 +401,7 @@
|
|||
[% UNLESS ( item_level_itypes ) %]
|
||||
<td>
|
||||
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
|
||||
<img class="itemtype-image" src="[% itemsloo.imageurl | html %]" alt="[% itemsloo.description | html %]" title="[% itemsloo.description | html %]" />
|
||||
<img class="itemtype-image" src="[% itemsloo.imageurl | html %]" alt="" title="[% itemsloo.description | html %]" />
|
||||
[% END %]
|
||||
<span class="itypetext">[% itemsloo.description | html %]</span>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
<span class="results_summary type"><span class="label">Material type: </span>
|
||||
<xsl:element name="img">
|
||||
<xsl:attribute name="src">/opac-tmpl/lib/famfamfam/<xsl:value-of select="$materialTypeCode"/>.png</xsl:attribute>
|
||||
<xsl:attribute name="alt"><xsl:value-of select="$materialTypeLabel"/></xsl:attribute>
|
||||
<xsl:attribute name="alt"></xsl:attribute>
|
||||
<xsl:attribute name="class">materialtype mt_icon_<xsl:value-of select="$materialTypeCode"/></xsl:attribute>
|
||||
</xsl:element>
|
||||
<xsl:value-of select="$materialTypeLabel"/>
|
||||
|
|
|
|||
|
|
@ -697,25 +697,25 @@
|
|||
<span class="results_material_type">
|
||||
<span class="label">Material type: </span>
|
||||
<xsl:choose>
|
||||
<xsl:when test="$leader19='a'"><img src="/opac-tmpl/lib/famfamfam/ST.png" alt="Set" class="materialtype mt_icon_ST"/> Set</xsl:when>
|
||||
<xsl:when test="$leader19='a'"><img src="/opac-tmpl/lib/famfamfam/ST.png" alt="" class="materialtype mt_icon_ST"/> Set</xsl:when>
|
||||
<xsl:when test="$leader6='a'">
|
||||
<xsl:choose>
|
||||
<xsl:when test="$leader7='c' or $leader7='d' or $leader7='m'"><img src="/opac-tmpl/lib/famfamfam/BK.png" alt="Text" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader7='i' or $leader7='s'"><img src="/opac-tmpl/lib/famfamfam/SE.png" alt="Continuing resource" class="materialtype mt_icon_SE"/> Continuing resource</xsl:when>
|
||||
<xsl:when test="$leader7='a' or $leader7='b'"><img src="/opac-tmpl/lib/famfamfam/AR.png" alt="Article" class="materialtype mt_icon_AR"/> Article</xsl:when>
|
||||
<xsl:when test="$leader7='c' or $leader7='d' or $leader7='m'"><img src="/opac-tmpl/lib/famfamfam/BK.png" alt="" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader7='i' or $leader7='s'"><img src="/opac-tmpl/lib/famfamfam/SE.png" alt="" class="materialtype mt_icon_SE"/> Continuing resource</xsl:when>
|
||||
<xsl:when test="$leader7='a' or $leader7='b'"><img src="/opac-tmpl/lib/famfamfam/AR.png" alt="" class="materialtype mt_icon_AR"/> Article</xsl:when>
|
||||
</xsl:choose>
|
||||
</xsl:when>
|
||||
<xsl:when test="$leader6='t'"><img src="/opac-tmpl/lib/famfamfam/BK.png" alt="Text" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader6='o'"><img src="/opac-tmpl/lib/famfamfam/MM.png" alt="Kit" class="materialtype mt_icon_MM"/> Kit</xsl:when>
|
||||
<xsl:when test="$leader6='p'"><img src="/opac-tmpl/lib/famfamfam/MM.png" alt="Mixed materials" class="materialtype mt_icon_MM"/>Mixed materials</xsl:when>
|
||||
<xsl:when test="$leader6='m'"><img src="/opac-tmpl/lib/famfamfam/CF.png" alt="Computer file" class="materialtype mt_icon_CF"/> Computer file</xsl:when>
|
||||
<xsl:when test="$leader6='e' or $leader6='f'"><img src="/opac-tmpl/lib/famfamfam/MP.png" alt="Map" class="materialtype mt_icon_MP"/> Map</xsl:when>
|
||||
<xsl:when test="$leader6='g'"><img src="/opac-tmpl/lib/famfamfam/VM.png" alt="Film" class="materialtype mt_icon_VM"/> Film</xsl:when>
|
||||
<xsl:when test="$leader6='k'"><img src="/opac-tmpl/lib/famfamfam/GR.png" alt="Picture" class="materialtype mt_icon_GR"/> Picture</xsl:when>
|
||||
<xsl:when test="$leader6='r'"><img src="/opac-tmpl/lib/famfamfam/OB.png" alt="Object" class="materialtype mt_icon_OB"/> Object</xsl:when>
|
||||
<xsl:when test="$leader6='c' or $leader6='d'"><img src="/opac-tmpl/lib/famfamfam/PR.png" alt="Score" class="materialtype mt_icon_PR"/> Score</xsl:when>
|
||||
<xsl:when test="$leader6='i'"><img src="/opac-tmpl/lib/famfamfam/MU.png" alt="Sound" class="materialtype mt_icon_MU"/> Sound</xsl:when>
|
||||
<xsl:when test="$leader6='j'"><img src="/opac-tmpl/lib/famfamfam/PR.png" alt="Music" class="materialtype mt_icon_PR"/> Music</xsl:when>
|
||||
<xsl:when test="$leader6='t'"><img src="/opac-tmpl/lib/famfamfam/BK.png" alt="" class="materialtype mt_icon_BK"/> Text</xsl:when>
|
||||
<xsl:when test="$leader6='o'"><img src="/opac-tmpl/lib/famfamfam/MM.png" alt="" class="materialtype mt_icon_MM"/> Kit</xsl:when>
|
||||
<xsl:when test="$leader6='p'"><img src="/opac-tmpl/lib/famfamfam/MM.png" alt="" class="materialtype mt_icon_MM"/>Mixed materials</xsl:when>
|
||||
<xsl:when test="$leader6='m'"><img src="/opac-tmpl/lib/famfamfam/CF.png" alt="" class="materialtype mt_icon_CF"/> Computer file</xsl:when>
|
||||
<xsl:when test="$leader6='e' or $leader6='f'"><img src="/opac-tmpl/lib/famfamfam/MP.png" alt="" class="materialtype mt_icon_MP"/> Map</xsl:when>
|
||||
<xsl:when test="$leader6='g'"><img src="/opac-tmpl/lib/famfamfam/VM.png" alt="" class="materialtype mt_icon_VM"/> Film</xsl:when>
|
||||
<xsl:when test="$leader6='k'"><img src="/opac-tmpl/lib/famfamfam/GR.png" alt="" class="materialtype mt_icon_GR"/> Picture</xsl:when>
|
||||
<xsl:when test="$leader6='r'"><img src="/opac-tmpl/lib/famfamfam/OB.png" alt="" class="materialtype mt_icon_OB"/> Object</xsl:when>
|
||||
<xsl:when test="$leader6='c' or $leader6='d'"><img src="/opac-tmpl/lib/famfamfam/PR.png" alt="" class="materialtype mt_icon_PR"/> Score</xsl:when>
|
||||
<xsl:when test="$leader6='i'"><img src="/opac-tmpl/lib/famfamfam/MU.png" alt="" class="materialtype mt_icon_MU"/> Sound</xsl:when>
|
||||
<xsl:when test="$leader6='j'"><img src="/opac-tmpl/lib/famfamfam/PR.png" alt="" class="materialtype mt_icon_PR"/> Music</xsl:when>
|
||||
</xsl:choose>
|
||||
</span>
|
||||
</xsl:if>
|
||||
|
|
@ -764,7 +764,7 @@
|
|||
</xsl:when>
|
||||
<xsl:when test="contains($controlField008-24,'b')">
|
||||
bibliography
|
||||
<img src="/opac-tmpl/lib/famfamfam/text_list_bullets.png" alt="bibliography" class="natureofcontents"/>
|
||||
<img src="/opac-tmpl/lib/famfamfam/text_list_bullets.png" alt="" class="natureofcontents"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="contains($controlField008-24,'c')">
|
||||
catalog
|
||||
|
|
|
|||
Loading…
Reference in New Issue