世界最大クリエイティブの祭典SXSWで障害乗り越え日本人VRダンサー優勝の快挙（長谷川朋子） - エキスパート - Yahoo!ニュース
世界最大級のクリエイティブの祭典SXSW（サウス・バイ・サウス・ウェスト、以下サウスバイ）の今回の目玉は仮想空間だった。米オースティンで行われる国際ビジネスイベントがほぼ完全再現された。世界でも珍しい試みに関心が高まり、世界中からアバターに扮した参加者が集まっていた。そんななか、最終日に行われたアバター・ダンスコンテストで日本人VRダンサーが優勝の快挙を成し遂げた。それは日本のクリエイティビティに光が差すような瞬間だった。 目の前にバーチャルのオースティンの街が広がった今年のサウスバイ 音楽、映画、テクノロジーのクリエイティブの祭典としてサウスバイは毎年3月に米テキサス州オースティンで開催されている。今年はコロナ禍につき現地開催は見送られるものの、3月16日～20日まで5日間にわたって充実したプログラムをオンライン上にラインナップ。世界中のアーティストが参加したライブ配信や、新進気鋭の独立
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
こんにちは。サイボウズの小林大輔といいます。社内で「アクセシビリティエキスパート」として活動しています。 サイボウズでは、2014年ごろからアクセシビリティについての取り組みを行ってきました。社内啓発活動の一環としてアクセシビリティの社内勉強会やワークショップを継続的に開催したり、実際の製品改善の取り組みも多数行ってきました。さらに社外に向けて、アクセシビリティの重要性や取り組み方を発信する活動もしてきました。 最近では、社内外でアクセシビリティという言葉を少しずつ聞くようになってきました。社内にも社外にもアクセシビリティを発信しつづけてきた身としては嬉しい限りです。 今回は、全盲 (両目が見えない) のエンジニアSUGIさんが入社したことで、私たちサイボウズが得た知見について紹介しようと思います。 もともと、私がアクセシビリティに関わることになったきっかけは、弱視の方へのユーザビリティテ
2023年度リクルート エンジニアコース新人研修の講義資料です
アクセシビリティを改善するために、通常の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
Hatena Engineer Seminar #25「アクセシビリティ編」を6月6日にオンライン開催します #hatenatech - Hatena Developer Blog
こんにちは。Mackerel CRE の id:KGA です。 2023年6月6日（火）に Hatena Engineer Seminar #25 「アクセシビリティ編」の開催が決定しましたのでお知らせします。 エンジニア4名が登壇し、はてなの開発組織 / はてなブックマークチーム / Mackerelチーム それぞれで行った、アクセシビリティ改善に関する取り組みについて発表します。 開催はオンラインです。（詳しくはconnpassのイベントページをご確認ください）。皆様のご参加をお待ちしております！ イベント概要 日時: 2023年6月6日(火) 19:00-20:00(予定) 参加費: 無料 開催形式: オンライン配信 YouTube Live YouTube Live HatenaTech チャンネルにて https://www.youtube.com/channel/UCwqsFJ
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
この記事はfreee Developers Advent Calendar 2019の24日目です。こんにちは、freeeの@magi1125こと伊原です。あだ名は「アクセシビリティで一発当て太郎」です。いまはデザインリサーチチームのマネジャーをやっています。 この記事ではタイトル通り、2019年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2018以前の活動については「2018年、freeeのアクセシビリティを振り返る」をご覧ください。 developers.freee.co.jp ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 12月26日追記: 本記事にインスパイアされたとのことで、@masup9が同様の振り返り記事をまとめています。こちらもぜひご覧ください。 develope
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するための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」と読
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita
数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話HTMLUXTypeScriptReact この記事は SmartHR Advent Calendar 2020 23 日目の記事です。 こんばんは！ @diescake です。 今年は、React で「そこそこの規模で、そこそこ機能のフォームアプリケーション」を設計・実装する機会がありました。 技術選定で formik + yup を選んだので、その選定理由と結果を共有しよう！ ……そんなふうに考えていた時期が私にもありました。 驚くほど筆が進まず、いつの間にやら当日どころか既に夜になってしまったので tips 的な話に逃げる運びとなりました。ご了承ください。 というわけで、数値入力フォームに何気なく input[type="number"] を利用したら、ユーザから問い合わせが増えてし
![数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/94c916c0430e3eaaae0a8f9330ceaaeadc150247/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU2JTk1JUIwJUU1JTgwJUE0JUU1JTg1JUE1JUU1JThBJTlCJUUzJTgxJUE3JTIwaW5wdXQlNUJ0eXBlJTNEJTIybnVtYmVyJTIyJTVEJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgyJTg5JUUzJTgwJTgxJUUzJTgzJUE2JUUzJTgzJUJDJUUzJTgyJUI2JUUzJTgxJThCJUUzJTgyJTg5JUU1JTk1JThGJUUzJTgxJTg0JUU1JTkwJTg4JUUzJTgyJThGJUUzJTgxJTlCJUUzJTgxJThDJUU1JUEyJTk3JUUzJTgxJTg4JUUzJTgxJUE2JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJUEzJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zOTIzZDYzNjI4YTc0N2UwZjQ3OGRhYTg3OGNjMTc4MA%26mark-x%3D142%26mark-y%3D100%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBkaWVzY2FrZSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGFhMWI0NTQ2ZjQ2MWU3YjMwNDdiNjk2MjQ0MzRhM2E%26blend-x%3D142%26blend-y%3D455%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U21hcnRIUg%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D550%26s%3D3ceee105f33bb7645f419ac001501f23)
お前がめんどうくさがっているとき、相手もまためんどうくさがっているのだ シンドーイ・ダルイ5世まあ、そんな言葉を残したダルイ5世なんて存在しないんだけど、あることの『めんどうくささ』には、こういうお互い様な部分があることは読者のみなさんも経験的に感じているのではないでしょうか。 今回の話は、アクセシビリティの専門家として日々相談を受けたりレビューをする中で感じている『めんどうくささ』を説明しつつ、相談をしている側やレビューを受ける側も私の話をめんどうくさいと思って受け取っているんだろうなぁ〜という予想をしながら、これらにまつわる問題の整理と、それでもあえて『めんどうくさい』コミュニケーションをとっている言い訳を書きたいと思います。 相談に対する返答の『いつもの3点セット』「〇〇したいんだけど、アクセシビリティ的にどう思いますか？」 こういった問いは毎日のように尋ねられます。まず断言しておく
「公用文作成の考え方」について（建議） | 文化庁
「公用文作成の考え方」について（建議） 文化審議会は、慎重審議の結果、「公用文作成の考え方」を決定しましたので、別添のとおりここに建議します。 これは、昭和26年に国語審議会が建議した「公用文作成の要領」が示してきた理念を生かしつつこれを見直し、今後、政府内における公用文作成の手引として活用されることを目指し取りまとめたものです。 つきましては、本建議を政府内に周知し、活用を促すよう要請いたします。
ウェブアクセシビリティの基本：ランドマークロールを理解する
ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです
by Alice Achterhof イーロン・マスクをはじめとする投資家から4億5000万ドル(約490億円)以上の資金を調達し、1万3000以上のウェブサイトで使用されるようになったオンライン決済処理サービスの「Stripe」が、自社プロダクトのデザインにおける「色選び」で重視したポイントを自社ブログ上で解説しています。 Designing accessible color systems https://stripe.com/au/blog/accessible-color-systems ソフトウェアやサービスにおける色のコントラストは、アクセシビリティに大きな影響を与える重要な側面です。正しいコントラストを用いることで、視覚障害を持つ人でもプロダクトが利用しやすくなり、「低照度のディスプレイ」や「古い機材を使用しているユーザー」といった、推奨されない環境でプロダクトを利用している
概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装
耳が聞こえない観客「日本語には字幕なくて分からなかった」と投稿 → 公式が対応（？） ブラピの映画「ブレット・トレイン」で起きた感動的な展開に注目集まる
現在上映中のブラッド・ピットさん主演の映画「ブレット・トレイン」（字幕版）で、日本語のセリフに字幕が付いていなかったことを問題提起する聴覚障害を持つ人の投稿に約1万6000いいねが集まり、その結果（？）公式が対応したという感動的な展開に注目が集まっています。 「ブレット・トレイン」は、ブラッド・ピットさん演じる世界で最も運の悪い運び屋（殺し屋）のレディバグが、東京発の超高速列車で大騒動に見舞われるアクション・コメディ・スリラー映画。伊坂幸太郎さんの小説『マリアビートル』を原作としているため、真田広之さんやマシ・オカさんなど日本のキャストも出演しており、一部日本語のセリフが含まれます。 ブラッド・ピットさん（左），真田広之さん（右） 画像はジャパンプレミア試写会inKYOTOより マシ・オカさん（中央），デヴィッド・リーチ監督（右） 画像はジャパンプレミア試写会inKYOTOより 生まれつき
この記事はfreee Developers Advent Calendar 2020の18日目です。 こんにちは、freeeの@magi1125こと伊原です。自称「アクセシビリティで一発当て太郎」です。アクセシビリティによるビジネス貢献を模索していますが、最近は「いつ当てるの？」と聞かれて悩んだりもしています。もうちょっと待って。 この記事ではタイトル通り、2020年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2019年以前の活動については「2019年、freeeのアクセシビリティを振り返る」をご覧ください。 developers.freee.co.jp ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 腕力の限界と停滞 freee Developers Advent Calenda
フォームのアクセシビリティを考える
フォームのアクセシビリティを考える 2024.03.10 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、
こんにちは。エンジニアの中島です。 現在はアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 以前同組織の紹介記事をいくつかあげましたが、その通り弊社は自社の運営するサービスをアクセシブルにするため日々奮闘しています。 www.lifull.blog www.lifull.blog 以前の記事ではどういったマインドで同組織ができたか、どのように推進しているかについて話ました。 今回は、そういった活動の中でいくつか技術的な副産物が生まれたのでその話をしようと思います。 キーボード操作編 CSSの概念距離 さいごに キーボード操作編 アクセシビリティ対応にあたって、基本的なやることの一つにUIをキーボード操作可能にするという作業があります。 自社のサービスにもキーボード操作不能ないくつかのUIの存在を認識しており、それらを実際に直していくということをしています。 修正時、場合に
OOUIからユーザビリティテストまで、スキル横断的にUIデザインを見る！Designer's MTG #10 UI Design編 レポート！ - Pepabo Tech Portal
こんにちは。 コーポレートデザインチームのmewmo(@mewmoppel)です。 ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG（通称 デザミ）」のフルリモート開催も当たり前の風景となってきました。 今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜 これまでのデザミのレポートはこちら Designer's MTG #9 Information Architecture編 レポート！ 40人のデザイナーがフルリモートで集合！ Designer's MTG #8 レポート！ 「デザミとは？」「エキスパートスキルエリアとは？」については、前回の記事で紹介していますので、気になった方はあわせてご覧く
アクセシビリティー研修でスクリーンリーダーの音声を届けるために - freee Developers Hub
こんにちは、id:ymrlです。この記事はfreee Developers Advent Calendarの2日目です。 先日の記事で、全従業員向けのアクセシビリティ研修を紹介しました。 developers.freee.co.jp この研修でとても大切にしていることのひとつに 「スクリーンリーダー（画面読み上げソフトウェア）の操作を実演する」 というものがあります。多くの人にとって「視覚的に見るもの」であるWebが、視覚障害の当事者にはこういう形になっているということを見て（聞いて）もらうことが、新たな視点を持つキッカケになることを期待してのことです（もちろん、中根さん（@ma10）が研修をやっているから特に説得力があるというのもあります）。 研修では中根さんがWindowsでNVDAを、私はmacOSでVoiceOverをそれぞれ実演しています。この記事では私の手元でやっていることを紹
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.
皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
弁護士ドットコムでは、弱視（ロービジョン）の方をお呼びしてユーザーテストを実施しました。前回の記事では、テストを振り返りながら、その対応方法について検討しました。 そして今回は、実際に弁護士ドットコムがどう対応したのかをご紹介します。 弁護士ドットコムが選んだ道前回の振り返り会では、対応の方向として「ブランドカラーを見直すか」「あるいは最低限の箇所だけ色を変更するか」という選択肢が挙げられました。ブランドカラーの見直しが望ましいものの、これは影響範囲が大きく、サイト全体はもちろん、Webの外にまで影響が及びます。簡単には実行できません。 しかし結論としては、弁護士ドットコムはブランドカラーを見直す方向に舵を切りました。 その経緯をお話しする前に、弁護士ドットコムについて少しおさらいしておきます。弁護士ドットコムは、「弁護士をもっと身近に」というコンセプトで、弁護士と相談者をつなぐ場を提供す
QAが率先してアクセシビリティチェック品質をリードしたらいいことづくしだった - freee Developers Hub
こんにちは。freee人事労務でQAエンジニアをしているshihoです。 freee QA Advent Calendar2023 15日目です。 自己紹介 元カスタマーサポートで、2016年8月にfreeeに入社しました。3年前にQAエンジニアに異動してから、品質保証の重要性とユーザーのニーズに焦点を当てた仕事に取り組んでいます。お客様との関わりがあった経験を活かし、使いやすく信頼性の高いプロダクトを提供することに情熱を燃やしています。 アクセシビリティとは アクセシビリティに関しては、さまざまな定義が存在しますが、freeeとしては特定の個人を対象とするのではなく、すべての人に使いやすいものを提供することを目指しています。また、特定の条件での使いやすさではなく、あらゆる条件下でも使用できることを重視しています。 アクセシビリティチェックに取り組むきっかけ 元々freeeに入る前は、アク
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
ノーマルスターとグリーンスターが色弱に優しくなさすぎるからどうにかしてくれ。今更色は変えられないだろうから縁をつけるとかアクセントで縞模様にするとか。たまにもらってても誰がくれてるんかよくわからん - murlock のブックマーク / はてなブックマーク
ノーマルスターとグリーンスターが色弱に優しくなさすぎるからどうにかしてくれ。今更色は変えられないだろうから縁をつけるとかアクセントで縞模様にするとか。たまにもらってても誰がくれてるんかよくわからん
アクセシビリティ観点で必須の<label>要素について、 その重要性 なぜ重要なのか。メリット・デメリット placeholderじゃダメなのか などについてまとめます。 labelの重要性 アクセシビリティ観点でlabelはどのくらい重要なのでしょうか？ 適合レベル A 適合レベルとは、アクセシビリティ上の重要度を示す指標のことです。 WCAG 2.1の適合レベルは、レベルA、レベルAA、レベルAAAの3つに分かれています。 その中でレベルAとは、 最低限のレベルであり、達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いてもサービスを利用できないことを意味します。 なぜそんなに重要？ label要素があることのメリット 1. 選択が容易になる ラジオボタンやチェックボックスなどの小さな選択欄の場所を正確にクリック/タップできなくても、隣接するラベルをクリック/タップするこ
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、2021年のWebアクセシビリティの短期的な予測をしてみます。 Web Content Accessibility Guidelines（WCAG）2.2 いよいよ今年はWCAG 2.2がW3C Recommendation（勧告）になる年となります。WCAGを策定しているAccessibility Guidelines Working Group（AG WG）による昨年9月時点でのProject Planの情報によると、勧告までのマイルストーンは次のようになります。 執筆時点では、昨年8月11日付けのWorking Draft（作業草案）が最新の文書となります。WCAG 2.1から9つの新しい達成基準（Success Criteria; SC）が追加されており、具体的には下記に記載しているとおりです。
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
JSConfJP 2021 発表資料 昨今アクセシビリティに関する興味関心が増えてきた中で、SPAといったWebアプリケーションにおけるアクセシビリティを考慮した実装についてはまだ認識が広まっていないように感じます。 フロントエンドフレームワークを使ってより良いアクセシビリティ実装をするにはどうすればいいかの方法、その結果どういう形で伝わっているかを紹介しようと思います。 またWebアプリケーションでHTMLを使ってUI実装することに限界を感じており、それを解消するためのReactGUIやHeadless UIといった新たなアプローチにおける期待についても紹介したいと思っております。
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会をPRチーム森本さんに開催してもらいましたが、今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア向けの勉強会を開催しました。当日参加されたみなさん、伊原さん、ありがとうございました！ この記事では、目的や結果をオープン社内報でお届けします。 ❓ オープン社内報とは 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。 当日の勉強会資料 勉強会資料を確認 なぜやったのかアクセシビリティチームには、エンジニア・CS・ディレクターなど様々な職種・メンバーがサイドプロジェクトとして関わっています。しかし、ウェブエンジニアのアサインは深谷さん1人となっており、ウェブ版noteを1人でアクセシビリティ向上を行っていくことに限
公開日 2020-02-02 タグ accessibility 文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。 しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。 なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。 大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたい
Japan Accessibility Conference vol.2にymrlさん、melonさん、abeが登壇しているときの様子。撮影: © @nobjas さん この記事はfreee Developers Advent Calendar 2020の19日目です。こんにちは、freeeでiOSアプリ開発を担当している @RyoAbe です。 私は、普段はiOS版の会計freeeや人事労務freeeの機能追加や保守対応を並行しつつ、アクセシビリティ対応もやっております。 developers.freee.co.jp developers.freee.co.jp 本記事では、そもそもなぜ私がアクセシビリティに携わることとなったのかをはじめ、freeeという組織がなぜアクセシビリティに取り組んでいるのかを、これまでの活動などを交えてお伝えできればと思います。この記事を通じて、「なんかアクセ
Stay organized with collections Save and categorize content based on your preferences.
Browser support Chrome 77, Supported 77 Firefox, Not supported Edge 79, Supported 79 Safari, Not supported Source Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful. Have you ever been r
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全盲のエンジニアと働くことで見えてきたサイボウズのアクセシビリティ｜Cocoda
Webアクセシビリティ入門
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
「ビヨンセの公式サイトも訴えられた」企業Webサイトがアクセシビリティに取り組むべき理由とは？ | イベント・セミナー
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
2019年、freeeのアクセシビリティを振り返る - freee Developers Hub
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
アクセシビリティ 2021 / Accessibility 2021
アクセシビリティの指摘はなぜあんなに『めんどうくさい』のか｜平尾ゆうてん
アクセシビリティの高いデザインを実現するのに重要な「色選び」の方法とは？
Ameba Accessibility Guidelines
2020年、freeeのアクセシビリティを振り返る - freee Developers Hub
アクセシビリティ対応のついでに色々やった話 - LIFULL Creators Blog
ゼロから始めるアクセシビリティ 「Backlog」の事例に学ぶ、ユーザーのための改善とは | イベント・セミナー
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
Designing accessible color systems
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
2021年のWebアクセシビリティ | gihyo.jp
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swnjp
僕は文字だけ拡大したい - dskd
なぜ私はアクセシビリティに携わっているのか - freee Developers Hub
Learn Accessibility | web.dev
Cumulative Layout Shift (CLS)
nft-beatx.com
yasashiiijiwaru.com
nft-beatx.com
nft-beatx.com
shopping.bookoff.co.jp
www.sunday-webry.com