什么是替代文字 (What is Alt Text)

Alt text (sometimes called Alt tags or alternative text) are written descriptions added to images that convey the meaning of the visual. Good alt text helps more people understand the content. Assistive technology like screen readers reads the alt text out loud so users can hear and understand the visual content. People who use screen readers often have a vision impairment. This includes people who are totally blind, but also people with low or impaired vision.

Alt文本 (有時稱為Alt標記或替代文本)是添加到圖像的書面說明，傳達了視覺的含義。 優質的替代文字可幫助更多的人理解其內容。 諸如屏幕閱讀器之類的輔助技術會大聲朗讀alt文本，以便用戶可以聽到和理解視覺內容。 使用屏幕閱讀器的人經常有視力障礙。 這包括完全失明的人，也包括視力低下或受損的人。

Not writing alt text means that people miss out on content that is necessary, just because it’s visual. It means it’s not accessible.

不寫替代文本意味著人們會因為視覺內容而錯過必要的內容。 這意味著它不可訪問。

從Webaim定義的替代文字： (Alt Text defined from Webaim:)

It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

屏幕閱讀器代替圖像來讀取它，從而使視覺或某些認知障礙者可以訪問圖像的內容和功能 。

It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.

如果未加載圖像文件或當用戶選擇不查看圖像時，它將在瀏覽器中代替圖像顯示。

It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

它為圖像提供了語義含義和描述，可以被搜索引擎讀取或用于以后僅從頁面上下文確定圖像的內容。

There are many resources for how to write alt text generally (I list more at the end of this piece), but few that provide guidance for how to write descriptions for data viz.

通常有很多 資源來編寫替代文本(我在本文的結尾列出了更多)，但是很少有資源為如何編寫數據說明提供指導。

如何為數據可視化編寫替代文本 (How to write for alt text for data visualization)

So how do you write something short that conveys the whole meaning of a visualization? You probably can’t. That doesn’t mean that you shouldn’t try.

那么，如何編寫簡短的內容來傳達可視化的全部含義呢？ 你可能做不到。 這并不意味著您不應該嘗試。

• Adding alt text is better than not doing anything at all if there’s meaningful information in the image.
  如果圖像中包含有意義的信息，則添加替代文本總比不執行任何操作更好。

• Add a long description if you can add HTML, to more fully convey the meaning.

  如果可以添加HTML，請添加長說明 ，以更全面地傳達其含義。

• Supplement with a link to the raw data, so curious readers can access the data in their own preferred program.
  補充原始數據的鏈接，以便好奇的讀者可以在自己的首選程序中訪問數據。
• Keep your alt text short. Alt text is read linearly by screen readers, which means that people can’t go back a word if they missed something. For SEO purposes, Google cuts off after a certain amount of characters.
  保持替代文字簡短。 屏幕閱讀器會線性讀取Alt文本，這意味著人們如果錯過了某些內容就無法退縮一個單詞。 出于搜索引擎優化的目的，Google會在輸入一定數量的字符后將其截斷。

The World Wide Web Consortium (W3C), an international Web standards setting community, offers guidelines for alt text for complex images, but it can be difficult to interpret how to apply these to data visualization. Below, I interpret these guidelines to apply to charts and graphs. Refer to the W3C guidelines for nuance and compliance.

萬維網聯盟(W3C)是一個國際Web標準制定社區，它為復雜圖像提供替代文本準則 ，但是很難解釋如何將其應用于數據可視化。 在下文中，我解釋了這些指導原則以適用于圖表。 有關細微差別和合規性，請參閱W3C準則 。

Here’s a simple formula for writing alt text for data visualization:

這是編寫用于數據可視化的替代文本的簡單公式：

圖表類型 (Chart type)

It’s helpful for people with partial sight to know what chart type it is and gives context for understanding the rest of the visual. Example: Line graph

對于視力不佳的人來說，了解它是什么圖表類型并為理解其余視覺內容提供上下文很有幫助。 示例：折線圖

資料類型 (Type of data)

What data is included in the chart? The x and y axis labels may help you figure this out. Example: number of bananas sold per day in the last year

圖表中包含哪些數據？ x和y軸標簽可以幫助您解決這一問題。 示例：去年每天出售的香蕉數量

包含圖表的原因 (Reason for including the chart)

Think about why you’re including this visual. What does it show that’s meaningful. There should be a point to every visual and you should tell people what to look for. Example: the winter months have more banana sales

考慮一下為什么要包含此視覺效果。 它表明什么是有意義的。 每個視覺效果都應該有重點，您應該告訴人們要尋找的東西。 示例：冬季的香蕉銷量增加

鏈接到數據或源 (Link to data or source)

Don’t include this in your alt text, but it should be included somewhere in the surrounding text. People should be able to click on a link to view the source data or dig further into the visual. This provides transparency about your source and lets people explore the data. Example: Data from the USDA

不要在替代文字中包含此內容，但應將其包含在周圍的文字中。 人們應該能夠單擊鏈接來查看源數據或進一步挖掘視覺效果。 這提供了有關您來源的透明性，并允許人們瀏覽數據。 示例：來自 USDA的 數據

簡單圖表替代文字示例 (Simple chart alt text example)

If I was posting this chart from the New York Times article “How to Reduce Shootings” on social media I would include a link to the article and write this alt text:

如果我是在社交媒體上發布《紐約時報》文章“ 如何減少槍擊事件 ”中的圖表，則將包括該文章的鏈接并撰寫以下替代文字：

復雜圖表替代文字示例 (Complex chart alt text example)

If I was posting a less typical chart type like the Warming Stripes from Ed Hawkins, I would include a link to the source and focus on the meaning behind them for the alt text:

如果我發布的是不太典型的圖表類型，例如Ed Hawkins的Waring Stripes ，那么我將包括指向源的鏈接，并著重關注alt文本背后的含義：

如何添加替代文字 (How to add alt text)

在HTML代碼中 (In HTML code)

Add alt text alt="" to any image that adds meaning inside the image tag <img>. Add a long description longdesc="" when possible.

將alt文本 alt=""添加到任何在圖像標簽<img>內添加含義的圖像。 如果可能，添加長描述 longdesc="" 。

在推特上 (On Twitter)

When you add an image, use the add description button or +alt. Twitter has full instructions.

添加圖像時，請使用添加描述按鈕或+ alt 。 Twitter有完整的說明 。

在Instagram上 (On Instagram)

Instagram hides the alt text functionality, but there is documentation on how to add alt text.

Instagram隱藏了替代文本功能，但是有關于如何添加替代文本的文檔 。

• Choose a filter and edit the image, then tap Next.

  選擇一個過濾器并編輯圖像，然后點擊下一步 。

• Tap Advanced Settings at the bottom of the screen.

  點擊屏幕底部的高級設置 。

• Tap Write Alt Text.

  點擊寫替代文本 。

在Microsoft Office產品中 (In Microsoft Office Products)

Microsoft Office has a variety of ways that you can add alt text depending on which program and what version you are using. However, they have extensive documentation on how to add alt text.

Microsoft Office有多種方式，您可以根據所使用的程序和所使用的版本來添加替代文本。 但是，他們有大量有關如何添加替代文本的文檔 。

在中等 (On Medium)

Click on the image in the post. Use the “Alt text” label to write your text.

點擊帖子中的圖片。 使用“替代文字”標簽來寫您的文字 。

By writing effective alternative text or alt text and including it when you publish data visualization you provide a way for people who cannot see the image to understand the content so they are not missing out on critical information. Having alt text is necessary in order for the visual content to be accessible.

通過編寫有效的替代文本或替代文本，并在發布數據可視化時將其包括在內，可以為看不見圖像的人提供一種理解內容的方式，從而使他們不會錯過重要信息。 為了使視覺內容可訪問，必須具有替代文本。

其他閱讀 (Other reading)

替代文字 (Alt text)

• Web Accessibility Tutorials: Complex images| W3C

  Web無障礙教程：復雜圖像 | W3C

• Alt Text & Accessibility | Web Aim

  替代文字和輔助功能 | 網絡目標

• How to Write Great Image Alt Text | Catherine McNally

  如何編寫出色的圖像替代文字 凱瑟琳·麥克納利

• The Right Way to Write Alt Text | Natalie Gotko

  寫替代文本的正確方法 娜塔莉(Natalie Gotko)

數據可視化的可訪問性 (Accessibility for Data Viz)

• Data Visualization Accessibility: Where Are We Now, and What’s Next? | Melanie Mazanec

  數據可視化可訪問性：我們現在在哪里，下一步是什么？ | 梅蘭妮·馬扎內克(Melanie Mazanec)

• Why Accessibility Is at the Heart of Data Visualization | Doug Schepers

  為什么可訪問性是數據可視化的核心 道格·謝珀斯(Doug Schepers)

• An intro to designing accessible data visualizations | Sarah L. Fossheim

  設計可訪問數據可視化的簡介 | 莎拉·福斯海姆(Sarah L.Fossheim)

• 5 easy ways to make your data visualization more accessible | Amy Cesal

  5種使數據可視化更易于訪問的簡單方法 艾米·塞薩爾(Amy Cesal)

Thank you to Doug Schepers and Zander Furnas for reviewing

感謝 Doug Schepers 和 Zander Furnas 的評論

Correction: The article previously stated that screen readers cut off reading alt text at 125 characters. This is outdated information and has been revised. Thanks to Zo? Bijl and Kevin White for the update.

改正 ：先前文章指出 屏幕閱讀器截斷了125個字符的替代文本 。 這是 過時的信息 ，已經過修訂。 感謝 Zo?Bijl 和Kevin White的更新。

Amy Cesal is a designer specializing in data visualization. She is a co-founder of the Data Visualization Society and currently serves on the board. Amy is passionate about building style guidelines for data visualization, trying to make everything, including charts, accessible, creating bespoke data visualization and experimenting with the boundaries between data and art. She holds a masters in Information Visualization from MICA.

艾米·塞薩爾 ( Amy Cesal) 是一位專門從事數據可視化的設計師。 她是數據可視化協會的聯合創始人，目前擔任董事會成員。 艾米(Amy)對建立數據可視化樣式指南充滿熱情，力求使包括圖表在內的所有內容都可訪問，創建定制的數據可視化并嘗試數據與藝術之間的界限。 她擁有MICA的信息可視化碩士學位。