comply with image-alt and region rules of a11y (#373)

* add aria-label, aria-labelledby and alt to event-image * change div to nav to comply with landmark region rule * add pictureAltText event property * replace `PICTUREALTTEXT` with `PICTURE_ALT_TEXT` in eventService
boudicca-events · Apr 8, 2024 · a90ea78 · a90ea78
1 parent 3446999
commit a90ea78
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/...her-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt b/...her-event-html/src/main/kotlin/base/boudicca/publisher/event/html/service/EventService.kt
@@ -156,6 +156,7 @@ class EventService @Autowired constructor(
                         pictureProxyService.submitPicture(event.data["pictureUrl"]!!).toString()
                     else
                         "",
+            "pictureAltText" to (event.data[SemanticKeys.PICTURE_ALT_TEXT] ?: ""),
             "accessibilityProperties" to getAllAccessibilityValues(event).joinToString(", "),
         )
     }

diff --git a/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs b/boudicca.base/publisher-event-html/src/main/resources/templates/events/event.hbs
@@ -1,7 +1,7 @@
 <div class="event">
         <div class="event-image {{#if event.category}}event-image-{{event.category}}{{/if}}">
             {{#if event.pictureUuid}}
-                <img src="/picture?uuid={{event.pictureUuid}}" style="height:100px;max-height:250px;max-width:300px;" />
+                <img src="/picture?uuid={{event.pictureUuid}}" style="height:100px;max-height:250px;max-width:300px;" alt="{{#if event.pictureAltText}}{{event.pictureAltText}}{{else}}Event Bild{{/if}}" aria-label="Event Bild" aria-labelledby="image" />
             {{else}}
                 <svg title="Event Bild" viewBox="0 0 512 512" height="100px" >
                     <use xlink:href="#{{#if event.category}}{{event.category}}{{else}}image{{/if}}"></use>

diff --git a/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs b/boudicca.base/publisher-event-html/src/main/resources/templates/layout/header_links.hbs
@@ -1,7 +1,7 @@
-<div class="header-links">
+<nav class="header-links">
     <a href="/" target="_self">Events</a>
     <a href="/sources" target="_self">Sources</a>
     {{#each extensionHeaders as |extensionHeader|}}
         <a href="{{extensionHeader.url}}" target="{{extensionHeader.target}}">{{extensionHeader.text}}</a>
     {{/each}}
-</div>
+</nav>
diff --git a/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt b/boudicca.base/semantic-conventions/src/main/kotlin/base/boudicca/SemanticKeys.kt
@@ -13,11 +13,13 @@ object SemanticKeys {
     const val RECURRENCE_INTERVAL = "recurrence.interval"
     const val TAGS = "tags"
     const val REGISTRATION = "registration"
+
     const val PICTURE_URL = "pictureUrl"
     @Deprecated("use PICTURE_URL instead")
     const val PICTUREURL = PICTURE_URL
     const val PICTURE_ALT_TEXT = "pictureAltText"
     const val PICTURE_COPYRIGHT = "pictureCopyright"
+
     const val COLLECTORNAME = "collectorName"
     const val SOURCES = "sources"
     const val ADDITIONAL_EVENTS_URL = "additionalEventsFromSourceUrl"