だれもが使える設定画面に─kintoneのフロントエンド刷新とアクセシビリティ｜サイボウズ デザイン&リサーチ
こんにちは！サイボウズ株式会社のkintoneフロントエンド刷新プロジェクトチームです。 2022年8月に、サイボウズはkintoneのアプリ設定画面のアクセシビリティ改善を行いました。サイボウズでは業務アプリケーション「kintone」のアップデートを毎月おこなっています。2022年8月のアップデートでは、kintone全体のフロントエンド基盤の刷新を行い、その一環としてアクセシビリティの改善に取り組みました。 アクセシビリティとは？アクセシビリティとは「だれもが製品やサービスを利用できること」を表します。ユーザーがおかれている環境やユーザーの能力にかかわらず、だれもが製品やサービスにアクセスし、同じ情報を得られ、同じ目的を達成できることを指します。 サイボウズではアクセシビリティをユーザーが「チームにアクセスできる能力」であると捉えています。サイボウズは、ユーザーが製品にアクセスするこ
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月に勧告候
iOSアプリのアクセシビリティを向上させるために、必要なこと - Fenrir Engineers
唐突ですが、この記事をご覧になっている皆様が開発に携わっているアプリは、Accessibleでしょうか。アクセシビリティと一口に言っても、VoiceOverのような視覚に頼らないアプリの操作方法をサポートすることであったり、前景色（文字色など）と背景色とのコントラスト比を十分に持たせて視認しやすい色使いにしたり、ボタンのタッチ領域を十分に広くしてボタン操作を容易にするなど、様々なことが関係してきます。 この記事をご覧になっているということは、少なからずアクセシビリティに対する興味・関心を持っていらっしゃると思います。 弊社には、デザイナ・エンジニアを中心にアクセシビリティに強い関心を持つメンバーがいます。さらに、とてもありがたいことに、会社としてもAccessibleなアプリを作れるということを強みの一つにしていこうよ！ということで、業務の一環として、iOSアプリを開発するにあたってアクセ
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
2019年、freeeのアクセシビリティを振り返る - freee Developers Hub
この記事はfreee Developers Advent Calendar 2019の24日目です。こんにちは、freeeの@magi1125こと伊原です。あだ名は「アクセシビリティで一発当て太郎」です。いまはデザインリサーチチームのマネジャーをやっています。 この記事ではタイトル通り、2019年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2018以前の活動については「2018年、freeeのアクセシビリティを振り返る」をご覧ください。 developers.freee.co.jp ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 12月26日追記: 本記事にインスパイアされたとのことで、@masup9が同様の振り返り記事をまとめています。こちらもぜひご覧ください。 develope
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
アクセシビリティを向上していくために出来ることから進めていく活動 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。フロントエンドチームのUXエンジニア みーた です。 今回は私が今一番熱く燃えている🔥アクセシビリティ向上をここ半年間どうやって社内外で布教しているかを５つほど紹介したいと思います。アクセシビリティ向上していきたいけど、ひとりじゃできないし、どうしていったらいいのか分からない！って人に是非読んでいただきたいです:) なぜアクセシビリティ向上に熱を入れてるのか アクセシビリティとは「障がい者のための対応」というイメージを持つ方がまだ多くいるかと思いますが、そうではなく 「能力や環境にかかわらずユーザー全員が、同じ情報を得られること」だと考えています。 屋外で画面を見ると見づらい 怪我をしてマウス操作が難しい 歩きスマホが危ないと言われていても情報を得たい このように健常者であっても普段の生活の中で困ることはあるかと思いますが、アクセシブルな対応が出来ているとこれらを解消出来ちゃ
アクセシビリティを改善するために、通常の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
React-axe で React アプリケーションのアクセシビリティを向上させる | メルカリエンジニアリング
こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。 この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々なテストできるようになったりと、フロントエンド界隈におけるアクセシビリティへの関心の高まりを感じます。 本記事では React アプリケーションのアクセシビリティをチェックするためのライブラリである React-axe と、その中心技術である axe-core を応用した様々なツールをご紹介します。 React-axe とは React-axe は React アプリケーションのアクセシビリティをチェックするためのツールです。チェックの結果は Chrome DevTools に表示され、開発中にアクセシビリティの問題に気
:focus-visible - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
[Proposal] Focus Traversal API
A partial archive of discourse.wicg.io as of Saturday February 24, 2024. The current system for programmatically manipulating focus within a web page leaves a lot to be desired. A single element can request the focus with the focus() method but that is the extent of the programatic focus navigation options. Advancing the focus to the next focusable element or the previous focusable element involve
Color accessibility: tools and resources to help you design inclusive products by Stéphanie Walter - UX Researcher & Designer.
Color accessibility: tools and resources to help you design inclusive products I wrote a quick tweet about teaching the basics of accessibility and colors to design students a few months ago that go quite some attention. It brought up some interesting discussions on color accessibility, inclusive design an interesting discussion about the use of emojis. A few people asked me for advice on how to c
アクセシビリティ視点から考えるプロダクトの付加価値、そしてどう取り組むか？｜Okuto Oyama｜note
皆さんこんにちは。2019年1月に株式会社プレイドに入社したデザインエンジニアの大山です。 インターネットではyamanokuと名乗ってる者です。趣味はインターネット徘徊です。 今まで受託制作の会社に勤めていたのですが、このたび初めてSaaS事業会社で働くことになりました。まったく別世界のため日々学びばかりの状況です。 そんな自分も入社して4カ月が経ち、あらためてプレイドに入社してこれからやっていきたいことを書いてみようと思いました。 制作会社時代はHTMLとCSSとJavaScriptを書いてただけの人間でパッとした特徴もなかったのですが、ユーザーに価値を与えながら長期運用に耐えられる強固なものをつくりたいという自分の中でのミッションは一貫していました。 それを実現させる一つの手段として注目しているものがアクセシビリティの担保です。 アクセシビリティとはなにかAccessibility
Apple、Safariで実験的に導入しているAccessibility Eventsの「Accessibility Object Model」とプライバシーについて説明。
AppleがSafariで実験的に導入している「Accessibility Object Model」とプライバシーについて説明しています。詳細は以下から。 Appleは現地時間2019年04月10日、現在AppleやGoogle、Mozilla FoundationがAccessibility Eventsの一機能として導入を進めている「Accessibility Object Model（以下、AOM）」について、以下のように説明しています。 Accessibility Events is an experimental web development feature available on macOS 10.14 and later and iOS 12 and later, which requires the Accessibility Object Model feature
視覚障害がある人々にビジネス参画チャンスを freeeがアクセシビリティを意識して得た気づきとは | クラウド会計ソフト freee
2019-03-26 「freee人事労務」の従業員向けモバイルアプリiOS版がアクセシビリティへの対応をスタートさせた。これは、iOSに標準で搭載されている画面読み上げ機能（VoiceOver）の活用により、視覚に障害がある方でも「打刻」「勤怠入力」「給与明細の確認」といった、「freee人事労務」の基本機能を利用できるようにするもの。 障害によって業務への関わりを制限することなく、ビジネス参画のチャンス、そして働き方の幅を広げるために――アクセシビリティ対応に注力するようになった背景、そして今なお続行中のアクセシビリティ対応について聞いた。 なぜ今、アクセシビリティに注目するのか？ ――まず、freeeがアクセシビリティにフォーカスした経緯をお聞かせください。 伊原 私は「freee人事労務」のプロダクトマネジャーを務めていますが、2017年の入社前はUXデザインに携わり、アクセシビリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accessibility Insights
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
Accessible to all | web.dev
AccessibilityCheckList