hexo 阅读更多 按钮
重点 (Top highlight)
It’s probably not the first time you’ve heard that using links like “Read More” or “Click Here” is bad practice. This topic has been widely discussed and the internet is packed with information about why it sucks. If you’re still making links like “Learn More” in 2020, it’s really time to kick this habit to the curb. If you’re not, you can probably stop reading… But, are your alternatives that much better?
您可能不是第一次听说使用“阅读更多”或“单击此处”之类的链接是不正确的做法。 这个主题已被广泛讨论,互联网上充斥着有关它为何糟糕的信息。 如果您仍在2020年建立“了解更多”之类的链接,那么现在就该将这种习惯遏制住了。 如果不是,您可能会停止阅读……但是,您的替代方法会更好吗?
For those of you who want to make your links more accessible, let’s take a closer look at the underlying issue behind uninformative links.
对于那些想使您的链接更易于访问的人,让我们仔细看看无信息链接背后的潜在问题。
他们缺乏背景。 (They lack context.)
Why is context important? People come from a background of different experiences, biases, and/or capabilities that influence how they process the world, which includes the content they see on the web. Let’s take this scenario from a book called Culture Map I think everyone that is interested in accessibility should pick up.
为什么背景很重要? 人们来自具有不同体验,偏见和/或能力的背景,这些体验,偏见和/或能力会影响他们对世界的处理方式,其中包括他们在网络上看到的内容。 让我们从一本名为《文化地图》的书中了解这种情况,我认为每个对可访问性感兴趣的人都应该学习。
So, this is how the story goes…
所以,这就是故事的发展过程……
On a business trip to New Dehli Erin Meyer found difficulty finding a restaurant recommended to her by the concierge at her hotel. She came back three times to clarify his instructions, but in the end he had to take her there. When they arrived she couldn’t help but think why he hadn’t just told her to “Cross the street, turn left, walk nine minutes, look for the big bank on the corner, and, when you see the big fruit store, look up to the second floor of the yellow stucco building for a sign with the restaurant’s name.”
在前往新德里(New Dehli)的商务旅行中,艾琳·迈耶(Erin Meyer)遇到困难,无法在她的酒店找到礼宾推荐给她的餐厅。 她三度回来澄清他的指示,但最后他不得不带她去那里。 当他们到达时,她忍不住想了为什么他不只是告诉她:“过马路,向左转,步行九分钟,在拐角处寻找大银行,当你看到大果店时,抬头仰望黄色粉刷建筑物的二楼,找到带有餐厅名称的标志。”
By providing context you’re giving people the information they need to successfully understand what to do and how to find the information they’re looking for.
通过提供上下文,您可以为人们提供成功了解要做的事情以及如何查找所需信息所需的信息。
Take for instance this example on how to improve a ‘read more’ link given on a11project’s website (a great resource for all of your accessibility guideline needs):
以以下示例为例,该示例如何改善a11project网站上提供的“更多信息”链接 (这是满足您所有可访问性指南需求的强大资源):
When a person navigates a webpage using links alone, “Click Me” would be read out of context. It doesn’t give a user the ability to scan a webpage for specific information in a quick or easy way.
当一个人仅使用链接浏览网页时,“点击我”将被从上下文中读出。 它不能使用户快速或轻松地扫描网页中的特定信息。
High context wins because you’re not designing based on your own abilities and biases anymore. It addresses everyone from a basic level of understanding, so that you’re not leaving anyone out. Not to mention it comes with other added benefits like SEO and content find-ability.
高上下文赢得了胜利,因为您不再基于自己的能力进行设计并且不再偏见。 它从基本的理解上解决了每个人,因此您不会遗漏任何人。 更不用说它带来了其他附加好处,如SEO和内容发现能力 。
So it’s all fine and dandy to understand why context is important, but how do you actually put this into practice? I’ve created this comprehensive checklist to help you make your links as accessible as they can be.
因此,理解上下文为何如此重要固然很好,但您实际上如何将其付诸实践呢? 我创建了这个全面的清单,以帮助您使链接尽可能地易于访问。
无障碍链接清单 : (Accessible Link Checklist:)
步骤1 :有效HTML (Step 1: Valid HTML)
href attribute — find out why it’s better to use absolute versus relative URLs
href属性 - 了解为什么使用绝对URL和相对URL更好
link content — learn how to best use the alt attribute to help people using assistive technologies
链接内容 - 了解如何最好地使用alt属性来帮助使用辅助技术的人们
第2步 :语法和其他方法 (Step 2: Grammar and what not)
Understand why links should make sense out of context.
了解为什么链接应该脱离上下文才有意义 。
Learn how to make links concise and descriptive.
了解如何使链接简洁明了 。
- Start with a keyword. 从关键字开始。
Follow punctuation rules for hyperlinks like not including ending punctuation in the link.
遵循超链接的标点符号规则,例如在链接中不包括结束标点符号。
Try to use concrete nouns to give users a more immediate and vidid idea of what they will get when they click through. — A concrete known is a noun can be perceived using one of the five senses. For example, nouns like dog, bark, or cookies. Read more about concrete nouns.
尝试使用具体的名词使用户更直观,更生动地了解他们在单击时会得到什么 。 —已知的具体名词是可以使用五种意义之一来感知的。 例如,名词如dog,bark或cookie。 阅读有关具体名词的更多信息 。
Avoid using only verb phrases as anchors. Learn more about what verb phrases are.
避免仅将动词短语用作锚。 了解更多有关动词短语的信息 。
步骤3 :样式 (Step 3: Styling)
Make sure your links are underlined or follow the additional requirements for body text links that are not underlined by default.
确保您的链接带有下划线,或者遵循默认情况下未带下划线的正文文本链接的其他要求 。
Be Level AA conformant regarding colour contrast. — You might find it handy to provide a secondary feature to toggle your website between your current colour state to a more accessible state. Kind of like a ‘dark mode’, but for accessibility. Check out this super useful resource for determining who can use specific colour combinations.
在颜色对比度上符合AA级标准 。 —您可能会发现提供辅助功能来将网站从当前颜色状态切换到更易于访问的状态很方便。 有点像“暗模式”,但用于可访问性。 查看此超级有用的资源,以确定谁可以使用特定的颜色组合 。
Understand why changing the colour of visited links makes your site easier to navigate and increases user satisfaction.
So there you have it. With accessibility standards ramping up, it’s important to remember how context is essential for good UX design.
所以你有它。 随着可访问性标准的不断提高,重要的是要记住上下文对于良好的UX设计至关重要。
Thanks for reading!
谢谢阅读!
翻译自: https://blog.prototypr.io/youre-not-still-using-read-more-are-you-16466ae326e7
hexo 阅读更多 按钮