皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
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
弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
弁護士ドットコムでは、弱視（ロービジョン）の方をお呼びしてユーザーテストを実施しました。前回の記事では、テストを振り返りながら、その対応方法について検討しました。 そして今回は、実際に弁護士ドットコムがどう対応したのかをご紹介します。 弁護士ドットコムが選んだ道前回の振り返り会では、対応の方向として「ブランドカラーを見直すか」「あるいは最低限の箇所だけ色を変更するか」という選択肢が挙げられました。ブランドカラーの見直しが望ましいものの、これは影響範囲が大きく、サイト全体はもちろん、Webの外にまで影響が及びます。簡単には実行できません。 しかし結論としては、弁護士ドットコムはブランドカラーを見直す方向に舵を切りました。 その経緯をお話しする前に、弁護士ドットコムについて少しおさらいしておきます。弁護士ドットコムは、「弁護士をもっと身近に」というコンセプトで、弁護士と相談者をつなぐ場を提供す
アクセシビリティを考慮したマークアップをした経験がある方は、aria-labelやaria-labelledbyについてご存じでしょう。これらは、要素にラベル付けするためのWAI-ARIAプロパティです。多くの場合、要素のアクセシブルな名前 (accessible name) を決めるために使われます。 aria-labelはラベルを直接文字列として指定するプロパティで、aria-labelledbyはIDを通じて他の要素をラベルとして指定するプロパティです。その使い分けについては、仕様書[1]で以下のように説明されています。つまり、可能な場合はaria-labelledbyに寄せるべきだということです。 If the label text is available in the DOM (i.e. typically visible text content), authors SHOU
ノーマルスターとグリーンスターが色弱に優しくなさすぎるからどうにかしてくれ。今更色は変えられないだろうから縁をつけるとかアクセントで縞模様にするとか。たまにもらってても誰がくれてるんかよくわからん - 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という組織がなぜアクセシビリティに取り組んでいるのかを、これまでの活動などを交えてお伝えできればと思います。この記事を通じて、「なんかアクセ
裾野市ウェブアクセシビリティ方針|裾野市 #WCAG2_0 #レベルAA #一部準拠 #地方自治体 2024年9月10日の情報 大分県ホームページ ウェブアクセシビリティ方針 - 大分県ホームページ #WCAG2_0 #レベルAA #準拠 #地方自治体 #試験の公開 2024年9月10日の情報
Stay organized with collections Save and categorize content based on your preferences.
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va
Stark’s Public Library – Accessibility resources, guides, communities, and more
Contribute to StarkGot any accessibility resources or news? Submit a Resource
新しく公開されるWebサイトに、動きのあるものが増えてきました。このような目を引くデザインは、視覚的な効果はありそうですが、困るユーザーもおられるようです。より良いデザインにする方法を考えます。 動きのあるWebサイトとは ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。 Webサイトのトップページなどで、ずっと動き続ける画像がある Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル) 電光掲示板のように、文字がずっと流れ続ける 以下、それぞれの具体例をご説明します。具体例のサンプルページは動くWebデザインアイデア帳へリンクさせていただいています。 1. Webサイト
Top Website Accessibility Testing Tools For Inclusive Web Design
In an increasingly digital age, the internet serves as a vital resource for information, communication, commerce, and entertainment. However, for the millions of people living with disabilities, navigating the web can present significant challenges. Web accessibility addresses these challenges by ensuring that websites, tools, and technologies are designed and developed to be usable by everyone, r
こんにちは。アクセシビリティ・エンジニアのSUGIです。 私は全盲のエンジニアとして、2020年4月からサイボウズのデザイン&リサーチでお仕事をしています。 これから4回にわたって、とある全盲社員の働き方を連載していきます。第1回目はツール編です。次回以降、自己表現編・協働編・テレワーク編を連載していきます。 さて、私は就活および入社前、こんな不安を感じていました。 全盲の私が働くにあたって不安に感じていたこと ・会社ではどのようなツールが使われているのか、それらははたして使えるのか ・自己（の障害）を周囲にどう表現、どう伝えていけば良いか ・（視覚的な情報格差による）周囲との理解や作業の速度差をどう埋めていけば良いか おそらく同じような悩みを持っている方がいるのではないでしょうか。 そこで、この記事ではツール編と題して、「会社ではどのようなツールが使われているのか、それらは使えるのか」に
2024年4月1日に民間企業にも義務化される「合理的配慮」とアクセシビリティの関係を障害者差別解消法から解説します | DevelopersIO
この表の、事業者の合理的配慮の提供の部分で、現時点では「対応に努めること」とされていますが、2024年4月1日から事業者に対しても義務化されることが決まっています。 なお、東京都障害者差別解消条例では、都内で事業を行う民間事業者における「合理的配慮の提供」は、2018年から義務になっています。 また、注意が必要な点として、民間事業者において近い将来義務化されることが決まっているのは「合理的配慮の提供」であって「環境の整備」ではありません。障害者差別解消法における「環境の整備」は、引き続き努力義務のままです。「法改正でWebサイトのアクセシビリティが義務化！」という文言が見受けられますが、これは正確ではない表現となります。 B2Bの受託開発において合理的配慮の提供義務化が与える影響 ここで、企業の業務システムとして利用されるアプリケーションを受託開発する立場として、合理的配慮の義務化がどのよ
ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト | Accessible & Usable
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
freeeアクセシビリティー・ガイドライン Ver. 202408.0を公開しました & アクセシビリティー関連の問い合わせもしやすい体制作りを始めました - freee Developers Hub
こんにちは、freeeのアクセシビリティー・ガイドラインおじさんの中根です。 1年ほど前にこちらで書いた記事で触れた健康年齢、1年後の健康診断の結果によると10歳くらい下がって、実年齢とほぼ一致しました。こんなに値がぶれるものに一喜一憂するのは馬鹿馬鹿しいので、今後は気にせず暮らしていくことにしました。 さて、こちらに書くのは久しぶりですが、例によってfreeeアクセシビリティー・ガイドラインの更新情報です。 そして、今回はそれに加えて、freeeのプロダクトをご利用いただいている方や導入を検討してくださっている方などからの、アクセシビリティーに関連するお問い合わせをしていただきやすくなることを目指して始めた施策についても、簡単に紹介します。 最新版はVer. 202408.0 freeeアクセシビリティー・ガイドライン Ver. 202408.0リリース・ノート こちらで最後に更新情報を
デザイナーとしてのアクセシビリティとの向き合い方｜ymrl
freeeで私はアクセシビリティチェック体制を整備したり研修やったり、アクセシビリティまわりのことをいろいろやってきました（詳しくは、去年までのは「2021年、freeeのアクセシビリティを振り返る」やそこから辿れる過去の記事に、今年のは12日にきっと magi さんが書いてくれます→「2022年、freeeのアクセシビリティを振り返る」が公開されました！）。 たまたま先日、新しく入社してアクセシビリティ研修を受けたデザイナーと話したとき、そういえばデザイナーになってからどういう気持ちでやっているのかを表明していなかったなと思ったので、改めて書いてみます。 デザイナーの作るものには、アクセシビリティはもともと存在しているここ1年以上、freeeに入社する人や、業務委託として参加してくださる方向けにアクセシビリティの話をしているので、もう数百人にアクセシビリティというものの説明をしているはず
@storybook/cli - Storybook
2019 年 8 月末、HTML LS で、autofocus 属性がグローバル属性となった。 ブラウザの対応が進めば、全ての要素で autofocus を使用できる。 autofocus属性とは autofocus 属性は、ページの読み込み時に自動的にフォーカスする要素を指定するもの。 これまで autofocus は、button, input など、フォーカス可能な要素でしか使用できなかった。 一方で、全ての要素は、tabindex または contenteditable 属性を追加することでフォーカスが可能である。 したがって、autofocus は全ての HTML 要素で使用できるべき、という内容の Issue が 4 月に上がってた。 Move autofocus content attribute to HTMLElement · Issue #4563 · whatwg/h
The woman who will decide what emoji we get to use 世界共通言語になった 「絵文字」の未来、 初の女性委員長が語る 絵文字（emoji）は、テキストメッセージに微妙なニュアンスを追加する手法としてネットで多用されている。絵文字を標準化するユニコード・コンソーシアムの絵文字小委員会の委員長に就任したジェニファー・ダニエルが、自らの役割や絵文字の未来について語った。 by Tanya Basu2021.05.24 45 18 3 「絵文字（emoji）」は、今では人々の言語の一部となっている。よほど変わった人でない限り、メールやインスタグラムの投稿、ティックトック（TikTok）の動画に、表現力を高めるさまざまな小さな画像をちりばめていることだろう。例えば、予防接種を受けた時の血が少し滴る注射器💉 や、「ありがとう」の意味を込めた祈りの手🙏
ツッコミが追いつかないというのは、こういうことを指すの…？ ハザードマップのユニバーサルデザインに関する検討会 - 国土交通省水管理・国土保全局 障害等に対応する一人ひとりのニーズに応じた水害リスク情報提供のあり方を検討する有識者会議を開催します！ ～ハザードマップのユニバーサルデザインに関する検討会（第１回）の開催～ - 国土交通省 ハザードマップは、主に地図上に水害リスクに関する情報を示すものですが、視覚等に障害を有する場合は紙面等の情報を取得することが困難であること、また、自身のリスクが把握しづらく、避難行動に役立ちにくいという意見もあることから、一人ひとりの環境やニーズに合ったリスク情報提供のあり方を整理するため、「ハザードマップのユニバーサルデザインに関する検討会」を設置し、令和３年１２月２３日（木）に第１回検討会を開催します。 という趣旨らしいです。これまで検討会は4回開催され
React Aria
Bring your own styles. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Learn more <DatePicker> <Label>Date Planted</Label> <Group> <DateInput> {segment => <DateS
あなたが今！やるべきことがわかる「LIFULLアクセシビリティガイドライン」を公開しました - LIFULL Creators Blog
こんにちは、フロントエンドエンジニアの嶌田です。 アクセシビリティは今まで以上に大きな関心を寄せられるトピックになってきたように思います。個人で関心がある人、企業のなかで周りを巻き込み推進しようとしている人、すでに組織全体での取組みに変わりつつある企業など、状況は様々だと思います。弊社はというと、内側からの推進活動は広がりを見せつつも、まだ組織一丸となった取組みには至っていない、といったところです。 そんな状況の私たちですが、社外のアクセシビリティを推進する同志たちに、ほんの少しでも力を分け与えられたらと思い、このたび「LIFULLアクセシビリティガイドライン」を公開しました。取組み状況が様々ある中でどのように活かしていけるか、まずは一度ご覧いただければ幸いです！ lifull.github.io アクセシビリティとは？ アクセシビリティとは、高齢者や障害者を含むできるだけ多くの人々に対し
アクセシビリティを普段の開発に定着させるためにやったこと #STORESアドカレ - STORES Product Blog
STORES Advent Calendar 2022 の 24日目の記事です。 こんにちは。業務委託で STORES の開発をしている @inouetakuya です。 昨年のアドベントカレンダーでも アクセシビリティについての記事 を投稿し、そのなかで、 hey もアクセシビリティの取り組みはまだ始まったばかりで、目標としている「普段の開発に定着させる」というところまでの道のりは遠いですが、2022年も前に進めていく所存です。 と書きました。 今回は続編として、今年 2022年に、アクセシビリティを普段の開発に定着させるために行った取り組みを紹介します。 2021年のおさらい - 学習と実践 2022年のスタート地点がどのような感じだったかをお伝えするために、2021年の取り組みにも触れておきます。 2021年は STORES にとってアクセシビリティ元年とも呼べる年で、アクセシビリテ
トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。 トグルスイッチの定義 トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。 一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide
掲載：2021年8月9日 更新：2022年4月10日 更新履歴 2022年4月10日：本調査の報告会のレポートへのリンクを追加 参考：イベント・レポート：第1回支援技術利用状況調査結果報告会 はじめに この報告書は、日本視覚障害者ICTネットワーク (JBICT.Net) が2021年4月から5月にかけて実施した第1回支援技術利用状況調査の結果をまとめたものです。 調査概要 本調査は、2021年4月21日から5月31日の期間実施し、Webとメールで回答を受け付けました。 上記期間中に344件の回答が寄せられました。このうち、Webによる回答が318件（92.44パーセント）、メールによる回答が26件（7.56パーセント）でした。 344件の回答のうち、336件（97.67パーセント）が有効回答でした。 必須の設問への回答が記入されていなかったもの、記入されたメール・アドレスが明らかに誤って
WINTICKETでは誰もが公営競技を楽しむことができるよう「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを目標とし、アクセシビリティの向上に取り組んでいます。 対象範囲WINTICKETサービス https://www.winticket.jp 以下 目標とするレベルJIS X 8341-3:2016のレベルAに準拠 本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による 「ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。 追加する達成基準1.4.3 コントラスト（最低限レベル）の達成基準（AA）2.4.7 フォーカスの可視化の達成基準（AA）例外
Markuplint - An HTML linter for all markup developers. | Markuplint
Conformance checkingThe markup needs to written valid code. This is important to keep the promise of the standards that do not break webpages through each user agent. Markuplint can conformance checking given the specs that are HTML Standard, WAI-ARIA, and more. On Your House RulesYou may have the house rules on your project or your organization. You can check based on your policy or your manageme
障がい×美容が当たり前の社会をつくる。私たちは障がい者の「美容を楽しむ」という可能性を拡げ より多くの人が選択肢を持てる未来への社会環境をつくります さまざまな想いを持つ障がい者の方と共に 美容を通した持続可能なバリアフリー社会を目指します 初めまして。 アクセシビューティー代表の 臼井理絵です。 みなさんは、ご存じでしょうか？ 障がいがある人たちにとって 「美容サロンへ行くことが困難なこと」 「美容技術を学ぶ学校に入学できないこと」 「美容職を目指すこと事体がタブーとされること」 これらはもちろん、社会的に禁止されていることでなく 当事者たちの人生にはばかるグレーゾーン。 設備的問題や健常者との間に生まれる壁、 そんな社会の中で“少数派”として生き抜くことの難しさ。 また、障がい者という理由での自信のなさが彼女たちをより一層、 美容から遠ざけているのです。 “美容の力で人生は変えられる”
noteでは2021年に入ってから、本格的にアクセシビリティの向上に取り組んでおり、今では社内でもかなり浸透してきました。 そこで今回は、今年6月に公開した記事「noteのアクセシビリティ向上プロジェクトが始動」のアンサーとして、アクセシビリティチームの仙田が2021年のnoteのアクセシビリティ向上の取り組みを時系列でご紹介します！ 機能の改修だけではなく、社内浸透のために行った勉強会や仕組み作り、外部での登壇、ユーザーインタビューなど、アクセシビリティに関わる取り組みを丸ごとお伝えしていきます。 1月magiさん座談会、そしてチームに加入これまでnote社ではアクセシビリティ向上の話がたびたびあがるものの、対応の優先度をあげることができず、プロジェクトとして発足することはありませんでした。 しかし、アクセシビリティの専門家であるmagi（伊原力也）さんと元同僚だったエンジニアが声をかけ
WhoCanUse
Can distinguish all three primary color, little to no blurriness
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは - amanaINSIGHTS（アマナインサイト）
UPDATE 2020 07/09 オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは 東京都が3月4日にリリースした新型コロナウイルス感染症対策サイト。一番の特徴は非営利団体・Code for Japanに所属するエンジニアやデザイナーが中心となり、オープンソースで開発された点にあります。刻々と変化する状況とともにブラッシュアップした制作内容と、国民の関心度が高い新型コロナウイルス関連情報のビジュアライズのポイントについて、広報の陣内一樹さん、エンジニアの今村かずきさん、デザイナーの林敬子さんに伺いました。 サイト構築を手がけた3000人のオンラインコミュニティ、Code for Japanとは？ ――まずCode for Japan設立の経緯と普段の活動について教えてください。 陣内さん（以下、陣内。敬称略）：Code for Japanは
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
Designing accessible color systems
aria-labelとaria-labelledbyを併用する場合とは
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
2021年のWebアクセシビリティ | gihyo.jp
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swn.jp
僕は文字だけ拡大したい - dskd
なぜ私はアクセシビリティに携わっているのか - freee Developers Hub
ウェブアクセシビリティ方針まとめ | 福岡・北九州のウェブアクセシビリティ専門web制作会社
Learn Accessibility | web.dev
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
:user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする | DevelopersIO
とある全盲の新入社員の働き方 ～ツール編～｜blindsoup
autofocusがグローバル属性になったのでなんか書く | きるこの日記帳
世界共通言語になった 「絵文字」の未来、 初の女性委員長が語る
東京ニトロ 🍉𝙏𝙤𝙠𝙮𝙤𝙉𝙞𝙩𝙧𝙤 on X: "おれはイオンシネマに怒っている。というのも今回の件で、イオンシネマのバリアフリー対応を調べようとしたら、ウェブサイトの時点でバリアと不平等があるからだ。 https://t.co/v4Z5yMV1zp" / Twitter
国交省ハザードマップ検討会のWebアクセシビリティの認識が詰んでいる - 水底の血
ユーザーが迷わないトグルスイッチの使い方 | ベイジのUIラボ～業務システムとSaaSのUIを考える
第1回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
ウェブアクセシビリティについて【WINTICKET(ウィンチケット)】
株式会社accessibeauty | アクセシビューティー
プロジェクト発足から1年。noteのアクセシビリティ向上を振り返る｜note株式会社
aria-labelで始める、アクセシビリティ改善活動