如何使每個斷點都可以訪問圖片元素？

-1

<picture class='my-image'> 
    <source media="(min-width: 1024px)" srcset="large.jpg"> 
    <source media="(min-width: 768px)" srcset="med.jpg"> 
    <source srcset="small.jpg"> 
    <img src="small.jpg" alt=""> 
    <p>Accessible text</p> 
</picture>

但是，讓我們說，圖像的狀況是每個斷點不同。也許在大尺寸上，圖片是一個男人站在樹前。但在手機尺寸上，這只是一張樹的圖片。

有時候，某些圖片在手機大小和其他圖片很好地工作不取決於頁面佈局等

不管怎麼說，與圖片元素，你只能在整個一個地方指定alt=屬性圖片元素。但是，如果圖像上下文在每個斷點之間改變，是否有可能以某種方式指定不同的alt=屬性？你是否必須爲此使用JavaScript（這可能或可能不是屏幕閱讀器友好的）？

來源

2017-01-30 Jake Wilson

現在你有沒有ALT。但是，是的，你可以使用JS來改變取決於SRC中高音 – mplungjan

您的代碼似乎並不在我的OSX的Chrome https://jsfiddle.net/mplungjan/mjejpz9b/做任何事情（除了加入Hello進行ALT） – mplungjan

@ mplungjan'src'應該是'source'元素的'srcset'。 – guest271314

替代srcset爲src在<source>元件，使用<img>元件的onerror事件和window.matchMedia()設置alt屬性。

<script> 
    function handleError() { 
     var sources = document.querySelectorAll("picture source"); 
     var img = document.querySelector("picture img"); 
     for (var i = 0; i < sources.length; i++) { 
     if (window.matchMedia(sources[i].media).matches) { 
      img.setAttribute("alt", sources[i].dataset.alt); 
      break; 
     } 
     } 
    } 
    </script> 
    <picture class='my-image'> 
    <source media="(min-width: 1024px)" srcset="large.jpg" data-alt="large"> 
    <source media="(min-width: 768px)" srcset="med.jpg" data-alt="small"> 
    <source srcset="small.jpg" data-alt="small"> 
    <img src="small.jpg" alt="" onerror="handleError()"> 
    <p>Accessible text</p> 
    </picture>

plnkr http://plnkr.co/edit/GwwHWujq1Nt8V33zmJLS?p=preview

來源

2017-01-30 19:17:12 guest271314

這個JavaScript是否可以在屏幕閱讀器上工作？ –

@JakeWilson不確定「屏幕閱讀器」是什麼意思？你有沒有嘗試過？ – guest271314

@JakeWilson Answer＃javascript'返回預期結果嗎？請注意，原始問題沒有提及「屏幕閱讀器」。 – guest271314

也許在大尺寸，畫面是一個人站在樹前的。但在手機尺寸上，這只是一張樹的圖片。

在我看來，這種情況如果這些圖像是stictly裝飾，你不能把他們在CSS某些原因使用嚴格

時纔會出現，則替代文本有爲空。

如果不是裝飾性的圖片，那麼最簡單的解決方案是使用兩個不同的picture標籤，它不需要任何JavaScript。

來源

2017-01-31 09:25:22 Adam

讓我舉另一個例子。也許有一篇關於巴拉克奧巴馬的文章。有一張他在舞臺上發言的照片。在桌面佈局上，這張照片是他站在舞臺上的。替代文本將是「巴拉克奧巴馬在舞臺上說話」或什麼的。但在移動設備上，或許最好放大一下barack的圖片。自放大後，你無法辨別他處於舞臺上。每張不同的圖片都與上下文有關，但對alt標籤的描述略有不同。 –

@JakeWilson這個例子的不同之處在於給頁面提供更好的視覺渲染，而不是向內容添加額外的信息。這種差異純粹是裝飾性的。該'alt'文本不打算給圖像的完整描述，但替換文本（https://www.w3.org/TR/html51/semantics-embedded-content.html#general-guidelines）。即如果圖像不可見，那麼您瞭解內容時缺少哪些信息？ – Adam

如何使每個斷點都可以訪問圖片元素？

回答

相關問題