160個あったアクセシビリティのエラーをエンジニア全員で改善しました｜note株式会社
ただし、アクセシビリティチームは発足したばかりで人数も少なく、参加メンバーは基本的には兼務で作業を行っています。そのため、着手できていない課題もまだまだ山積みです。 特に顕著だったのだが、lintによるコードの自動チェックで、検出された警告の数は160を超えていました。それらをアクセシビリティチームのWeb側を先導しているエンジニアの深谷さん（Tai Fukaya）が少しずつ直している状態でした。 このままでは社内全体にアクセシビリティへの理解が浸透せず、今後も開発が進んでいくごとにエラーの数が増えていくことは明白でした。 そこで、アクセシビリティチームだけで修正を行うのではなく、エンジニア全体で取り組む方針に変更したのです。 その結果として、エラーの数を激減に成功しただけでなく、エンジニア全員がアクセシビリティを理解するキッカケにもなりました。 アクセシビリティのテスト方法noteでは、
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
企業サイトのウェブアクセシビリティの今とこれから
はじめに 企業のマーケティング、ブランディングの現場では、Webサイトをはじめとするデジタル活用が今やあたりまえとなっている。解析ツールを用いてユーザーの行動を探索し、マーケティングオートメーションの導入によって見込み顧客の裾野を広げ、大規模なコンテンツマネジメントシステムによって日々膨大なコンテンツを量産している。 Webサイトの最大の特性は、距離や量の制限を受けずに、いつでも、どこにでも、誰にでも、情報やサービスを届けることができる点にある。しかし、その情報やサービスがユーザーにとっていかに有益であったとしても、ユーザーがその情報にアクセスできなければ、その情報は存在していないに等しい。単にWebページを作成し、インターネット上に公開しただけでは、ユーザーが情報に十分にアクセス可能な状態になるとは言えず、発信者側が情報やサービスをアクセス可能な状態にしなければならない。 「情報にアクセ
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Vpassのパズル認証を突破する - YDiary
SMBCから ★━━【三井住友カード】━★ 【重要なお知らせ】Vpassログイン時の「パズル認証」導入について ★━━━━ 2017年8月7日 ━★ などと書かれたメールが届きました． どうやら今後Vpassにログインする際にパズル認証が必要になるらしいです． メール本文には人の手によるログイン操作であることを認証するものでございますとあります． 個人的にはDr.Walletで請求額取得できなくなりそうで嫌だなぁという感じですが，果たしてパズル認証に機械的なログイン試行を防ぐ効果はあるのでしょうか． 実際にログインページで使われてるパズル認証を見てみると，よく見かけるもので，調べてみるとCapy社のパズルキャプチャのようです． このパズル認証は既にだいぶ前に突破されています*1が，今回Vpassのログイン画面で使用されているものはピースの輪郭が白で塗りつぶされており，この手法が使えないよう
「見えない」格差、気づいてますか？ 10万人以上がアクセスできなかった「重大情報」
“両眼の視力の和が0.01以下”が基準の視覚障害1級を持つ人は、全国に10万人以上いるとされる。目が全く見えないか、見えてもごくわずかであるこの人たちもまた、インターネットを介して情報を得ている。 2012年に発表された総務省の調査結果によれば、視覚障害者のインターネット利用率は91.7％だ。自分の生活にどれほどネットが浸透しているか考えてみれば、当たり前とも思える。しかし、どうやって？ 視覚障害のある人たちは、その多くが合成音声による画面読み上げソフトを使っている。読み上げソフトは、ウェブサイト上で利用者がカーソルを合わせたところのテキストを読み上げる。リンクがあれば「リンク」と読む。 ソフトにもよるが、例えばBuzzFeedのトップページで左上からカーソルを合わせて読み上げていくとすれば、「バズフィード リンク ニュース リンク 記事タイトルA リンク 記事タイトルB リンク……」とな
あなたの価値を高めるWebアクセシビリティ（!importantバージョン）
2017年6月3日開催のイベント「!important #04 -特盛！アクセシビリティスペシャル-」で使用したスライドです。
ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。とくに、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「WAI-ARIA」を実装に取り入れてる人もいるかもしれません。今回はウェブ制作に関わる人に役立つウェブアクセシビリティの基本を紹介します。 ウェブアクセシビリティのガイドライン「WCAG」 世界中のウェブアクセシビリティの基本となるガイドラインとして、W3Cの「Web Content Accessibitility Guidelines」(通称：WCAG)があります。現在は2008年に勧告された「WCAG 2.
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
Webデザイナーが最低限気をつけるべき８つのアクセシビリティ
Webデザイナーや開発者は往々にして、自分たちの制作物に誰がアクセスして使うのかという点に関して無関心です。 使いやすさなどよりビジュアルが優先されることも多いですが、現代のクリエイターとして私たちは、より道徳的な観点を持ち、人それぞれの能力に併せたアクセシビリティを提供するべきです。 イギリスのアクセシビリティに関する法律に対する法的義務はさておき、イギリスには1,190万人以上の障害者がおり、その数は人口の19%に該当します。これはつまり、アクセシビリティが十分でないサイトに対して不満を持っている潜在ユーザーが、それくらい存在するということです。 どうして良いWebアクセシビリティが必要なのか ユーザーはWebサイトを使用するとき、どんなことを困難と感じるのでしょうか。アクセシビリティを語るにあたって、どういったものがあるかを見てみましょう。 聴覚系の障害 これは軽度なものから重度の聴
盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術 | スタッフブログ | マイネ王
画像：スマホのイラスト ！？ え、iPhoneってツルツルですよ！？ 触ってわかるボタン、ほぼないですよ！？ 『電話もメールもインターネットもしますよ』とのことだったのですが、 一体、どうやって使ってるの……！？ き………… 気になる〜〜〜〜！！！！ もっと話を聞かせて〜〜〜〜！！！！ 画像：ダイアログ・イン・ザ・ダーク前での社領の写真 ということで、外苑前にある施設 「ダイアログ・イン・ザ・ダーク」 にやって来ました！ 「ダイアログ・イン・ザ・ダーク」は、暗闇のソーシャル・エンターテインメント。完全な真っ暗闇の空間へグループを組んで入り、暗闇のエキスパートである視覚障がい者のスタッフの案内で、視覚以外の感覚を研ぎすませながら中を探検したりと、さまざまな体験ができる施設です。
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
徹底対談後編：適切なHTMLタグを使うことのメリットを知ろう
日立コンサルティング 公共コンサルティング本部の岡山将也マネージャー、サイボウズ グローバル開発本部 東京第2開発部 小林大輔氏、ツルカメの森田雄代表取締役社長・UXディレクターによる対談の後編。アクセシビリティ向上の基本となる“Webの構造化”と、そのメリットについて語り合う。 タイトルや見出しなど、ページの内容をきちんと構造化したHTMLのテンプレートを使うだけで、一定のアクセシビリティは確保できますよね。例えば、音声読み上げソフトで見出しだけを読み上げるといったことができるようになったり。 森田氏 そうですね。でも国内の多くの会社では、構造化されていないテンプレートがまだまだ使われています。テンプレートを構造化されたものに変えることはそんなに面倒ではないはずです。でも、「見た目が変わらないのに作り直す」ということにはなかなか予算が出ない。 Webページの制作を請け負うベンダー側の能力
Twitter の画像の説明文は視覚障害者だけでなくすべてのユーザーのために入れよう
3月下旬、 Twitter の画像投稿時にスマホアプリから説明文を設定できるようになりました。 より多くの方に画像をお届けするために(blog.twitter.com) 画像の説明文を入力する画面オリジナル画像 日本の公式ブログや各ニュースサイトの報道では、「視力が弱い方」「目の不自由なユーザー」というアピールが目立ちますが、この機能は視覚障害者のためだけに向けたものではありません。 外出先でスマホから画像をツイートする時、わざわざ説明文を入力するのは面倒でしょう。私も何度かやってみましたが、正直言ってかったるいです。ただ、「自分のフォロワーには視覚障害者はいないからまったく関係のない機能だ」とは思っていただきたくなく、この記事を書きます。 なぜ視覚障害者のためになるのか 誰のための機能か どのような説明を書けばいいのか まとめ なぜ視覚障害者のためになるのか § 画面を目で見ることが困難
Webデザインでも気にしたい。「みんなに伝わる」ユニバーサルデザイン入門 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのあゆみです。いきなりですが、 クライアント「いろいろな人が閲覧できるサイトに」 ええ、わかります。でも、これだけ多種多様な環境がある中で、全てに対応するのは無理な話で……。って経験、ありませんか？ ありますよね。 ぶっちゃけてしまうと、IE9以下はできるだけ対応ブラウザに入れたくないのですが、（Web制作に携わるみなさんの頷く声が聞こえる……）わたしがそう感じてしまうのは、「その人がアップデートしたら問題なく見られる」という、ユーザ側の対策案があるからです。 JSアニメーションやCSS3に影響があるかもしれませんが、もちろんサイト自体は見れるようにはなっていますし。（プログレッシブエンハンスメント対応での許可をいただいています） ただ、もっと別の環境で閲覧する人もいるわけです。 例えば、耳が遠かったり、色覚異常だったり、老眼だったり、近視だったり。 今回はそれらの
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Extended HTML - WAI-ARIAとMicrodataでHTMLを拡張する
文字サイズだけでは不十分！ 老いた眼や手でも使いやすいサイト作り7つのポイント（全6回の4） | シニア層をガッチリつかむECサイト構築術 「SFO」のススメ | Web担当者Forum
Webアクセシビリティが無視されすぎで気にくわない。
