【TED演讲稿】互联网的可访问性问题及其解决方法
TED演讲者：Clive Loseby / 克里夫·罗瑟比
演讲标题：The internet's accessibility problem -- and how to fix it / 互联网的可访问性问题及其解决方法
内容概要：The internet provides access to knowledge for billions across the world, but how accessible is it really? Website accessibility advocate Clive Loseby sheds light on why many parts of the web are closed off to those with disabilities -- and lays out some steps to make being online better for everyone.
互联网为全球几十亿人提供了通往知识的桥梁，但是到底有多畅通无阻呢？网页可访问性倡导者克里夫·罗瑟比（Clive Loseby）解释了为什么网上的很多内容都让残障人士无法访问，介绍了让所有人都能上网的几步操作。
*******************************************
【1】Hi, everyone. I'm Clive Loseby and I am passionate about changing the world, one website at a time.
大家好,我叫克里夫.罗瑟比 （Clive Loseby）, 我有志于 用一个个网站改变世界。
【2】As Dale said I was in a bad car crash a long time ago.
如戴尔（Dale）所说,很久以前, 我出了一场严重的车祸。
【3】It left us all with life-changing injuries.
它让我们所有人都 留下了一辈子的损伤。
【4】And that's why accessibility and website accessibility has become my passion.
这也就是为什么无障碍 和网络可访问性 成为了我的追求。
【5】The accident also left me with a very bad memory, so please forgive me if I keep looking at my notes.
车祸也导致了我记性很差, 所以如果我不停地看笔记, 请各位多多包涵。
【6】OK. Does everybody know what a cookie banner is?
大家都知道
【7】Those annoying banners that pop up on a website asking for consent to put cookies into your browser?
这些讨厌的横幅 会从网页上跳出来, 询问你是否允许 向你的浏览器里放置 cookie。
【8】It may say something like, "This website uses cookies to give you the best online experience.
表述大致如下: “本网站会通过 cookie 为您提供最佳的线上体验。
【9】Follow this link to confirm that you consent to this."
点击这个链接, 确认您对此表示同意。”
【10】Does everyone know what I'm talking about?
大家都知道我在说些什么吧？
【11】Good. Right, now I want you to imagine a different kind of browser.
很好。我想请你们想象一款 与众不同的浏览器。
【12】This one says the following: "This website is designed for white people only.
这个浏览器会显示: “这个网站专为白人设计。
【13】Follow this link to confirm that you are white."
点击这个链接, 确认您是个白人。”
【14】Or, "This website is for men only.
或者:“这个网站为男性专用。
【15】Follow this link to confirm that you are a man."
点击这个链接, 确认您是男性。”
【16】Or, "This website is for straight people only.
或者:“这个网站为 异性恋人士专用。
【17】Follow this link to confirm that you are straight."
点击这个链接, 确认您是个异性恋人士。”
【18】Or even, "This website is for people who have hair.
甚至是:“这个网站 为有头发人士专用。
【19】Follow this link to confirm you have hair."
点击这个链接, 确认您有头发。”
【20】These don't happen in the real world, but what I do need to tell you about is another banner that does exist on over 97% of the world's websites.
这些情况不会在现实世界中发生, 但是我有必要告诉你 另一种确实存在的横幅, 它会出现在 全球超过 97% 的网页上。
【21】'"This website is for people who are not disabled.
“这个网站为非残障人士专用。
【22】Follow this link to confirm that you are not disabled."
点击这个链接, 确认您不是残障人士。”
【23】This may not be as apparent as the cookie banner.
它没有 cookie 横幅 那么显眼。
【24】Believe me, this banner exists.
但是请相信我, 这种横幅确实存在。
【25】Ninety-seven point four percent of 1 million website home pages tested last year had detectable accessibility failures.
一百万个网站首页中 有 97.4% 在去年的测试中 出现了检测得到的 可访问性漏洞。
【26】So how many disabled people are there in the world?
那世界上有多少残障人士呢？
【27】In 2010, the World Health Organization estimated that 1 billion people on the planet live with some form of disability, with over 110 million having highly significant difficulties in functioning.
2010 年,世界卫生组织 估算世界上大约有 10 亿人 存在某种形式的残疾, 有超过 1.1 亿人的 身体机能存在严重问题。
【28】We are talking about a lot of people.
我们说的可是很多很多人。
【29】They also would like to use the web as much as you or I do.
他们也会像你我这样上网。
【30】They also want to become your customers and spend money with you, if you make it possible for them to do so.
他们也想成为你的顾客, 让你赚钱, 前提是你得让他们 真的能做到这个动作。
【31】The title of this talk is a direct quote from somebody I met last year.
这个演讲的标题 是我去年见到的一个人说的话。
【32】She works in health, safety, employee well-being and has done for 20 years, so she has a real understanding of inclusivity.
她的工作内容包括医疗、 安全、员工健康, 从业 20 年, 所以她对包容性深有体会。
【33】Lovely, caring person, but she just could not understand how blind people could use the internet because they couldn't see the screen.
她是个可爱、体贴的人, 但是她就是无法理解 视障人士该如何上网, 因为他们看不了屏幕。
【34】I explained to her what a screen reader was and she got it.
我向她介绍了屏幕阅读器, 她就懂了。
【35】A screen reader, by the way, is a piece of software that reads out the content of a website using a computerized voice.
屏幕阅读器就是 一种用计算机语音 朗读网页内容的软件。
【36】If you're blind, you can't use a mouse because you can't see where to put it.
如果你失明了,你就无法使用鼠标, 因为你不知道把鼠标放在什么位置。
【37】So you will use your keyboard instead in conjunction with the screen reader.
所以你会转而使用 键盘加上屏幕阅读器。
【38】It's not that easy to do but cookie banners make life so much worse.
操作起来没那么容易, 但是 cookie 横幅 会让一切雪上加霜。
【39】And in some cases, they actually prevent blind people from accessing the website beyond it.
有些时候,他们真的 会让视障人士 无法进入下一步的网页。
【40】We are in the year 2022.
如今是 2022 年。
【41】The first set of guidelines for websites to help ensure that they met the needs of disabled people were released quite recently, actually, in 1999.
第一套网页规范 要求网页必须满足残障人士需求, 于“近日”公布, 其实是 1999 年。
【42】A mere 23 years ago.
仅仅在 23 年以前。
【43】Yep. I'm not joking.
没错,我没在开玩笑。
【44】All the information has been available to everyone since then.
自此所有的信息都 开放给了每一个人。
【45】It is also a legal requirement in most countries, but above everything else, it helps every business and every organization become more inclusive.
很多国家都将其定为了法定要求, 但是最重要的是, 它让每家公司、每个组织 更具包容性。
【46】And yet, 97% of websites contained detectable accessibility failures last year.
但是,即使在去年, 仍有 97% 的网站 包含检测得到的 可访问性缺陷。
【47】Think of a website as a building, it becomes even more obvious.
把网页想作一栋楼的话 就更明显了。
【48】After all, websites are physical buildings.
说白了, 网页就是实体建筑物。
【49】They're your window on the world, aren't they?
它们就是你 看世界的窗户,不是吗？
【50】Legislation for access to physical buildings has always made allowances for very old buildings where it's simply not possible to make them fully accessible for people with disabilities.
针对实体建筑物的无障碍规定 通常都会对老旧建筑物 网开一面, 因为让老旧建筑物 做到对残障人士的完全无障碍 是不可能的。
【51】We all understand that.
我们都可以理解这点。
【52】So actually, I think it's perfectly fair that you shouldn't expect a website over 23 years old to cater for disabled people either.
所以其实我觉得 你也不能指望一个 存在了超过 23 年的网页 能满足残障人士的需要。
【53】I'm actually not sure the last time I went on a website that was over 23 years old.
我都记不太清楚上一次访问 一个超过 23 年的网页 是个什么情形。
【54】But what about five years old or about three years old?
但是,5 年的网页呢？ 3 年的网页呢？
【55】What about last year? This year?
去年的网页呢？ 今年的网页呢？
【56】Typically, websites get replaced every three to five years as a new one is built to cater for the latest trends.
网页通常每三到五年就会被替换, 人们为了紧跟时代的潮流 会搭建新的网页。
【57】Is it really OK that websites that are recently built are still inaccessible for disabled people?
那最近才搭建的网页 依旧让残障人士难以访问, 这合理吗？
【58】If not now, when?
现在不解决,更待何时？
【59】OK, so what does accessible web design actually mean?
好,那可访问的网页设计 到底是什么意思？
【60】Please take a look at these doors.
请看这几扇门。
【61】They both go into the same building.
它们都通向同一栋楼。
【62】Both sets of doors have level access.
两组门都是水平入口。
【63】The door on the left slides open automatically as you approach it.
左侧的门 会在你靠近的时候自动打开。
【64】The doors on the right have to be pulled open.
右侧的门需要你手动拉开。
【65】I would like to ask you all a question, and if you are able, I would like you to either raise your left hand or your right hand in answer.
我想问你们一个问题, 如果可以的话, 请举起你的左手 或者右手回答这个问题。
【66】Imagine you're in a wheelchair and you want to enter this building.
假设你坐在轮椅上, 想进入这栋楼。
【67】Which of the doors do you think you would be most likely to use?
你更有可能选择哪一种门？
【68】The automatic doors on the left or the heavy doors on the right?
左侧的自动门还是右侧沉重的门？
【69】Could you please raise your left or your right hand accordingly?
请你们举起左手或者右手回答。
【70】Well, I think it's fair to say the consensus is on the left. Interesting.
哇,很显然大家一致 选择了左边的门。有意思。
【71】OK. Now instead of being in a wheelchair, you're using a walking frame, so you can walk, but you need to have both of your hands on the frame.
现在假设你不坐轮椅, 而需使用助行器, 你能走, 但是你的双手都得 放在助行器上。
【72】Which set of doors do you think you would be likely to use now?
这种情况你会选择哪种门？
【73】Could you raise your hands if you're able to?
如果可以的话,请举起你的手。
【74】I'm really surprised. Everyone's going left.
我惊了。大家都选了左边的。
【75】OK. Right.
好的。
【76】Now you're pushing a child in a pushchair so you can walk quite normally, but you've got a pushchair and both of your hands on it.
假设你推着婴儿车,孩子坐在车里, 你能正常地走路, 但是你推着婴儿车, 而且两只手都得放在车上。
【77】Which set of doors now?
选哪种门呢？
【78】Left or right?
左边还是右边？
【79】I'm staggered.
我惊呆了。
【80】OK. Final example.
好。最后一个例子。
【81】Let's assume that you've actually gone in through the doors on the right.
假设你通过右侧的门走进了楼。
【82】You're coming out, you want to come out the building, but you've actually got boxes of files under both arms.
然后你要出来, 你要从楼里出来, 但是你手臂下夹着几箱文件。
【83】Which of the doors would you go then?
那你会选哪种门呢？
【84】Yeah. Hmm.
嗯……
【85】I'm really staggered.
我震惊了。
【86】In pretty much every example pretty much everybody raised your left hand.
几乎每个例子, 几乎每个人 都举起了你们的左手。
【87】Why was this?
为什么呢？
【88】After all, you're free to choose which door to use at each time.
其实你每次选哪种门都行。
【89】Why would so many people go for an automatic door?
那为什么这么多人都要选自动门呢？
【90】Maybe because it's easier.
也许是因为比较容易。
【91】Nobody's forcing you to use it.
没人逼你用它。
【92】It's there as an alternative to the other doors.
它只是作为另一种门的替代品。
【93】Accessible web design is exactly the same, offering people with different needs alternative ways of using a website to get the same information.
可访问的网页设计也是如此, 给予有不同需求的人群 通过网页获取相同信息的不同方式。
【94】Most countries around the world have anti-discrimination laws, and websites fall under these laws.
世界上的大多数国家 都制定了反歧视法, 网站也在这些法律的管辖范围内。
【95】However, for me, it's not about complying with the law.
但是对我来说, 重点不在于遵守法律。
【96】It is about becoming more inclusive, more welcoming to everyone, regardless of their ability or their disability.
而在于更包容, 更欢迎每个人, 无论他们健全与否。
【97】Disabled people have money to spend on your goods and services and if they can't spend it with you, they're going to spend it with somebody else.
残障人士有钱 购买你的商品和服务, 如果他们没法花在你家, 也能花在别家。
【98】So what should you do with regard to your own website?
那么你该如何处理你自己的网页呢？
【99】Well, you need to have two things.
你需要做两件事。
【100】You need to have an audit of your website, and then you need to put an accessibility statement on your website.
你需要对你的网站进行一次审查, 还得把可访问性声明 放在你的网页上。
【101】I'll explain what I mean in this photograph.
我来解释一下 这张照片是什么意思。
【102】This hotel, it's a beautiful building.
这家酒店是一座美丽的建筑。
【103】There's downstairs seating. There's upstairs seating.
楼下有座,楼上也有座。
【104】There's beautiful staircases everywhere, but unfortunately, there isn't a lift.
到处都是漂亮的楼梯, 但是不巧的是没有电梯。
【105】The restaurant itself is run by an outside catering company.
餐厅由外包餐饮公司运营。
【106】It's not their fault there's no lift.
没有电梯不是餐饮公司的问题。
【107】It's not their building, they're just renting the space.
也不是建筑的问题, 因为地产商只是在出租这个空间。
【108】However, if you're in a wheelchair, you can't use the upstairs seating.
然而,如果你坐着轮椅, 你就无法坐楼上的坐席。
【109】But if there was a sign near the entrance saying something like, "Patrons in wheelchairs, please note that although we've got upstairs seating, we do not have a lift.
但是如果入口附近有这么一个告示: “使用轮椅的顾客,请留意 虽然我们有楼上雅座, 但我们没有配备电梯。
【110】However, we do have some reserved seating for you with extra turning space and raised tables."
但是,我们为您预留了 有额外转向空间和 加高餐桌的坐席。”
【111】Think about raised tables.
想象一下加高餐桌。
【112】If you're in a wheelchair and you try to go into a restaurant anywhere, you can't quite get under the table.
如果你坐着轮椅 进入任何一家餐馆, 餐桌底下的空间一般 都放不下一把轮椅。
【113】Easily fixed, just put them on some small wooden blocks.
解决方法很简单,只要在 桌子底下垫几个小木块就行了。
【114】Anyway, if you just put up that sign, somebody in a wheelchair who reads that sign, are they going to feel more or less included?
如果你贴上这张告示, 坐着轮椅的人看到了告示, 他们是不是或多或少 会感到被人接纳了呢？
【115】The cost of doing this is almost nothing, but the effect is huge.
这么做的成本几乎为零, 但是效果显着。
【116】It's not the catering companies fault there's no lift.
没有电梯不是餐饮公司的错。
【117】They've just gone out of their way to offer an alternative despite the limitations of the hotel.
他们只是特意提供了一个选项, 就算酒店本身有一些限制。
【118】In other words, the catering company themselves have become more welcoming, inclusive and accessible.
换句话说,餐饮公司自身变得 更加热情友好、兼容并包, 也让人更容易到访。
【119】So the first part of this story where I explained the restaurant has upstairs seating, but no lift.
我在故事的第一部分 描述了一个有上层坐席 但没有电梯的餐厅。
【120】That could be seen as an audit.
审查可能会记录以下内容。
【121】'"We realize there's no lift to the upstairs seating so disabled people in wheelchairs cannot use it."
“我们发现并没有 通往楼上坐席的电梯, 所以乘坐轮椅的残障人士 无法使用楼上坐席。”
【122】But the sign at the entrance telling everyone that there is accessible seating downstairs as an alternative is like their accessibility statement.
但是入口的告示告诉大家 楼下设置了无障碍坐席 供顾客选择, 这张告示就类似于 一份无障碍声明。
【123】'"We've discovered that wheelchair users cannot use the upstairs seating.
“我们发现轮椅人士 无法使用楼上坐席。
【124】This is what we've done instead."
于是我们采取了这些措施。”
【125】So how does all this apply to a website?
这又该如何应用到网页上呢？
【126】Well, as far as the audit goes, you can either pay somebody or you can do it yourself.
如果要做审查, 你可以花钱请别人做 也可以自己做。
【127】And the same goes for an accessibility statement.
无障碍声明也是如此。
【128】Sadly, I don't have time to go into the details but I do want to say one thing.
虽然我没时间展开详细讲一讲, 但是我想说一点。
【129】Make your accessibility statement real.
你的无障碍声明得是真的。
【130】What do I mean by this? Simple.
什么意思？很简单。
【131】I see website after website with an accessibility statement that begins with a slightly pompous tone, and it says something like, "We fully care about people with disabilities.
我看到过无数个网站 有这样的无障碍声明, 开头口吻略带浮夸, 写着如下内容: “我们深切关心残障人士。
【132】We want to ensure that everyone is able to fully utilize our website.
我们希望每个人都能 充分利用我们的网站。
【133】It meets the following standards, blah, blah, blah."
网站遵守以下规范云云。”
【134】I don't actually really care what you say.
我对你说的根本没有任何兴趣。
【135】If somebody can't use your website, they can't use your website.
如果有人没法使用你的网站, 他们就是无法使用你的网站。
【136】I've got an idea.
我有个主意。
【137】Why not instead use this as a wonderful opportunity to reach out to disabled people?
我们何不利用这个好机会 向残障人士抛出橄榄枝呢？
【138】The first line of your accessibility statement could be something like, "We're aware that there's some problems with our website that might make the experience more difficult for visitors with disabilities.
你的无障碍声明 第一行可以这么写: “我们知道本网站存在一些问题, 可能会对残障访客的体验造成影响。
【139】But if there's anything that we can do to help you, give us a call."
但是,如果有任何我们可以 为您提供帮助的地方,请联系我们。”
【140】There's the phone number right there.
然后写上电话号码。
【141】'"Follow this link to send an email." There's the link right there.
“点击这个链接,电邮联系我们。” 放上一个链接。
【142】'"Or fill in the contact form."
“或填写联络表。”
【143】Right there you're reaching out to them.
你可以借此 主动向他们伸出援手。
【144】Just by doing that, you're being inclusive.
你只需要这么做就能更包容。
【145】You're going the extra mile and it speaks volumes about your ethos as a company.
你付出了更多的努力, 也能彰显你公司的美德。
【146】By the way, if you do have accessibility issues with your website, you should give a time frame in which you're going to get them fixed or at least explain that it's not possible on grounds of cost.
顺带一提,如果你的网站 确实有可访问性问题, 你就该设定一个期限, 什么时候可以解决这个问题, 或者至少得出一个结论 说明由于成本无法解决这个问题。
【147】It isn't about being perfect. It's about being honest.
我没有让你做到完美, 而是做到诚实。
【148】OK, I'd like to finish by telling you all about a very simple test that you can do on any website to find out if it has a basic level of accessibility.
作为结尾,我想向你们介绍 一个非常简单的测试, 适用于各种网站, 检测它是否达到了 基本的可访问性。
【149】Anyone can do it.
每个人都能试一试。
【150】And I call it the Tab Test.
我称之为“Tab 键测试”。
【151】If you're on a website,there will usually be a row of page navigation buttons along the top.
打开一个网页, 页面顶部通常会有
【152】As you move your mouse over them, they will light up in turn and any subpages will appear as a kind of drop-down.
如果鼠标扫过这一排导航键, 它们就会依次亮起, 子页面会出现在下拉菜单中。
【153】And they may also light up as you move the mouse over.
如果鼠标扫过这些键, 它们也会亮起来。
【154】In other words, just by moving your mouse, you can go to pretty much any page on the website with a single click.
也就是说, 你只需要动动你的鼠标, 就能单击去向网站里的任何网页。
【155】Do we all understand that?
大家都懂这个意思吗？
【156】Brilliant.
很好。
【157】If you're blind, as I've said, you can't use a mouse.
如果如我所说,你是一个 失明人士,无法使用鼠标,
【158】Instead, you use a screen reader and a keyboard.
而是使用屏幕阅读器和键盘。
【159】If a website has a basic level of accessibility, you should be able to select every page and subpage by repeatedly pressing the Tab key.
如果这个网站达到了 基本的可访问性, 你就该具备选择 任何页面和子页面的能力, 只要你不停地按 Tab 键就行。
【160】Not only that, each one should light up in turn, just as if you were using a mouse.
不仅是能够选择, 每个按钮也该逐个亮起, 就和使用鼠标一样。
【161】Not everyone who is visually impaired is completely blind.
不是每个视障人士都是 完全失明的。
【162】In fact, most of them have some form of limited vision instead.
其实很多视障人士都只是 有某种形式的视觉限制而已。
【163】So having page navigation light up as you move, as you Tab through them, helps them know where they are.
所以使用 Tab 键移动选项时 页面导航亮起, 可以让他们知道 选中了哪个位置。
【164】So next time anybody here is on a website, just start pressing the Tab key.
大家下次上网的时候, 试试按下 Tab 键吧。
【165】If you do not see all the pages and all the subpages light up in turn, it's failed the test.
如果你没看到每个页面 和子页面依次亮起, 那就是测试不合格。
【166】Please drop them an email informing them that because their website does not meet that basic level of accessibility, it's failed this test and they really need to do something about it.
请给他们发一个邮件, 告诉他们这个情况,因为他们的网站 没有达到基本的可访问性, 没有通过测试, 他们真的该处理一下。
【167】They want to know more, they can do a quick internet search and actually it's fairly easy to fix.
他们想了解更多的信息的话, 只要动手上网搜一搜, 其实解决起来真的很简单。
【168】If you guys joined with me in doing this one simple thing, we all will truly be changing the world, one website at a time.
如果各位可以加入我 就做这么一件小事, 我们真的可以通过一个个网站 改变世界。
【169】Thank you very much.
谢谢。
