天富开户1970_5 ways content can improve your websites’ accessibility — and overall UX

Accessibility is too often treated as a “nice to have.”

But the reality is that there are tons of relatively simple things you can do to make your websites more accessible. And they’ll not only make your websites more accessible to the disabled, but also significantly improve your user experiences for everyone.

But first, let’s be clear about our terms:

What’s accessibility?

Here’s accessibility expert Jennison Asuncion’s definition of accessibility:

Accessibility refers to designing and developing user interfaces that everyone, including people with disabilities, can independently consume and interact with.

Note that the stress here doesn’t fall specifically on “people with disabilities,” but everyone. That makes accessibility a natural concern for all of us involved in user experience design, regardless of discipline.

Now, on to the tips!

1. Use unique, meaningful button and link names

Pretty easy to tell where that link will take me.

I can’t tell you many times I’ve had a mockup or prototype hit my inbox (or Slack) with 16 “learn more,” “read this,” or “see more” links scattered across it — and groaned.

Why? Because it’s horrible for users of screen readers, which typically allow people to skip from link to link on a page, ignoring the content in-between. It’s a highly efficient mode of navigation that helps screen-reader users quickly get where they want to go.

But how easy do you think it is for a blind or low-vision user to figure out which of those “learn more” links leads to the “more” they want to learn about?

And it’s actually not that different for sighted users. Think of all the times you’ve fired up a website knowing exactly what you’re looking for, but not quite sure where to find it. Do you read through all the content? Or do you simply hunt around for the right link?

You might scan through the headings and subheads first — after all, they’re bold and eye-catching — but you still have to live with the cognitive load of connecting those headings to the links below. But links tend to be pretty visually loud too, so wouldn’t it be even easier if every link told you exactly where it would take you without demanding I read all the other copy?

Writing accessible links and button copy

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Don’t

  • Use generic link or button text like “learn more,” “read this,” or “see more”
  • Embed links in even more generic terms like “this,” “this page,” or “here”
  • Link to “naked” URLs (i.e., www.thewebahead.net) unless there’s context that clarifies why that link is there

For more, check out the WebAIM article on links.

2. Add clear, useful alt tags to images

Alt tags also play a key role for screen-reader users on the web. Without these invisible bits of copy, there’s literally no way for low-vision and blind users to understand the content of images, data visualizations, and infographics. With alt tags, we can ensure that no one has to miss the information conveyed in our pie charts, hero photos, and infographics.

Back in the bad old days of black-hat SEO madness, alt tags were abused as just another method of stuffing a page with keywords. Which was horrible for users of screen readers. Just imagine reading through a blog article and hearing:

“CSS layouts let us CSS HTML tables table-based layouts tables web web design code markup floats inline inline-block block W3C web consortium…”

All in a screen reader’s eerily robotic tones.

Because of that abuse, search engines quickly moved to punish such “keyword-stuffers,” freeing alt tags up to do what they were always intended to do: provide useful information.

As with links, the key here is to make your alt tags clear, descriptive, and natural-sounding.

Simple enough to alt tag appropriately.

With many photos, this is a simple matter of succinctly describing the content of the image: “Closeup of blueberries.”

If your image contains text — and seriously, don’t do that — include the text verbatim in the alt tag.

For this image, your alt tag should include the text verbatim. (Which I created after seeing Tobias Van Schneider’s talk, “Side Projects Are Stupid.”)

If your image contains useful data, such as a bar graph illustrating mobile usage patterns, make sure the alt tag contains the same data: “95% percent of smartphone users view the same website on multiple devices.”

And I can’t pass up this opportunity to briefly rail against infographics: these massive images full of copy are horrible for accessibility, not to mention SEO.

Making graphical content accessible

Do

  1. Write image alt tags that succinctly describe the content of the image
  2. Use keywords/keyphrases that are relevant to your content, but only if they’re actually helpful in describing the image, and stick to one keyword/phrase
  3. Include the key insight of any data visualizations (such as bar graphs, pie charts, etc.)
  4. Build infographics with real HTML text, or a text-based alternate (i.e., a long-form post explaining the data)

Don’t

  1. Keyword-stuff your alt tags
  2. Publish infographics without a text-based alternate

Free ebook: The modern web design process

Discover the processes and tools behind high-performing websites.

Start reading
Subscribe to be a Webflow Insider Thank you! You are now subscribed! Oops! Something went wrong while subscribing.

3. Write clear and actionable error messages

What are these “megapixels” you speak of!?

There’s a lot to keep in mind when you’re building accessible forms. (As you’ll see in this article on building accessible forms.) But a key element for any content strategist—and your users—is error messaging.

As WebAIM notes, error messages:

Should clearly describe the errors that are present and, optimally,
include cues or instructions for resolving them. For example, ‘Course number is not formatted correctly’ is not as helpful as ‘Course number must be a 3 digit number’.

When writing error messages, don’t just describe the problem, but focus on how to fix it. In most cases, you don’t even need to belabor the point that there was an error: just focus on the fix, and do it clearly and succinctly.

All your users, sighted and otherwise, will appreciate the clear guidance on what to do next.

Writing accessible error messages

Do

  1. Indicate that there was a problem (implicitly or explicitly, though implicitly is generally more efficient—see below for more on that)
  2. Explain how to fix it

Don’t

  1. State that there was an error without explaining how to fix it
  2. Refer to an entry as “valid” or “invalid” — this may seem perfectly acceptable in the abstract, since you’re simply stating that an entry doesn’t fit the requirements you’ve defined for a field. But in the concrete, you’re calling someone’s name or gender invalid. And that’s just … well, do I have to explain?

‍However you write error messages, for the love of humanity, don’t do it this way.

Implicit vs. explicit error messaging

As I mentioned above, all error messages should do two things:

  1. State that there was an error
  2. Explain how to fix it

But you can easily achieve both goals in one message by implying that there was an error. For example, we could state an error message in the following ways:

  1. Explicitly, without direction: Course number formatting is incorrect.
  2. Explicitly, with direction:Course number formatting is incorrect. Please enter a 3-digit number.
  3. Implicitly: Please enter a 3-digit course number.

Option 1 explicitly states that there’s an error, but doesn’t make clear how to fix it. Option 2 is also explicit, but adds a way to fix the problem, so it’s an improvement. Best of all is 3, which implies that there was a problem by explaining how to fix it.

4. Write clear, descriptive headings

Just as a screen reader allows people to skip from link to link, they can also skip between headings, ignoring the copy between.

Now, imagine that experience with the majority of websites out there. Do you think you could clearly infer the topic of every section of a given web page without referencing the body copy or links?

Square’s homepage, stripped down to headlines.

Personally, my answer’s “sometimes?” To quickly run through the Square page above:

  • “Start selling today” — super clear. I get that this is where I’d get started if I wanted to.
  • “Start, run, and grow with Square” — clear … ish. Clarifying the object — your business — would’ve helped a lot here. Without context, it’s not obvious what you’re starting, running, or growing.
  • “Accept every way your customers want to pay” — Clear … at least until I get to “Stand.” What the hell’s that?

Write clearer headlines and subheadings

As an exercise, I’d suggest turning off all your non-headline copy layers (if you’re using a desktop app like Sketch or Photoshop) or briefly turn your <p> tags to your page background color (if you’re using Webflow).

Now read through all your H tags, asking yourself with each: am I being clear enough with this headline alone?

If your answer’s no, it might be time for a rewrite.

Sometimes, you have to embrace length

Note that aiming for clarity in headlines often means using more words. I realize that might run counter to your impulse to create “clean” websites, but it’s worth asking yourself:

Is it more important that this site look clean, or that it give people all the info they need?

5. Optimize your form content

From Andrew Coyle’s excellent article, “Design Better Forms.”

Forms may not be sexy, but they are the heart of product design, and the right content can make them vastly more usable — and accessible — for everyone. Here’s a few ways to do that:

Do

  • Indicate which fields are optional in the form label (so screen readers will transmit that information in-line). I know we’re more used to marking required fields, but you should really only be using required fields, so there will typically be fewer optional fields to mark, and hence less clutter.
  • Make button copy specific to the action taken (don’t use “submit” — unless that’s actually what a person is doing, which is often the case with literary magazines and blogs that take external contributions).
  • Display basic helpful content. E.g., if a password has to be 9 characters long, use an uppercase letter, and a special character, tell people that! And don’t hide it in a tooltip.
  • Group related information. You’ve seen the standards: email and password, physical address, credit card info, etc. If it all comes together to form a greater concept, group it.

Don’t

  • Use in-field / placeholder labels, unless they translate into a persistent label on click (rather than disappearing), a common technique on Google sites.

A more accessible web is a better web for all

Making your website more accessible to the disabled has a fringe benefit: It can actually improve everyone’s experience of your websites.

After all, a screen reader skipping from heading to heading, or link to link, behaves a lot like we all do the on the web: not consuming everything, but scanning for the specific info we need.

If you’d like to learn more about accessibility, look for an accessibility meetup group in your area, check out The Accessibility Project, and follow Jennison on Twitter.

天富平台怎么注册_网页设计公司团队的默契

网页设计看似简单,但尚有其中的一些网站设计标准及精神在其中,为提高效率及设计的准确度,当我们的专案经理了解您的定位及需求后,将会与我们的团队-网页视...

天富2注册_网页设计技巧-布局篇

关于网页设计布局也许是大家最不放在眼里的地方,其地位如同文字的排版一样,随便可布,布即随便。其实文字排版是一种不起眼但却非常重要的细节。做好了会让...

天富代理工资_如何清掉网页上的cookie和快取?

网页在制作过程中,常常需要与客户确认页面,由于修改的过程中会常常更新档案,所以过去旧有的资料要清除,才能正确看到新的页面。 我们需要清除cookie和快取...

天富娱乐怎么注册_网红及企业品牌,六个不该在社群平台分享的内容

 ,社群经营者常会思考,在社群网站上到底要怎么做才会被分享,却忽略了有些事情,不适合分享。以下整理了六个不应该分享的项目。, ,无论是个人还是...

天富娱乐用户注册_2019年开始全球人们使用手机的时间将超过电视

 ,最近预测机构 Zenith 公布了一项数据 ,他们认为从明年开始人们每天花在网路上的时间,将比看电视的时间更多。,根据他们的预测,明年人们将平均每天有...

天富代理_Google & Bing 停止公开提交网址索引服务

最新更新时间: 七月 26th, 2018, ,Google 在7/25星期三宣布,他们正在停止公开提交网址索引的服务,过去你可以透过提交网址页面在未登入Google以及未验...