2021年 React Native のアクセシビリティを勝手に振り返る
この記事は React Native アドベントカレンダー 2021 の 6 日目の記事です。 2021 年の React Native のアクセシビリティを勝手に振り返ります。 モバイルアプリのアクセシビリティ事情 まずは、モバイルアプリ事情を勝手に振り返ります。 モバイルアプリでのスクリーンリーダー使用率が増えてきた WebAIM では、スクリーンリーダー使用者を対象とした "Screen Reader User Survey" を大体2年ごとに実施しています。 今年度の WebAIM: Screen Reader User Survey #9 は 5 月から 6 月までに行われました。 この調査では"Mobile App vs Web Site Usage"（モバイル端末で Web とモバイルアプリどちらをよく使用するか？）という項目があるのですが、「モバイルアプリ」と回答したユーザ
React Native アクセシビリティ対応をわかるための記事: フォーカス編
前回「React Native のアクセシビリティ対応について知るための入門記事」の続きです。 フォーカス可能なコンポーネントについて知る 前回の記事では、スクリーンリーダーを特定のコンポーネントにフォーカスさせて、情報を読み上げたり、操作したり、色々やりました。 この「支援技術がフォーカス可能」な状態になるためには、ちょっとしたルールがあります。 対応次第では逆にフォーカスできなくなってしまうので、ルールを知っておく必要があります。 accessible まず、「デフォルトでフォーカス不可能」なコンポーネントにフォーカスする場合は accessible: boolean という Props が必要となります。 「デフォルトでフォーカス不可能」なコンポーネントは、View や Image などです。 では、逆に「デフォルトでフォーカス可能」なコンポーネントとは何でしょうか？ 答えは、内部で
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
Accessibility In Chrome DevTools — Smashing Magazine
This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it’s best to strive to create the best possible experience we can for our users, regardless of their abilities. I spend a lot of time in DevTools, and in doing so, I’ve c
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
絵文字をスクリーンリーダーに読み上げさせてみた | アクセシビリティBlog | ミツエーリンクス
以前に同僚と少し絵文字に関する話をしていたこともあり、ふと、絵文字はスクリーンリーダーでどう読み上げられるのかということが気になって、ごく簡単に読み上げさせてみましたという話です。 筆者の自宅の環境がWindowsとAndroidであることから、読み上げのテストにあたっては、NVDA、Windowsのナレーター、TalkBackで試してみました。以下にテスト環境を記しておきます。ブラウザーによる違いは見られなかったので、これについては省いています。 Windows バージョン 1909（OS ビルド 18363.836） NVDA 2020.1jp Android 10 TalkBack バージョン 8.2.0.303936097 以下が4つの絵文字について読み上げテストを実施した結果になります。言語については、lang属性を付与して読み上げさせました。 笑顔を表す絵文字と各スクリーンリー
キーワードは“すべて”の人 「アクセシビリティ」ってなんだろう？
「アクセシビリティ」、「ウェブアクセシビリティ」といった言葉を耳にする機会も増えてきたように思います。この連載では、サイボウズでアクセシビリティエキスパートとして活躍する小林大輔さんに、いまデザイナーが知っておくべきアクセシビリティの基本を解説していただきます。初回となる今回は「アクセシビリティとはなにか」がテーマです。 「アクセシビリティ」という言葉を聞いたことがありますか？最近、デザインの分野やフロントエンドの分野でアクセシビリティに関する講演や書籍が出版される機会が増えてきました。また最近では、iPhoneの設定項目の中に［アクセシビリティ］が含まれているため「iPhoneでアクセシビリティという言葉を知った」という方も多いのではないでしょうか。 アクセシビリティにはさまざまな定義がありますが、私がほかの人にその定義について尋ねられたときには、以下のように答えることにしています。 製
freeeアクセシビリティー・ガイドラインを一般公開しました - freee Developers Hub
こんにちは、freeeの自称「アクセシビリティーおじさん」の中根といいます。 freeeで働き始めて間もなく2年くらいになりますが、このブログには初めて投稿します。 今日は、4月30日にVer. 202004.0を一般公開したfreeeアクセシビリティー・ガイドラインをご紹介しようということで出てきました。 (このバージョンが一般公開した最初のバージョンです。) a11y-guidelines.freee.co.jp そもそもアクセシビリティーって? 「アクセシビリティー (accessibility)」という言葉については、いくつかの公式な定義があるはずですが、僕は分かりやすく、 誰でも、ほぼ同じコストで、ほぼ同じようにサービスや情報を利用できる そういう状態を「アクセシブルな状態」、「アクセシビリティーが高い状態」としています。 「誰でも」というのは、文字通り、年齢、性別、利用環境、障
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
「アクセシビリティ」にワクワクした - freee Developers Hub
はじめまして、人事労務freeeのアプリケーションエンジニアをしている19新卒のスポーンです。 去年は内定者のアドベントカレンダーを企画したので、よかったらそちらも読んでみてください。 この記事はfreee Developers Advent Calendarの13日目です アクセシビリティという概念を知った 新卒研修の中に「アクセシビリティ研修」というスケジュールがあり、当時何をやるんだろうとぼんやり考えていました。 全盲エンジニアのMaxさんがアクセシビリティとは何か、freeeでやる意義とは何かを伝えてくれる研修で、そこで初めてアクセシビリティという概念を知りました。 研修の様子 僕は今まで全盲の人が身近にいなかったので、彼らがどうやってPCやスマホを扱っているかもそれを支えるWebアクセシビリティという概念もすべてが新鮮でワクワクしたものでした。 誰もがプロダクトを使えるようにする
Designing accessible color systems
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. With this in mind, we recently updated the colors in our user interfaces to be more accessible. Text and icon colors now reliably have legible contrast throughout the Stripe Dashboar
Accessibility Support
Important: This website does not attempt to establish a standard for how assistive technologies must behave. Read the FAQ for more information. Additionally, this is a work in progress. Please submit feedback or suggestions. This a community driven effort. Please run some tests to help keep this project going and to learn about assistive technologies along the way.
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
イベントレポート: Cybozu UXCafe「チームで取り組む！サイボウズのアクセシビリティ」 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、デザイングループ の小林(@sukoyakarizumu)です。 2018年11月28日に開催したイベント「UXCafe チームで取り組む！サイボウズのアクセシビリティ」についてレポートします。 イベント中のツイートは、Togetterにまとめられています。 すべての発表資料は、Compassで閲覧できます。 イベントの趣旨 今回のイベントは、サイボウズのさまざまな開発チームがアクセシビリティに取り組んでいることを伝えるために開催しました。 サイボウズは、複数の開発チームがアクセシビリティの活動を進めています。また、特定の職能だけではなく、デザイナー、プログラマー、QA、TC(Technical Communication)など、さまざまな職能のメンバーが一緒にアクセシビリティに取り組んでいます。 今回は、「Garoonチーム」「TCチーム」「kintoneチーム」の3つの開発
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accessibility Tree と Accessibility Object Model