如何编写数据库可视化界面_编写用于数据可视化的替代文本

如何编写数据库可视化界面

什么是替代文字 (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:

这是编写用于数据可视化的替代文本的简单公式:

alt= “Chart type of type of data where reason for including chart” Include a link to data source somewhere in the text
Example alt-text format for data viz
数据可视化的替代文本格式示例

图表类型 (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)

Bar chart of gun murders per 100,000 people where America’s murder rate is 6 times worse than Canada, and 30 times Australia

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:

如果我是在社交媒体上发布《纽约时报》文章“ 如何减少枪击事件 ”中的图表,则将包括该文章的链接并撰写以下替代文字:

Bar chart of gun murders per 100,000 people where America’s murder rate is 6 times worse than Canada, and 30 times Australia

复杂图表替代文字示例 (Complex chart alt text example)

Colored stripes of chronologically ordered temperatures where they increase in red to show the warming global temperature

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文本背后的含义:

Colored stripes of chronologically ordered temperatures where they increase in red to show the warming global temperature

如何添加替代文字 (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有完整的说明 。

Image for post
Image for post

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

点击帖子中的图片。 使用“替代文字”标签来写您的文字 。

Image showing Medium interface for adding alt 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的信息可视化硕士学位。

Image for post

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

如何编写数据库可视化界面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

reloaddata 跳动_纸跳动像素

reloaddata 跳动I would like to open with a problem.我想开一个问题。 Why are so many designer going straight to pixels?为什么这么多设计师直接使用像素&#xff1f; Over the past few years i’ve witnessed this in my team, my clients and others throughout th…

使用自定义RadioButton和ViewPager实现TabHost效果和带滑动的页卡效果。

参考自http://www.apkbus.com/android-86125-1-1.html 这篇文章技术含量一般&#xff0c;大家别见笑。源码我以测试&#xff0c;在底部可下载。 好了先上效果图&#xff1a; 以下是实现步骤&#xff1a; 1、准备自定义RadioButton控件的样式图片等&#xff0c;就是准…

利益相关者软件工程_改善开发人员团队与非技术利益相关者之间交流的方法

利益相关者软件工程Whether you’re working on a startup or a big company, keeping your stakeholders and non-technical partners engaged and up to date on what the tech team has been building can be hard.无论您是在初创公司还是大公司中工作&#xff0c;都要让您的…

响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局

响应式网格项目动画布局重点 (Top highlight)第二部分 (Part II) Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web. Responsive grids are a method to systematically align your des…

时间轴ui设计_我应该在UI设计上花更多时间吗?

时间轴ui设计Let’s start with an example of communication skills: they are important for any profession, and you expect any professional to have a decent level. However, excellent communication skills won’t make up for the lack of core expertise. Imagine …

移动端分步注册_移动应用程序的可用性测试:分步指南

移动端分步注册Written by Justin Mifsud由贾斯汀米夫苏德 ( Justin Mifsud)撰写 The mobile market is huge and growing at a very fast rate. With an estimated 4.5 billion subscribers worldwide, it is forecasted that the number of mobile phones will surpass the …

插图 引用 同一行两个插图_提出食物主题中的插图

插图 引用 同一行两个插图I have a page in my portfolio, which is about search functionality. I wanted that page to feel fun and engaging, to convey a positive vibe, so I decided to add illustrations to it.我的投资组合中有一个页面与搜索功能有关。 我希望该页面…

脸部细微表情识别_您可以仅使用面部表情来控制字体吗?

脸部细微表情识别原型 (The prototype) Facetype is the name of Adam’s interactive project, in which the emotions detected from a person’s facial gestures control a variable font. To each detected emotion corresponds a specific typeface, which keeps transfo…

uva10891Game of sum

题意:经典的取石子游戏是这样的:有一堆石子&#xff0c;A、B两个人轮流取&#xff0c;每次取一颗&#xff0c;只能从边上取&#xff0c;每个石子有相应的价值&#xff0c;A、B两人都想使得自己的价值最多&#xff0c;两个人足够聪明&#xff0c;问最后价值分别是多少 本题则是可…

用户体验设计师能为seo做_用户体验设计师可以从产品设计历史中学到什么

用户体验设计师能为seo做Many things have changed from tool design in the prehistoric era to today’s digital product design. However, we can see surprisingly many similarities. Especially when it comes down to one particular aspect: usability.从史前时代的工…

orton效果_如何使图片发光:Orton效果

orton效果Have you ever seen an impossibly dream-like landscape photo? One with a slow burning, glowing sunset. That’s really the best way to describe it, the image looks as if it’s glowing. You might be thinking, “wow, I wish I was that good and could …

UVA10785 The Mad Numerologist

虽然是sorting的压轴&#xff0c;但是比起前面真心水题。这个专题结合前面string的很多&#xff0c;排序相对简单了&#xff0c;qsort基本解决。 题目&#xff1a; The Mad Numerologist Numerology is a science that is used by many people to find out a mans personality,…

苹果人机交互指南_苹果人机界面设计指南的10个见解

苹果人机交互指南重点 (Top highlight)I’ve been developing an IOS app for the past few months and have been constantly referring to Apple’s Human Interface Design Guidelines. I would consider it a must-read for any aspiring or current UI/UX designer.在过去…

也来学学插件式开发

上一家公司有用到插件式开发来做一个工具箱&#xff0c;类似于QQ电脑管家&#xff0c;有很多工具列表&#xff0c;点一下工具下载后就可以开始使用了。可惜在那家公司待的时候有点短&#xff0c;没有好好研究一下。现在有空&#xff0c;自己在网上找了些资料&#xff0c;也来试…

同态加法_我对同态的想法

同态加法Early February, I uploaded this shot onto Dribbble. Nothing fancy –– just two screens experimenting with “2月初&#xff0c;我将这张照片上传到Dribbble。 没什么幻想–只有两个屏幕在尝试“ Neumorphism,” or soft UI. Little did I know that this post…

php内核探索

引自&#xff1a;http://www.nowamagic.net/librarys/veda/detail/1285 SAPI:Server Application Programming Interface 服务器端应用编程端口。研究过PHP架构的同学应该知道这个东东的重要性&#xff0c;它提供了一个接口&#xff0c;使得PHP可以和其他应用进行交互数据。 本…

hp-ux锁定用户密码_UX设计101:用户研究-入门需要了解的一切

hp-ux锁定用户密码这是什么&#xff1f; (What is this?) This session is part of a learning curriculum that I designed to incrementally skill up and empower a team of Designers and Researchers whose skillset and ways of working needed to evolve to keep up wi…

extjs6 引入ux_关于UX以及如何摆脱UX的6种常见误解

extjs6 引入uxDo you ever browse social media, internet, or talk to colleagues and hear them say something UX related you disagree with so much that you just want to lecture them on the spot?您是否曾经浏览过社交媒体&#xff0c;互联网或与同事交谈&#xff0c…

Cocos2D-HTML5开源2D游戏引擎

http://www.programmer.com.cn/12198/ Cocos2D-HTML5是基于HTML5规范集的Cocos2D引擎的分支&#xff0c;于2012年5月发布。Cocos2D-HTML5的作者林顺将在本文中介绍Cocos2D-HTML5的框架、API、跨平台能力以及强大的性能。Cocos2D-HTML5是Cocos2D系列引擎随着互联网技术演进而产生…

illustrator下载_Illustrator笔工具练习

illustrator下载Adobe Illustrator is a fantastic vector creation tool and you can create a lot of things without ever using the Pen Tool. However, if you want to use Illustrator at its full potential, I personally believe that you need to master and become …