iOS VoiceOverを用いたチェックの実施方法 — freeeアクセシビリティー・ガイドライン Ver. 202403.1-RELEASE+4.3.7
iOS用スクリーン・リーダーのVoiceOverの推奨設定の方法、基本的な使い方と基本的なチェックの実施方法について記します。 なお、macOSにも同名のスクリーン・リーダーが標準搭載されていますが、iOSのVoiceOverとはまったくの別物です。本稿ではiOSのVoiceOverについてのみ記し、「VoiceOver」という記述はiOS VoiceOverを差します。 本稿ではごく一部の機能や設定について紹介しています。より詳しくは、Appleが提供するiPhoneユーザガイドの「iPhoneのアクセシビリティ機能を使ってみる」を参照してください。VoiceOverに加えて、その他のアクセシビリティー関連機能についても詳しく紹介されています。 起動と終了 VoiceOverの起動と終了の方法はいくつかありますが、一時的に有効にしたり、有効/無効を切り替えながら使うような場合は、以下の設
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（初級編）
先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー
2022年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、技術仕様と国内法整備に関して、2022年のWebアクセシビリティの短期的な予測をしてみます。 WCAG 2.2とWCAG 3.0 WCAG 2.2に関しては、2020年末では2021年2月にCandidate Recommendation（勧告候補）になる予定だったものが、ずるずるとスケジュールが後ろ倒しになっており、執筆時点の2021年12月初頭になっても未だに勧告候補のステータスにはない状況です。一方で、執筆時点でのWhat’s New in WCAG 2.2 Working Draftによれば、2022年6月にRecommendation（勧告）を発行するスケジュールとのことです。 このスケジュールに間に合わせるのであれば、逆算すると4月までに勧告候補を発行する必要があります。よって、4月に勧告候
2021年に行ったアクセシビリティやっていき - BASEプロダクトチームブログ
この記事は BASE Advent Calendar 2021 の6日目の記事です。 フロントエンドエンジニアの @rry です。 今年の4月に BASE にジョインしてから、アクセシビリティに関する取り組みを少しずつ行ってきました。 BASE ではこれまでアクセシビリティに関する取り組みは局所的にしか行われておらず、また私自身もアクセシビリティについて知見が全くない状態でした。このような状態からアクセシビリティやっていきを具体的にどのようにして進めているかについてご紹介したいと思います。 アクセシビリティとは？何故アクセシビリティに取り組むのか？ アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC） 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、
「働く」を「権利」と定義したChatworkアクセシビリティ方針決定の裏側｜Cocoda
Chatwork プロダクト本部 プロダクトデザイン部の守谷です。2013年に入社後しばらくはWebデザイナーとして動いたのち、そもそもの入社動機が「人が使うものを作りたい」というところにあったため、2015年ごろからはUIデザイナーとして活動しています。 Chatworkでは、「働くをもっと楽しく、創造的に」というミッションの達成に向かい、「すべての人に、一歩先の働き方を」実現させることをビジョンに、サービスを開発・提供しています。 そんな中、私たちが掲げるビジョンにある「すべての人」からあらゆる人を排除せず、真にすべての人が使えるサービスを作ることを目指し、2016年からアクセシビリティへの取り組みを進めています。
アクセシビリティでの成功事例を作りたい！ 自ら手を挙げて切り拓いてきたキャリア観 | 森田雄＆林真理子が聴く「Web系キャリア探訪」
Web黎明期からサイト制作に携わり、現在はfreee株式会社 UX部 デザイン基盤チームでUXリサーチャー・デザイナーとして働く伊原力也氏にお話をうかがった。なお、聞き手の森田雄氏は、伊原氏が2社目に勤務したビジネス・アーキテクツの設立メンバーでもあることから、旧知の間柄である。林真理子氏とも、ビジネス・アーキテクツ時代から面識がある。 伊原氏は、取材を受けるにあたってこれまでの経歴を整理した資料を用意してくれたので、参照しながら記事を御覧いただきたい。 Webが一般に普及してすでに20年以上が経つが、未だにWeb業界のキャリアモデル、組織的な人材育成方式は確立していない。組織の枠を越えてロールモデルを発見し、人材育成の方式を学べたら、という思いから本連載の企画がスタートした。連載では、Web業界で働くさまざまな人にスポットをあて、そのキャリアや組織の人材育成について話を聞いていく。 イン
全盲のエンジニアと働くことで見えてきたサイボウズのアクセシビリティ｜Cocoda
こんにちは。サイボウズの小林大輔といいます。社内で「アクセシビリティエキスパート」として活動しています。 サイボウズでは、2014年ごろからアクセシビリティについての取り組みを行ってきました。社内啓発活動の一環としてアクセシビリティの社内勉強会やワークショップを継続的に開催したり、実際の製品改善の取り組みも多数行ってきました。さらに社外に向けて、アクセシビリティの重要性や取り組み方を発信する活動もしてきました。 最近では、社内外でアクセシビリティという言葉を少しずつ聞くようになってきました。社内にも社外にもアクセシビリティを発信しつづけてきた身としては嬉しい限りです。 今回は、全盲 (両目が見えない) のエンジニアSUGIさんが入社したことで、私たちサイボウズが得た知見について紹介しようと思います。 もともと、私がアクセシビリティに関わることになったきっかけは、弱視の方へのユーザビリティテ
わたしとWebアクセシビリティ - note
わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている（後述）。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを（偉そうに！）したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考えてしまうからだ。 更に今まで、個人事業主などでもないことをいいことに「自分の情報」をまとめることを避けてきた。 そろそろきちんと考え方などまとめる時期ではないかと、画面に向かっている。 わたしにとって
freee、「アクセシビリティチェックリスト」を公開
freee、「アクセシビリティチェックリスト」を公開障害の有無・年齢問わずだれでも利用できるプロダクトやWebサイトを開発するためのチェックリストを無料公開 freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、「アクセシビリティチェックリスト」を公開しました。本シートは、プロダクトやWebサイトがアクセシビリティに対応しているかをチェックするために必要な「チェック内容、必要なツール、優先度、参考リンク、ガイドライン等」がリスト化されており、順にチェックすることでアクセシビリティの向上に活用することが可能です。これまでfreeeは独自の「アクセシビリティガイドライン」を公開していますが、更に実用的にガイドラインを活用していただくために本シートの公開をしました。 無料でどなたでもご利用いただけます。 【画像】「アクセシビリティチェックリスト一般公開用」実際のシー
「この機能のアクセシビリティどうしよう」と思ったら
こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ＆ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ＆ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ＆ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。
祝 🎉 アクセシビリティ改善チームができました！ - kubell Creator's Note
こんにちは、守谷（@emim）です。 今までWebアクセシビリティについて、デザイン部*1内で勉強会を実施したり、クリエイティブ職以外への啓蒙活動などを社内でちょこちょこ開催してきました。 実施内容すべて漏れなくは報告できていませんが、このCreator's Noteでも私以外の複数のメンバーもブログ記事にまとめてくれています（Accessibilityあるいはa11yというタグで、閲覧いただけます）。 そんな中しばらく私を悩ませていたのは、いくら自分自身（デザイナー）が知識を貯めて啓蒙を進めたところで、実際プロダクトの設計フローに「アクセシビリティ施策実施」という要件が乗らない限り、永遠に改善を深部まで進められない……という現実とのジレンマでした。 そんな中！ 今夏やっと、プロダクトに改善施策を反映していくためのチームを立ち上げることができました！！！👏🏻 名付けて……と思ってはいた
ヘッダにあるブランドロゴの代替テキスト、みなさんならどうする？｜平尾ゆうてん
はい。ロゴが文字として可読かどうかは関係ないかと思います。結局グラフィックとしてのロゴもテキストとしての名称も、ブランドという抽象概念への別メディアにおけるポインタに過ぎないからです。だからこそこれらは代替可能と言えると思います。 — Kotaro Kokubo (@kotarok) March 24, 2020 つまり、それが例えばTwitterのロゴだったとして、そのシェイプ（鳥のカタチ）を見た人は「Twitterという不特定多数の140字以内のつぶやきを読んだり、つぶやいたりできるSNS」のような概念を認識している。それは「Twitter」というテキストを識字したときや、「ついったー」と音で聞いたときと最終的に同じ概念を認識できるので代替可能というわけだ。 で、ここまでは自分も理解できていたのだけど、問題はここからだ。トップページへのリンクが貼られている場合「トップページへ戻る」とい
WebコンテンツアクセシビリティについてのJIS規格 JIS X 8341-3:2016が公示
2016年3月22日にJIS X 8341-3:2016が公示されました。WCAG2.0の文書構造との合致がなされ、より理解や実践がしやすくなりました。 2016年3月22日にWebコンテンツアクセシビリティについてのJIS規格である「JIS X 8341-3」が「JIS X 8341-3:2016」として改正され、公示されました。 日本工業規格（JIS規格）を制定・改正しました（平成28年3月分）（METI/経済産業省） 資料7. ウェブコンテンツのJIS改正（平成28年3月22日）[PDF] JISの規格票は日本工業標準調査会のウェブサイトで閲覧、日本規格協会のウェブサイトより購入することができます。 日本工業標準調査会：データベース検索-JIS検索 JSA Web Store-JIS検索 いずれも直接のリンクではないため、規格番号「X8341-3」で検索してください。 今回の改正では
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
色覚異常補正レンズを買った
私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ
誰にでも開かれたヤフーでありたい。目の不自由な人がネットを快適に使うためのアクセシビリティ検証をレポート！ - 課題解決特集 - CSR - ヤフー株式会社
こんにちは、LIGブログのバイク好き編集者、田中宏亮です。 バイクで出かける際、まず気にするのが天気です。クルマと違って雨に降られてはびしょ濡れになってしまいますから、「Yahoo!天気」アプリで行き先の予報をチェックするのが習慣化しています。 こんな風に、多くの人が日常的に利用しているであろうヤフーのサイトやアプリですが、改めていろいろ触ってみると、使いやすさを第一に考えて構築されていることに気づかされます。考えてみれば、日本中の人が利用することを目的に運営されているサイトやアプリですから、汎用性を重視した作り方になっているのは当然のことと言えます。 しかし、高齢者や、さまざまな障がいがある方にとっても使いやすいサイトとなっているのでしょうか。 今回、視覚障がいをお持ちである日本視覚障害者ICTネットワークの中根雅文さんを招いてヤフーのアクセシビリティ検証がヤフー本社にて開催されると聞き
良いエラーメッセージの書き方 - Qiita
エラーには大抵「エラーメッセージ」が付いています。 自分は過去に、エラーメッセージの内容を雑にしてしまい後悔することがよくありました。 その経験から、良いエラーメッセージの書き方を考えました。 エラーメッセージを2つに分類する まず、エラーメッセージといっても次の2つのパターンで大きく異なってきます。 (1) ユーザーが見るエラーメッセージ (2) 開発者が見るエラーメッセージ (1) ユーザーが見るエラーメッセージ 内部実装のことは書かないようにする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zホールディングス株式会社
