アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
Figma 用のアクセシビリティ注釈キット「A11y Annotations」 | Accessible & Usable
公開日 : 2022年12月19日 (2022年12月22日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支
「ユーザーとの向き合いかた」を深化させるアクセシビリティ (iCARE Dev Meetup #33) | Accessible & Usable
公開日 : 2022年5月22日 カテゴリー : アクセシビリティ 2022年5月18日に開催された「iCARE Dev Meetup #33」に登壇させていただき、『「ユーザーとの向き合いかた」を深化させるアクセシビリティ』というテーマでお話をしました。 開発者をメインターゲットとしたイベントで、テーマが「デザイナー目線のユーザーとの向き合い方」ということで、UX デザインにまつわる様々なセッションが繰り広げられました。この中で私は、ユーザー中心設計 (UCD) のプロセスにおいてアクセシビリティをどうチーム内で共有認識化し、UX デザインを深化させてゆくかについて、「インクルーシブなペルソナ拡張」というフレームワークを用いながらお話をさせていただきました。 折しも、5月第3木曜日 (2022年は5月19日) に全世界で展開される GAAD (Global Accessibility A
一貫性のあるフォーカスインジケーター | Accessible & Usable
公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者（エンジニア、プロダクトマネージャー、デザイナー）向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
社内のみんなにアクセシビリティ｜Hiroki Tani
自分が観測している範囲でそう感じているところもあるかもしれませんが、デジタルプロダクトやサービスにおける情報アクセシビリティを高めていこう、というのが年々広がっていると感じています。 自分が設計・開発に関わるサービスではもちろん、SNS等でもなるべく画像に代替テキストをいれる等、100％ちゃんとやれている自信はないですが努力しているつもりです。 ところで、みなさんの職場で同僚との仕事上でのやりとり等ではどうでしょうか？ドキュメントの共有や、Slackなどのテキストコミュニケーション、あるいはZoomでの会議といった機会において意識できるアクセシビリティがあります。 この記事では普段ぼんやりと感じている「仕事場におけるアクセシビリティとして気をつけること」を挙げていってみます。 色だけで情報を区別しない社内で共有するドキュメントで「赤字は重要」「色だけで分けられた円グラフ」といった表現をする
アクセシビリティ改善手法＆UXの工夫紹介 〜 デザインでECサイトを誰でも安心して使えるように
こんにちは。Yahoo!ショッピングでUI・フロントエンド実装を担当している舟橋です。 2019年秋にローンチされたPayPayモール、皆さんご存じでしょうか？ PayPayモールでは、誰でも安心してお買い物できるよう、アクセシビリティ・UX改善に取り組んでいます。 今回は、以下の2つの取り組みについて書いてみたいと思います。 PayPayモールローンチ前に行ったアクセシビリティ対応について リリース後に行ったUX改善案件について この内容はMixLeap Live Study#65 - アップデートWebアクセシビリティでの登壇内容を記事としてまとめ直したものです。発表時のスライドは以下を確認ください。 ウェブアクセシビリティってなに？ 本題に入る前に、ウェブアクセシビリティの定義とウェブアクセシビリティのガイドラインとして知られるWCAGについて紹介します。 ウェブアクセシビリティ ウ
WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
Material Design Text Fields Are Badly Designed — Smashing Magazine
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organizations like Boots, Just Eat and Gov.uk. One topic that comes up a lot
耳が不自由で電話認証できない！ 「ゆうちょ銀行」アプリに陳情、SNSで反響...広報部「対応を検討」
「ゆうちょはん、お客様は全員聞こえるとは限りまへんで！」――。ゆうちょ銀行のスマートフォン向けアプリをめぐり、聴覚障害者には電話での本人確認が困難だとの訴えが、SNS上で拡散している。 ユニバーサルデザインの観点から対応を求める声が上がっており、同社は取材に「お客様への周知方法も含めて対応を検討していきます」と答えた。 「わたしも同じ立場で困ってました」 訴えは、2021年2月8日にツイッターに投稿された。ゆうちょ銀行アプリを利用したところ、電話で本人確認をする「IVR認証」をする必要があったが、耳が不自由なため難しく、「ゆうちょはん、お客様は全員聞こえるとは限りまへんで！」と投げかけている。 IVR認証は自動音声でパスコードが伝えられ、アプリ上で入力が求められる。ゆうちょ銀行以外のアプリでも導入されている。昨年秋に発覚したNTTドコモの電子決済サービス「ドコモ口座」の不正出金事件を機に、
フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
アクセシビリティの二重性｜UMEGAKI Masahiro
アクセシビリティ Advent Calendar 2020 の記事です。https://adventar.org/calendars/5011 よし分かった！アクセシビリティって大事だよねって思って取り組むじゃないですか。これ読んでる人って、最初から関心があって読んでる、もうすでに取り組んでいる人たちなわけでしょ？こういう人をAチームって呼びましょうか。 Aチームメンバーって、たいていある種のダブルバインド状態に陥るのですよ。でもそれって、日本固有の現象なんじゃないかなぁって思うのです。そこを掘り下げてみようといというのが、本稿の狙いです。 アクセシビリティについて、よくこんな説明を受けませんか？「アクセシビリティは障害者の（交通、建築、情報）アクセスを確保していく取り組みである」「と同時に、高齢者などのより広い人たちにも役立ちます」って。これって、JIS X8341-1 あたりから意図的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアクセシビリティ入門
ウェブはすべての人が使えるべきもの 障がい者の力でアクセシビリティ改善 #accfes | ドクセル
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
ウェブアクセシビリティ実践的用語集
Accessibility vs Design trends
The business value of accessible design
Zホールディングス株式会社
