Merge pull request #5052 from open-formulieren/a11y/4622-textual-alte…

…rnative-for-pdf-logo Accessible textual alternative for PDF logo
open-formulieren · Feb 5, 2025 · c70e33f · c70e33f
2 parents 27c390d + d9b2299
commit c70e33f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/openforms/scss/pdfs/_index.scss b/src/openforms/scss/pdfs/_index.scss
@@ -7,5 +7,6 @@
 @import 'metadata';
 @import 'submission-step';
 @import 'submission-step-row';
+@import 'screen-reader';
 @import 'payment-info';
 @import 'privacy-policy';
diff --git a/src/openforms/scss/pdfs/_screen-reader.scss b/src/openforms/scss/pdfs/_screen-reader.scss
@@ -0,0 +1,10 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/src/openforms/submissions/templates/report/submission_report.html b/src/openforms/submissions/templates/report/submission_report.html
@@ -39,8 +39,14 @@
             <header class="header {% if theme.logo %}header--has-logo{% endif %}">
                 <span
                     class="header__logo"
-                    {% if theme.logo %}role="img" aria-label="{{ logo_alt }}"{% endif %}
-                ></span>
+                    {% if theme.logo %}role="img"{% endif %}
+                >
+                    {% if theme.logo %}
+                        <span class="sr-only">
+                            {{ logo_alt }}
+                        </span>
+                    {% endif %}
+                </span>
             </header>
 
             <h1 class="title">{{ report.form.name }}</h1>