diff --git a/gfi-ihk-2024/stories/_global/styles/main.scss b/gfi-ihk-2024/stories/_global/styles/main.scss index 45bed62..6728255 100644 --- a/gfi-ihk-2024/stories/_global/styles/main.scss +++ b/gfi-ihk-2024/stories/_global/styles/main.scss @@ -140,3 +140,15 @@ img { display: none; } +// Only for Screenreaders +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js b/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js index 8c32a0c..ad8a817 100644 --- a/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js +++ b/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js @@ -13,7 +13,9 @@ export const createElectionResultListItem = topBox.href = '#'; const imageBox = createElement('div', ['image-box'], null, topBox); createImage(image, 310, 310, '', [], imageBox); - createElement('span', ['copyright'], name, imageBox); + const copy = createElement('span', ['copyright'], name, imageBox); + copy.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], name, imageBox); createElement('h3', [], name, topBox); const textBox = createElement('div', ['text-box'], null, electionResultListItem); diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.js b/gfi-ihk-2024/stories/components/gallery/gallery.js index f34afbc..2ce2611 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.js +++ b/gfi-ihk-2024/stories/components/gallery/gallery.js @@ -71,7 +71,8 @@ class IHKGallery { const a = $('').attr('data-index', 0).appendTo(first); const img = $('' + first.attr(').appendTo(a); if (first.data('copyright')) { - $('' + first.data('copyright') + '').appendTo(a); + $('').appendTo(a); + $('' + first.data('copyright') + '').appendTo(a); } first.find('.image-description').appendTo(this.wrapper); diff --git a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js index 599c565..71733bb 100644 --- a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js +++ b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js @@ -55,7 +55,9 @@ export const createTeaser = ({ createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox); if (copyright && copyright.length > 0) { - createElement('span', ['copyright'], copyright, imageBox); + const copy = createElement('span', ['copyright'], copyright, imageBox); + copy.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], copyright, imageBox); } } else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) { diff --git a/gfi-ihk-2024/stories/components/video/VideoComponent.js b/gfi-ihk-2024/stories/components/video/VideoComponent.js index 8ad94fb..a747f00 100644 --- a/gfi-ihk-2024/stories/components/video/VideoComponent.js +++ b/gfi-ihk-2024/stories/components/video/VideoComponent.js @@ -17,7 +17,9 @@ export const createVideo = ({ } if (copyright && copyright.length > 0) { - createElement('span', ['copyright'], copyright, videoBox); + const copy = createElement('span', ['copyright'], copyright, videoBox); + copy.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], copyright, videoBox); } if (caption && caption.length > 0) { createElement('figcaption', [], caption, figure); diff --git a/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js b/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js index 46e5655..2a5f54d 100644 --- a/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js +++ b/gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js @@ -46,7 +46,9 @@ export const createElectionDetail = const imageContainer = createElement('div', ['election-detail--image-container'], null, text); createImage(image, 545, 526, '', [], imageContainer); - createElement('span', ['copyright'], name, imageContainer); + const copyright = createElement('span', ['copyright'], name, imageContainer); + copyright.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], name, imageContainer); const textbox = createElement('div', ['text-box'], null, text); createElement('h1', [], name, textbox); createElement('p', ['subheadline'], subheadline, textbox); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index 91f1410..b5da802 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -108,7 +108,9 @@ export const createMarketingHeader = if (slideData.imageSrc && slideData.imageSrc.length > 0) { const imageBox = createElement('div', ['image-box'], null, outer); createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox); - createElement('span', ['copyright'], 'Copyright-Angabe', imageBox); + const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox); + copyright.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox); if (contextBoxContentImg) { const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 6ae498a..5914df2 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -24,6 +24,14 @@ section.marketingheader{ height:auto; } } + .copyright { + @media(max-width: 900px) { + left: calc(100% - 30px); + } + @media(max-width: 767px) { + left: calc(100% - 20px); + } + } } } .text-box{ @@ -516,7 +524,7 @@ section.marketingheader{ } .rotation { padding:0; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 999px) { .slide:not(.text-only) .text-box { padding: 16px 0; } @@ -840,14 +848,14 @@ section.marketingheader{ min-width: 324px; } } - @media (min-width: 1001px) { + @media (min-width: 1000px) { .slider .text-box:not(:first-child)::before { border-top-right-radius: 16% 50% !important; border-bottom-right-radius: 16% 50% !important; margin: -15% -8% -15% 20px; } } - @media (max-width:1000px){ + @media (max-width:999px){ .slider{ background-color: white; diff --git a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js index cbe7b61..a798bd2 100644 --- a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js +++ b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js @@ -23,7 +23,9 @@ export const createSlider = const imageBox = createElement('div', ['image-box'], null, outer); createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox); if (slideData.copyright && slideData.copyright.length > 0) { - createElement('span', ['copyright'], slideData.copyright, imageBox); + const copy = createElement('span', ['copyright'], slideData.copyright, imageBox); + copy.setAttribute("aria-hidden", "true"); + createElement('span', ['sr-only'], slideData.copyright, imageBox); } if (contextBoxContentImg) { const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index 64bbaba..2d1ebad 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -428,7 +428,8 @@ class IHKSlider { nextItem.append(loadedImage.clone()); // Copyright für Next-Wrapper if (ib.attr('data-copyright')) { - $('').html(ib.attr('data-copyright')).appendTo(nextItem); + $('