Audit #1 – General Overview when logged in – Better hiding of presentational SVGs

[marcus-herrmann]

Connected to Audit 1, see #4300
1.2 General Overview when logged in, URL: https://ocis-a11y.owncloud.works/#/files/list

Issue

The Markup for purely presentational SVG images can be improved. Currently it is:

<span aria-label="icon" class="uk-flex oc-icon oc-icon-m oc-icon-system" aria-hidden="true"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6667 21H10.7917V15H6.875V21H1V25H6.875V31H10.7917V25H16.6667V21ZM36.25 23C39.5008 23 42.1054 20.32 42.1054 17C42.1054 13.68 39.5008 11 36.25 11C35.6233 11 35.0163 11.1 34.4679 11.28C35.5842 12.9 36.2304 14.86 36.2304 17C36.2304 19.14 35.5646 21.08 34.4679 22.72C35.0163 22.9 35.6233 23 36.25 23ZM26.4583 23C29.7092 23 32.3138 20.32 32.3138 17C32.3138 13.68 29.7092 11 26.4583 11C23.2075 11 20.5833 13.68 20.5833 17C20.5833 20.32 23.2075 23 26.4583 23ZM39.4225 27.32C41.0479 28.78 42.125 30.64 42.125 33V37H48V33C48 29.92 43.3588 28.02 39.4225 27.32ZM26.4583 27C22.5417 27 14.7083 29 14.7083 33V37H38.2083V33C38.2083 29 30.375 27 26.4583 27Z"></path>
</svg>
</span>

This could be considered a violation of BITV 1.1.1b and 4.1.2a.

Remediation

<span class="uk-flex oc-icon oc-icon-m oc-icon-system"><svg aria-hidden="true" focusable="false" role="presentation" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6667 21H10.7917V15H6.875V21H1V25H6.875V31H10.7917V25H16.6667V21ZM36.25 23C39.5008 23 42.1054 20.32 42.1054 17C42.1054 13.68 39.5008 11 36.25 11C35.6233 11 35.0163 11.1 34.4679 11.28C35.5842 12.9 36.2304 14.86 36.2304 17C36.2304 19.14 35.5646 21.08 34.4679 22.72C35.0163 22.9 35.6233 23 36.25 23ZM26.4583 23C29.7092 23 32.3138 20.32 32.3138 17C32.3138 13.68 29.7092 11 26.4583 11C23.2075 11 20.5833 13.68 20.5833 17C20.5833 20.32 23.2075 23 26.4583 23ZM39.4225 27.32C41.0479 28.78 42.125 30.64 42.125 33V37H48V33C48 29.92 43.3588 28.02 39.4225 27.32ZM26.4583 27C22.5417 27 14.7083 29 14.7083 33V37H38.2083V33C38.2083 29 30.375 27 26.4583 27Z"></path>
</svg>
</span>

What happened:

• Removed aria-label and aria-hidden from wrapping span
• SVG element got aria-hidden applied, also:
• SVG element got focusable="false" and role="presentation"

Please note: This only applies for presentational SVGs. For SVGs that convey meaning the abstract code is as follows:

<svg role="img" focusable="false" aria-labelledby="someId">
  <title id="someId">Accessible Name of the SVG</title>
  <use xlink:href="#svg-id-to-reference" aria-hidden="true" />
  <!-- if not using <use> then the child elements 
       of the inline SVG would go here -->
</svg>

[JammingBen]

Has been fixed.