Web Accessibility(WCAG)チェックリスト:すべての人のためにWebサイトを機能させる。

あなたのウェブサイトは「ドアを閉めた」のですか、何百万人もの顧客を入れていますか?誰もが知る必要があるチェックリストWebアクセシビリティ(WCAG)を開きます。
想像してみてください...あなたは膨大なマーケティング予算を持っています。ウェブサイトを大いに撮影します。しかし、あなたの製品を「購入したい」人々のグループがありますが、彼はお金を持っていないからではなく、あなたのウェブサイトが彼のために「使用した」ためにはできません...
そのグループのグループは、スクリーンリーダーを使用して視覚的に障害がある場合がありますが、あなたのウェブサイトには説明がありません。または、手が震え始めた高齢者である可能性があります。小さなボタンをクリックしたり、一時的な腕を持っている人でさえマウスを簡単に使用できません。
この問題は小さな問題ではありません。そして、誰もが平等について語っている時代にはもはや遠い問題ではありません。誰もがアクセスできるウェブサイトを持つことは、「やるべきこと」だけでなく、巨大なビジネスチャンスを解き放つために「必要な基準」です。将来発生する可能性のある法的リスクを防ぐ
プロンプト:比較した画面画像。片側は、顧客が簡単に笑っている写真です。反対側は、目の欠陥がある顧客の写真です。 (横に白いスタッフの象徴があるかもしれません)。同じウェブサイトを使用しようとしている間、私は失望しています。しかし、彼のコンピューター画面は、歪みがアクセスの障害を伝えることを示しています
なぜ美しいウェブサイトが顧客をブロックする「壁」になっているのですか?
この問題は、多くの企業が見落としている「盲点」から生じます。私たちは、各人の「良い経験」が同じではないことを忘れるまで、ほとんどの人の目に「美しい」ウェブのデザインに夢中になる傾向があります。主な理由は次のとおりです。
- 「構造」ではなく「画像」に焦点を当てる:デザイナーとマーケティング担当者は、レイアウト、色、アニメーションの美しさに焦点を当てる傾向がありますが、スクリーンリーダーなどのテクノロジー(支援技術)を支援する鍵である正しいHTML構造を無視して、Web上の「理解」や「コミュニケーション」があります。
- 問題と誤解:多くの人々は、Webアクセシビリティは「小規模な障害者」のみの問題であると考えていますが、実際には多くの人々に関連しています。高齢者、一時的な障害のある人(腕が壊れているなど)、または限られた状況の人(小さな対照的な色では見られない太陽の下でウェブを使用するなど)の両方。 2022年のデータから、タイには障害のある約419万人、つまり総人口の約6%がいます。これはあなたが見落とすことができない市場です。
- 「複雑で高価」というテクニックだと思います。 「標準」または「wcag」という言葉が怖くて技術用語に満ちているかもしれません。ビジネスオーナーは、それが遠い問題であり、実際にアクセシビリティを開始しても高く投資しなければならないと感じさせます。
プロンプト:シンプルなインフォグラフィック画像には、ギアが内部にギアが付いた脳画像が表示されますが、目の形のアイコン、耳、手が出てくるギアがあり、「ビジュアルのみに焦点を当てている」、「意識の欠如」、「複雑に思えます」という短いメッセージがあります。
残してください...あなたが思っているよりも危険です!あなたのウェブサイトがすべての人を「歓迎しない」ときの影響
Webアクセシビリティの紹介ビジネスチャンスを欠いているだけでなく、多くの側面におけるブランドのリスクです。
- 収入と顧客の損失:これが最も明確な効果です。あなたは、購買力を持つ大規模な顧客グループで販売する機会を閉じています。障害者や、すべてのグループを気にするブランドをサポートすることを選択した家族や友人に直接行くかどうか
- 法的リスク:世界中の多くの国では、障害者向けのウェブサイトを作成していない多くの民間企業があります。タイ自体が、 2007年の障害者の生活の質の促進と発展と、情報とサービスにアクセスする権利を促進する関連する大臣規制の促進のために行動します。民間部門の現在の100%は政府機関ほど強烈ではないかもしれませんが、これは遠くに見えるビジネスを準備しなければならない世界の傾向です。
- Break the Brandの信頼性(ブランドトラスト):消費者がブランドを「価値」からサポートすることを選択した時代に、ブランドは、ネガティブで破壊されたイメージを作成できる人々のグループが、作曲がウェブサイトに信頼を生み出すことを思いとどまらせます。あなたが作成しようとすること
- SEOへの影響: Googleはユーザーエクスペリエンス(UX)にとって非常に重要です。ハードアクセスウェブサイトには、多くの場合、高い跳ね返り率、低いページがあり、これはSEOにとって悪い信号です。さらに、正しい見出しタグ、ALTテキスト、クリア構造の使用など、アクセシビリティの多くの要素も、ランキングとコアWebバイタル。
プロンプト: 4枚のカードの形で4つの効果を示しています。最初のカードにはお金の写真が去り、2番目の葉はハンマー、3番目の葉は壊れたブランドのロゴ、4番目の葉はリスクを伝えるための赤いトーンを持つSEOグラフです。
問題を解決するために聖書を開く:WCAGの4つの原則から始める
心配しないで。 Webアクセスを作成することは、あなたが思うほど難しくありません。、Webコンテンツアクセシビリティガイドライン(WCAG)という名前の国際標準にあります。これは、「注ぎ」を覚えやすい4つの主要な原則に分けられています。各アイテムとは何か、すぐにどのチェックリストを開始しますか?
1。知覚可能(知覚) - ユーザーがさまざまな感覚を通してコンテンツを認識できるように
- []すべての画像には説明(altテキスト)が必要です:その絵が何であるかを説明するために書き込みます。視覚障害者のためにスクリーンリーダープログラムを読むことができるように
- には、聴覚障害者のキャプションや、盲人のオーディオ説明、トランスクリプトなど、他のオプションが必要です
- []適切に矛盾しなければならない色:テキストと背景は十分なコントラスト比(通常のテキストでは少なくとも4.5:1)を持っている必要があります。
- []色のみで通信しないでください。下に赤にリンクを作成するなど、色覚異常を引き起こす可能性があります。リンクかどうかわからない
2。OPERBLE(利用可能) - ユーザーはさまざまなWebコンポーネントを制御および使用できます。
- []すべての機能はキーボードを介して使用する必要があります。マウスを使用できないユーザーは、タブを押してリンク、ボタン、さまざまな形式にスライドできる必要があります。
- []「キーボードトラップ」なし:ユーザーは、キーボードを使用して、ポップアップに閉じ込められていないウェブサイトのさまざまな部分から「出て」に移動する必要があります。
- []十分なユーザーの時間を与える:自動セッションがある場合は、ユーザーがタイムリーにリクエストするオプションがあるはずです。
- []重度の点滅コンテンツを避ける:点滅する光(1秒あたり3回以上)は、一部の人々の発作を刺激する可能性があります。
3。不安定な(理解しやすい) - コンテンツと使用量を作ることはそれほど複雑ではありません。
- []明確でシンプルな言語を使用する:説明なしで技術的な語彙や業界の語彙は避けてください。
- []ナビゲーションとナビゲーションを予測する必要があります。メニューとレイアウトを設計して、ユーザーが学習して簡単に使用できるように、すべてのページで一貫性を持つようにします。
- []明確なエラーがあります。ユーザーがフォームに入力した場合、「どこが間違っているのか」と「エラー」と言うだけでなく「修正する方法」という明確なメッセージが必要でなければなりません。
4。堅牢性(耐久性) - さまざまなテクノロジーの安定性でWebが動作できるように
- []標準のHTMLコードの使用:クリーンで正しいコード構造(タグの使用など
、、、、
、、、、責任を負うこと)は、プログラムが最高の仕事を読むのに役立つのに役立ちます
- []読み取りに役立つプログラムのステータスと変更を伝えます。たとえば、製品をバスケットに追加すると、読み取りと発表を支援するプログラムに警告するコードがあるはずです。
詳細情報でもっと勉強したい場合、 W3C Web Accessibility Initiative(WAI)A11yプロジェクトのようなコミュニティは、優れた出発点です。
プロンプト:美しいインフォグラフィックは、注ぎに応じて4つの部分に分割されます(知覚可能、操作、整理者が耐えられる、堅牢)。各パートには、メインアイコン(手の形、脳の形、ギアなど)と、その下に2〜3の短いチェックリストがあります。
本物の例:「オンラインストア」がアクセシビリティで20%の売り上げを増やすと。
有名なオンラインデザートショップ「Baan Bakery」を想像してください。最初は、ウェブサイトはとても美しいです。しかし、小さな文字を読むのが難しく、「バスケットへの追加ボタン」は非常に軽いため、チームがオーバーホールすることを決めたことを見ることができなかったという高齢者の顧客からフィードバックを受け取りました。大きなアクセシビリティ
何をすべきか:彼らはウェブを解体しません。ただし、AAレベルWCAGに従って更新から始めます。カラーボタンを暗くするように調整します。フォントのサイズを少し大きくして、「ストロベリー、ソフトケーキ、ベリーソースをトッピング」するすべてのケーキにaltテキストを追加し、顧客がキーボードのみを使用してすべてのステップを注文できるようにします。
驚くべき結果: 「Baan Bakery」の販売が高齢者だけでなく、20%近く増加してからわずか3か月後。しかし、ブランドの注意を賞賛する新しい顧客を獲得してください。「両親が簡単に使用するためにウェブサイトを作ってくれてありがとう」というコメントで5つのスターのレビューを受けました。これがすべての人にとってデザインの力です。、UX/UIの設計から通常に変化して、「カバー」エクスペリエンスを作成し、「販売を作成」します
プロンプト:ウェブサイトの製品ページの画像は、サイドの「ベイクベーカリー」を示しています。明るい色のボタンと小さな文字を示しています。アフターは、背景とはっきりと対照的に暗いボタンを示しています。文字は読みやすいです。販売が上昇することを示す小さなグラフで
チェックリスト準備ができました!あなたはすぐにあなたのウェブサイトを「アップグレード」し始めます。
ここを読んで、おそらくやりたいですよね?この略語チェックリストを使用して、ウェブサイトを探索してみてください。そして、小さな勝利から始めます(クイック勝利):
- ホームページを探索してください:すべての重要な写真、altテキストが意味しますか?ブラウザで拡張機能ツールを使用してチェックしてみてください。
- キーボードでテスト:マウスを下にしてみてください。タブ、シフト+タブ、入力ボタン、およびスペースバーのみを使用して、ウェブサイトをサーフィンします。メニューに移動してボタンを押して、フォームに正常に記入できますか?
- チェコのコントラスト色:オンラインツール(「色コントラストチェック」の検索)を使用して、ボタンの文字と背景色(購入ボタン、連絡ボタンなど)をドロップします。
- コンテンツをもう一度読んでください:複雑すぎる用語や文はありますか?人々が一般的に理解している言語に調整してみてください。
- スケールで動画をご覧ください:キャプションを介してすべてのコンテンツを理解していますか?
これらの5つのアイテムから始めたばかりで、それは素晴らしいステップと見なされます。また、これらのストーリーをプロセスの一部に持ち込む新しいWebサイトを作成する場合は、最初から組織のWebサイトを開発することで、
プロンプト:アイコン、ケッチアイコン、2つの色の円(コントラストの代わりに)、ブックアイコン、再生ボタンアイコンなど、各アイテムのアイコンが格安ボックスを備えたチェックリスト画像。
人々が疑問に思う傾向がある質問(そして明確な答え)
Q1:アクセシビリティを作成すると、ウェブサイトは以前ほど美しくないように見えますか?
A:それは本当ではありません!これは最も一般的な誤解です。アクセス可能なデザインは、「退屈な」デザインではなく、「スマートな」デザインです。誰にとっても美しく、利用可能なウェブサイトを作成できると同時に、創造性を高めるのに役立つ課題です。
Q2:多くの予算が必要ですか?私たちの中小企業はする必要がありますか?
A:100%完璧なことをすべて行う必要はありません。 「低いハイビングフルーツ」またはALTテキストの追加や色の調整など、簡単に修正できるものから始めます。最も価値のある投資でより多くの予算を費やす必要はほとんどありません。チームに「認識」を生み出すことです。中小企業にとって、これは競争に利点を作り、ブランドの忠実な顧客ベースを作成する機会です。
Q3:WCAGにはレベルA、AA、AAAがあります。どのレベルを狙うべきですか?
A:ほとんどのビジネスウェブサイトや組織にとって、 AAは世界中で受け入れられているゴールドスタンダードです。カバレッジアクセスと実際の可能性の間に良いバランスを作ります。この標準へのコンプライアンスは、ウェブサイト上場企業の要件や、透明性と標準を強調するWebオフィスの信頼性
Q4:どのツールをチェックできますか?
A:Chrome Devtoolsには、Wave、Axe Devtools(ブラウザー拡張機能)、灯台など、開始するための多くの優れた自動ツールがあります。基本的なアクセシビリティですが、これらのツールは問題の30〜40%のみを検出するのに役立つことを忘れないでください。実際のテストによるテストは依然として最も重要なことです。
プロンプト:快適な椅子の上に足を踏み入れた人の画像。彼の周りに浮かぶ質問と答えの象徴とともに。スマイリーの顔は、自信と不安を和らげることを示しています。
すべての顧客を歓迎するためにドアを開ける時が来ました。
この時点で、複雑なテクニックや恐ろしい法的負担の問題だけでなく、新しい時代にビジネスをすることの「心」であることをお勧めします。 「私たちは何を売っているのですか?」と尋ねることから見解を変えることですか? 「どうすれば「みんな」に最高の体験をすることができますか?」と尋ねるために
アクセシビリティへの投資は、数(売上、回心率)、ブランドの愛、信頼、そして最も重要なことに、人工デジタル社会の作成の一部であり、誰にも残さないという点でリターンを提供する投資です。
あなたのウェブサイトがもはや顧客をブロックする「障害」になるのを待たないでください。私たちが提供した簡単なチェックリストから今日あなたのウェブサイトを探索し始め、顧客を歓迎するためにドアを開いて「全員」を歓迎することはあなたのビジネスの新しい基準です。
あなたのウェブサイトが美しいだけでなく、すべての顧客を歓迎し、具体的なビジネス結果を作成する準備ができているだけですよね? UX/UIおよびWebアクセシビリティの専門家に相談してください。私たちは無料になります!私たちはあなたがすべての人のために素晴らしいウェブサイトを作成するのを手伝う準備ができています。
最近のブログ

世界中で売りたいですか? Shopify MarketsとLanguage Translation Appsの使用中に、利点の相性を比較してください。 (Mulilingual Apps)ストアに最も適したシステムを選択します。

SEOでレンタルするために顧客を追加してください!詳細には、特に地元のSEOから製品ページまで、レンタルビジネス向けのSEO戦略。

報告可能な時間を無駄にするのをやめてください! Google Looker Studio(Data Studio)でN8Nに接続する方法を教えて、ダッシュボードと自動マーケティングを作成します。