亚洲欧美综合国产不卡,亚洲视频免费在线观看,亚洲人成a在线网站,国产l精品国产亚洲区在线观看

<ruby id="vvzxx"></ruby>

      <ruby id="vvzxx"><mark id="vvzxx"></mark></ruby>
      <ruby id="vvzxx"><mark id="vvzxx"><progress id="vvzxx"></progress></mark></ruby>

      <del id="vvzxx"><mark id="vvzxx"></mark></del><p id="vvzxx"></p>
      <del id="vvzxx"></del>

      <output id="vvzxx"><cite id="vvzxx"></cite></output>

        首頁 客戶案例 品牌營銷網站建設 微信小程序開發 網絡營銷 APP開發 終端形象 動態 聯系

        1對1定制服務,PC端+手機端+小程序多端應用

        網頁中alt屬性的正確用法

        2019年12月17日瀏覽:

        到目前為止,大多數網頁設計行業都知道易訪問性的重要性。我們不停地談論它,懇求我們的客戶認真對待它。它對網絡和用戶的影響是不可否認的。


        但有時細節會在混亂中丟失,例如,我們經常聽到“在圖像上使用替代文本!”這樣一個善意的好建議。不過,它也有點模糊。


        雖然知道alt屬性在可訪問性方面是有益的,但是我們真正需要的是上下文。正確的使用方法是什么?有些時候我們不應該使用它們?


        這些問題的靈感來自于我與一些設計師和開發人員在Twitter上的對話,它讓我意識到,我并不是唯一一個有時會為如何建立對用戶有利的網站而苦苦掙扎的人。


        今天,我們將嘗試闡明這個重要屬性的正確用法!


        意象的角色變化


        這些年來,網頁設計師利用圖片的方式已經發生了很大的變化。在網絡的早期,圖像的使用方式是我們現在可能想不到的。我們將它們作為頁面標題、導航系統甚至整個充滿內容的頁面來使用。


        對于依賴屏幕閱讀器或其他輔助技術的用戶,這可能會導致頁面無法使用。在大量內容顯示為圖像的情況下,即使簡單的alt屬性也沒有多大幫助。


        值得慶幸的是,我們已經吸取了一些重要的教訓。網絡排版的爆炸式發展已經消除了過去任何與設計相關的誤用圖片的理由。隨著可訪問性的出現,許多人現在意識到圖像有特定的作用。


        1.jpg


        替代文字的重要性


        合理地使用圖像應該會帶來更好的可訪問性,雖然這在一定程度上是正確的,但我們仍然有能力把事情搞糟。這就是替代文本可以發揮作用的地方——如果使用正確的話。


        記住只使用alt屬性并不一定會給用戶帶來很多好處,例如,假設我們有一個標題標簽,上面寫著“關于我們”。下面是公司員工的合影。如果我們簡單地將alt屬性設置為alt= " About Us ",那么當輔助技術讀取它時,它就變得多余了。因此,它并不真正告訴用戶圖像是什么或它意味著什么。


        那么,我們應該用什么來代替呢?這在很大程度上取決于頁面本身的內容和圖像在其中的作用。然而,這又帶來了另一個潛在的問題。


        值得慶幸的是,W3C有一個有用的指南,將圖像分解為不同的概念:


        內容豐富、裝飾性、功能性、文字圖片、復雜、圖片組、影像圖


        該指南提供了每個概念的簡要說明,以及可以幫助您確定提供替代文本的最相關路徑的示例。如果您仍然不確定,請查看alt決策樹以獲得更多指導。


        2.jpg


        并非總是必要的嗎?


        W3C指南中最有趣的信息之一是,并非所有圖像都需要alt屬性。


        但是,等一下。那些每次都要使用alt的調用呢?我們不是忽略了可訪問性嗎?


        結果是,對于裝飾性圖像(不向頁面添加任何信息),alt屬性就變得沒有必要了。在這種情況下,提供替代文本會“給屏幕閱讀器輸出增加雜音”。因此,就像缺少空白會導致視覺頁面布局混亂一樣,對于依賴這些工具的人來說,這些額外的文本也會造成同樣的結果。


        讓web設計人員感到困難的是自動化的可訪問性工具,比如WAVE標記圖像,當他們閱讀一個頁面時,沒有替代文本。甚至谷歌也會向你發送煩人的電子郵件,抱怨某個特定的圖像在他們的視圖中無法訪問。這迫使我們填寫屬性,只是為了通過自動化測試。


        因此,我們有責任對這些結果持保留態度,并在必要時向客戶解釋情況。在特定情況下,空的alt屬性可能是有益的。


        3.jpg


        關于幫助用戶


        在做了一些關于如何使用alt屬性的研究之后,我意識到我經常使用錯誤的方法。我懷疑很多設計師也這么做過。


        在某種程度上,這是可以理解的。這個屬性雖然已經存在了很長時間,但并不令人興奮。它是功利主義的,并不總是在我們的腦海中。


        然而,對于許多用戶來說,這是至關重要的??紤]到不是每個人都能輕易看到我們整合到頁面中的圖像。對于這些人來說,alt屬性的作用是幫助將上下文帶到他們正在消費的內容中。


        當我們構建一個日益復雜的網絡時,這是需要記住的。

        在線提交您的需求

        *我們會在24小時內回復您,節假日除外。
        線上服務咨詢微信二維碼 13880656240獲取解決方案
        <ruby id="vvzxx"></ruby>

            <ruby id="vvzxx"><mark id="vvzxx"></mark></ruby>
            <ruby id="vvzxx"><mark id="vvzxx"><progress id="vvzxx"></progress></mark></ruby>

            <del id="vvzxx"><mark id="vvzxx"></mark></del><p id="vvzxx"></p>
            <del id="vvzxx"></del>

            <output id="vvzxx"><cite id="vvzxx"></cite></output>