From d9b229982aa4b315060295a41a2bc7af769a0974 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Tue, 28 Jan 2025 13:59:08 +0100 Subject: [PATCH] :wheelchair: [#4622] Accessible textual alternative for logo The previous textual alternative, using `aria-label`, wasn't targetable by screen readers (tested using the macOS VoiceOver screen reader). By providing the textual alternative as real content the screen reader can find and read the content. --- src/openforms/scss/pdfs/_index.scss | 1 + src/openforms/scss/pdfs/_screen-reader.scss | 10 ++++++++++ .../templates/report/submission_report.html | 10 ++++++++-- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 src/openforms/scss/pdfs/_screen-reader.scss diff --git a/src/openforms/scss/pdfs/_index.scss b/src/openforms/scss/pdfs/_index.scss index 04b368d492..8922d0fd06 100644 --- 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 new file mode 100644 index 0000000000..9b24e6d86c --- /dev/null +++ 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 index 774db1eee7..1a0382ac45 100644 --- a/src/openforms/submissions/templates/report/submission_report.html +++ b/src/openforms/submissions/templates/report/submission_report.html @@ -39,8 +39,14 @@

{{ report.form.name }}