如何編寫數(shù)據(jù)庫可視化界面

什么是替代文字 (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標記或替代文本)是添加到圖像的書面說明，傳達了視覺的含義。 優(yōu)質(zhì)的替代文字可幫助更多的人理解其內(nèi)容。 諸如屏幕閱讀器之類的輔助技術(shù)會大聲朗讀alt文本，以便用戶可以聽到和理解視覺內(nèi)容。 使用屏幕閱讀器的人經(jīng)常有視力障礙。 這包括完全失明的人，也包括視力低下或受損的人。

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.

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

從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.

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

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.

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

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.

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

如何為數(shù)據(jù)可視化編寫替代文本 (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.

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

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

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

  如果可以添加HTML，請?zhí)砑娱L說明 ，以更全面地傳達其含義。

• Supplement with a link to the raw data, so curious readers can access the data in their own preferred program.
  補充原始數(shù)據(jù)的鏈接，以便好奇的讀者可以在自己的首選程序中訪問數(shù)據(jù)。
• 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文本，這意味著人們?nèi)绻e過了某些內(nèi)容就無法退縮一個單詞。 出于搜索引擎優(yōu)化的目的，Google會在輸入一定數(shù)量的字符后將其截斷。

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.

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

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

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

Example alt-text format for data viz數(shù)據(jù)可視化的替代文本格式示例

圖表類型 (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

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

資料類型 (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

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

包含圖表的原因 (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

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

鏈接到數(shù)據(jù)或源 (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

不要在替代文字中包含此內(nèi)容，但應(yīng)將其包含在周圍的文字中。 人們應(yīng)該能夠單擊鏈接來查看源數(shù)據(jù)或進一步挖掘視覺效果。 這提供了有關(guān)您來源的透明性，并允許人們?yōu)g覽數(shù)據(jù)。 示例：來自 USDA的 數(shù)據(jù)

簡單圖表替代文字示例 (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:

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

復(fù)雜圖表替代文字示例 (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:

如果我發(fā)布的是不太典型的圖表類型，例如Ed Hawkins的Waring Stripes ，那么我將包括指向源的鏈接，并著重關(guān)注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>內(nèi)添加含義的圖像。 如果可能，添加長描述 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隱藏了替代文本功能，但是有關(guān)于如何添加替代文本的文檔 。

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

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

• Tap Advanced Settings at the bottom of the screen.

  點擊屏幕底部的高級設(shè)置 。

• Tap Write Alt Text.

  點擊寫替代文本 。

在Microsoft Office產(chǎn)品中 (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有多種方式，您可以根據(jù)所使用的程序和所使用的版本來添加替代文本。 但是，他們有大量有關(guān)如何添加替代文本的文檔 。

在中等 (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.

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

其他閱讀 (Other reading)

替代文字 (Alt text)

• Web Accessibility Tutorials: Complex images| W3C

  Web無障礙教程：復(fù)雜圖像 | W3C

• Alt Text & Accessibility | Web Aim

  替代文字和輔助功能 | 網(wǎng)絡(luò)目標

• How to Write Great Image Alt Text | Catherine McNally

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

• The Right Way to Write Alt Text | Natalie Gotko

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

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

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

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

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

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

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

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

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

  5種使數(shù)據(jù)可視化更易于訪問的簡單方法 艾米·塞薩爾(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個字符的替代文本 。 這是 過時的信息 ，已經(jīng)過修訂。 感謝 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) 是一位專門從事數(shù)據(jù)可視化的設(shè)計師。 她是數(shù)據(jù)可視化協(xié)會的聯(lián)合創(chuàng)始人，目前擔任董事會成員。 艾米(Amy)對建立數(shù)據(jù)可視化樣式指南充滿熱情，力求使包括圖表在內(nèi)的所有內(nèi)容都可訪問，創(chuàng)建定制的數(shù)據(jù)可視化并嘗試數(shù)據(jù)與藝術(shù)之間的界限。 她擁有MICA的信息可視化碩士學位。

翻譯自: https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81

如何編寫數(shù)據(jù)庫可視化界面

總結(jié)

以上是生活随笔為你收集整理的如何编写数据库可视化界面_编写用于数据可视化的替代文本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。