TED演講者：Clive Loseby / 克里夫·羅瑟比

演講標題：The internet's accessibility problem -- and how to fix it / 互聯(lián)網(wǎng)的可訪問性問題及其解決方法

內(nèi)容概要：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.

互聯(lián)網(wǎng)為全球幾十億人提供了通往知識的橋梁，但是到底有多暢通無阻呢？網(wǎng)頁可訪問性倡導者克里夫·羅瑟比（Clive Loseby）解釋了為什么網(wǎng)上的很多內(nèi)容都讓殘障人士無法訪問，介紹了讓所有人都能上網(wǎng)的幾步操作。

*******************************************

【1】Hi, everyone. I'm Clive Loseby and I am passionate about changing the world, one website at a time.

大家好,我叫克里夫.羅瑟比 （Clive Loseby）, 我有志于 用一個個網(wǎng)站改變世界。

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

這也就是為什么無障礙 和網(wǎng)絡(luò)可訪問性 成為了我的追求。

【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?

這些討厭的橫幅 會從網(wǎng)頁上跳出來, 詢問你是否允許 向你的瀏覽器里放置 cookie。

【8】It may say something like, "This website uses cookies to give you the best online experience.

表述大致如下: “本網(wǎng)站會通過 cookie 為您提供最佳的線上體驗。

【9】Follow this link to confirm that you consent to this."

點擊這個鏈接, 確認您對此表示同意?！?/p>

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

這個瀏覽器會顯示: “這個網(wǎng)站專為白人設(shè)計。

【13】Follow this link to confirm that you are white."

點擊這個鏈接, 確認您是個白人?！?/p>

【14】Or, "This website is for men only.

或者:“這個網(wǎng)站為男性專用。

【15】Follow this link to confirm that you are a man."

點擊這個鏈接, 確認您是男性?！?/p>

【16】Or, "This website is for straight people only.

或者:“這個網(wǎng)站為 異性戀人士專用。

【17】Follow this link to confirm that you are straight."

點擊這個鏈接, 確認您是個異性戀人士。”

【18】Or even, "This website is for people who have hair.

甚至是:“這個網(wǎng)站 為有頭發(fā)人士專用。

【19】Follow this link to confirm you have hair."

點擊這個鏈接, 確認您有頭發(fā)?！?/p>

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

這些情況不會在現(xiàn)實世界中發(fā)生, 但是我有必要告訴你 另一種確實存在的橫幅, 它會出現(xiàn)在 全球超過 97% 的網(wǎng)頁上。

【21】'"This website is for people who are not disabled.

“這個網(wǎng)站為非殘障人士專用。

【22】Follow this link to confirm that you are not disabled."

點擊這個鏈接, 確認您不是殘障人士?！?/p>

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

一百萬個網(wǎng)站首頁中 有 97.4% 在去年的測試中 出現(xiàn)了檢測得到的 可訪問性漏洞。

【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 年,世界衛(wèi)生組織 估算世界上大約有 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.

他們也會像你我這樣上網(wǎng)。

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

她的工作內(nèi)容包括醫(yī)療、 安全、員工健康, 從業(yè) 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.

她是個可愛、體貼的人, 但是她就是無法理解 視障人士該如何上網(wǎng), 因為他們看不了屏幕。

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

屏幕閱讀器就是 一種用計算機語音 朗讀網(wǎng)頁內(nèi)容的軟件。

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

所以你會轉(zhuǎn)而使用 鍵盤加上屏幕閱讀器。

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

有些時候,他們真的 會讓視障人士 無法進入下一步的網(wǎng)頁。

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

第一套網(wǎng)頁規(guī)范 要求網(wǎng)頁必須滿足殘障人士需求, 于“近日”公布, 其實是 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% 的網(wǎng)站 包含檢測得到的 可訪問性缺陷。

【47】Think of a website as a building, it becomes even more obvious.

把網(wǎng)頁想作一棟樓的話 就更明顯了。

【48】After all, websites are physical buildings.

說白了, 網(wǎng)頁就是實體建筑物。

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

針對實體建筑物的無障礙規(guī)定 通常都會對老舊建筑物 網(wǎng)開一面, 因為讓老舊建筑物 做到對殘障人士的完全無障礙 是不可能的。

【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 年的網(wǎng)頁 能滿足殘障人士的需要。

【53】I'm actually not sure the last time I went on a website that was over 23 years old.

我都記不太清楚上一次訪問 一個超過 23 年的網(wǎng)頁 是個什么情形。

【54】But what about five years old or about three years old?

但是,5 年的網(wǎng)頁呢？ 3 年的網(wǎng)頁呢？

【55】What about last year? This year?

去年的網(wǎng)頁呢？ 今年的網(wǎng)頁呢？

【56】Typically, websites get replaced every three to five years as a new one is built to cater for the latest trends.

網(wǎng)頁通常每三到五年就會被替換, 人們?yōu)榱司o跟時代的潮流 會搭建新的網(wǎng)頁。

【57】Is it really OK that websites that are recently built are still inaccessible for disabled people?

那最近才搭建的網(wǎng)頁 依舊讓殘障人士難以訪問, 這合理嗎？

【58】If not now, when?

現(xiàn)在不解決,更待何時？

【59】OK, so what does accessible web design actually mean?

好,那可訪問的網(wǎng)頁設(shè)計 到底是什么意思？

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

左側(cè)的門 會在你靠近的時候自動打開。

【64】The doors on the right have to be pulled open.

右側(cè)的門需要你手動拉開。

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

假設(shè)你坐在輪椅上, 想進入這棟樓。

【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?

左側(cè)的自動門還是右側(cè)沉重的門？

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

現(xiàn)在假設(shè)你不坐輪椅, 而需使用助行器, 你能走, 但是你的雙手都得 放在助行器上。

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

假設(shè)你推著嬰兒車,孩子坐在車里, 你能正常地走路, 但是你推著嬰兒車, 而且兩只手都得放在車上。

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

假設(shè)你通過右側(cè)的門走進了樓。

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

可訪問的網(wǎng)頁設(shè)計也是如此, 給予有不同需求的人群 通過網(wǎng)頁獲取相同信息的不同方式。

【94】Most countries around the world have anti-discrimination laws, and websites fall under these laws.

世界上的大多數(shù)國家 都制定了反歧視法, 網(wǎng)站也在這些法律的管轄范圍內(nèi)。

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

殘障人士有錢 購買你的商品和服務(wù), 如果他們沒法花在你家, 也能花在別家。

【98】So what should you do with regard to your own website?

那么你該如何處理你自己的網(wǎng)頁呢？

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

你需要對你的網(wǎng)站進行一次審查, 還得把可訪問性聲明 放在你的網(wǎng)頁上。

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

也不是建筑的問題, 因為地產(chǎn)商只是在出租這個空間。

【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."

但是,我們?yōu)槟A(yù)留了 有額外轉(zhuǎn)向空間和 加高餐桌的坐席?！?/p>

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

審查可能會記錄以下內(nèi)容。

【121】'"We realize there's no lift to the upstairs seating so disabled people in wheelchairs cannot use it."

“我們發(fā)現(xiàn)并沒有 通往樓上坐席的電梯, 所以乘坐輪椅的殘障人士 無法使用樓上坐席。”

【122】But the sign at the entrance telling everyone that there is accessible seating downstairs as an alternative is like their accessibility statement.

但是入口的告示告訴大家 樓下設(shè)置了無障礙坐席 供顧客選擇, 這張告示就類似于 一份無障礙聲明。

【123】'"We've discovered that wheelchair users cannot use the upstairs seating.

“我們發(fā)現(xiàn)輪椅人士 無法使用樓上坐席。

【124】This is what we've done instead."

于是我們采取了這些措施?！?/p>

【125】So how does all this apply to a website?

這又該如何應(yīng)用到網(wǎng)頁上呢？

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

我看到過無數(shù)個網(wǎng)站 有這樣的無障礙聲明, 開頭口吻略帶浮夸, 寫著如下內(nèi)容: “我們深切關(guān)心殘障人士。

【132】We want to ensure that everyone is able to fully utilize our website.

我們希望每個人都能 充分利用我們的網(wǎng)站。

【133】It meets the following standards, blah, blah, blah."

網(wǎng)站遵守以下規(guī)范云云?！?/p>

【134】I don't actually really care what you say.

我對你說的根本沒有任何興趣。

【135】If somebody can't use your website, they can't use your website.

如果有人沒法使用你的網(wǎng)站, 他們就是無法使用你的網(wǎng)站。

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

你的無障礙聲明 第一行可以這么寫: “我們知道本網(wǎng)站存在一些問題, 可能會對殘障訪客的體驗造成影響。

【139】But if there's anything that we can do to help you, give us a call."

但是,如果有任何我們可以 為您提供幫助的地方,請聯(lián)系我們?！?/p>

【140】There's the phone number right there.

然后寫上電話號碼。

【141】'"Follow this link to send an email." There's the link right there.

“點擊這個鏈接,電郵聯(lián)系我們?！?放上一個鏈接。

【142】'"Or fill in the contact form."

“或填寫聯(lián)絡(luò)表?！?/p>

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

順帶一提,如果你的網(wǎng)站 確實有可訪問性問題, 你就該設(shè)定一個期限, 什么時候可以解決這個問題, 或者至少得出一個結(jié)論 說明由于成本無法解決這個問題。

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

作為結(jié)尾,我想向你們介紹 一個非常簡單的測試, 適用于各種網(wǎng)站, 檢測它是否達到了 基本的可訪問性。

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

打開一個網(wǎng)頁, 頁面頂部通常會有

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

如果鼠標掃過這一排導航鍵, 它們就會依次亮起, 子頁面會出現(xiàn)在下拉菜單中。

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

也就是說, 你只需要動動你的鼠標, 就能單擊去向網(wǎng)站里的任何網(wǎng)頁。

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

如果這個網(wǎng)站達到了 基本的可訪問性, 你就該具備選擇 任何頁面和子頁面的能力, 只要你不停地按 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.

大家下次上網(wǎng)的時候, 試試按下 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.

請給他們發(fā)一個郵件, 告訴他們這個情況,因為他們的網(wǎng)站 沒有達到基本的可訪問性, 沒有通過測試, 他們真的該處理一下。

【167】They want to know more, they can do a quick internet search and actually it's fairly easy to fix.

他們想了解更多的信息的話, 只要動手上網(wǎng)搜一搜, 其實解決起來真的很簡單。

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

如果各位可以加入我 就做這么一件小事, 我們真的可以通過一個個網(wǎng)站 改變世界。

【169】Thank you very much.

謝謝。