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.
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には
視覚障がい者はiPadを使えるか？ | イソムラ式
イギリスの視覚障がい者を支援する「Royal National Institute of Blind People (RNIB)」が発行する機関紙に、盲人と弱視者によるiPad操作レビューが掲載されている。要約を紹介します。 「iPadは、音声読み上げ機能、画面拡大機能、画面コントラスト調整機能が予め搭載されている。しかしアクセシビリティは十分なのか？ テクノロジーにも精通する盲人と弱視者の2名が評価にあたる。 本体は薄く軽い。長時間のホールドは快適ではないかもしれない。弱視者にとって画面は明るく精彩で見やすい。但し、iPadに限定した課題ではないが、操作角度によっては光が反射して見にくいことがある。もっともノングレアシートなどで対応は十分可能だ。 iPadは200倍まで拡大できる機能を有するが、拡大時でもテキストは鮮明で読みやすい。更に印象的なのは幾つかのアプリケーションで使える”つまむ
Pa11y Here at Pa11y, we think making the web more accessible improves it for everyone. So we publish a range of free and open source tools to help designers and developers make their web pages more accessible: Pa11y A command-line interface which loads web pages and highlights any accessibility issues it finds. Useful for when you want to run a one-off test against a web page. Pa11y Dashboard A we
QAが率先してアクセシビリティチェック品質をリードしたらいいことづくしだった - freee Developers Hub
こんにちは。freee人事労務でQAエンジニアをしているshihoです。 freee QA Advent Calendar2023 15日目です。 自己紹介 元カスタマーサポートで、2016年8月にfreeeに入社しました。3年前にQAエンジニアに異動してから、品質保証の重要性とユーザーのニーズに焦点を当てた仕事に取り組んでいます。お客様との関わりがあった経験を活かし、使いやすく信頼性の高いプロダクトを提供することに情熱を燃やしています。 アクセシビリティとは アクセシビリティに関しては、さまざまな定義が存在しますが、freeeとしては特定の個人を対象とするのではなく、すべての人に使いやすいものを提供することを目指しています。また、特定の条件での使いやすさではなく、あらゆる条件下でも使用できることを重視しています。 アクセシビリティチェックに取り組むきっかけ 元々freeeに入る前は、アク
Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ＋絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか？そもそも読み上げられているのでしょうか？ サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています（英語のみ）。 iOS の VoiceOver は、特別なアプリをインストールしなくてもす
2004年６月に出された JIS X8341-3（高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第三部：ウェブコンテンツ）は、2009年が工業標準化法による５年サイクルの見直しの時期にあたり、技術の進歩や、国際基準のWCAG 2.0との整合性などを考えて、2010年８月20日には改正されました。 改正版との違いを簡単にまとめると、 改正版では、WCAG 2.0（Web Content Accessibility Guidelines 2.0）との国際協調を大きな柱としているため、世界標準と共通の達成基準及び実装方法になりますが、支援技術のサポート状況などによっては、日本のユーザーに合わせた対処をしなければならない可能性があります。 改正版では、決められた試験を通して適合の有無を客観的に証明できるようになり、「JIS Q 1000 適合性評価・製品規格への自己
リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。 Yahoo! User Interface Blogより もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。 Yahooが調べたのは以下のリンクです。 通常のテキストとそれに対するリンク テキストもtitle属性もないリンク title属性はあるが、テキストがないリンク テキストの代わりに空白を入れたリンク これらのリンクに次のCSSを当てます。 特に指定しない offscreen visibility: hidden displ
![リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca97218ef8242074e15cf05e7764859f63dc3901/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523057%2F1460995386)
2016年4月版（2016年4月7日公開） 作成者：情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会 目次 はじめに 改正における主なポイント 規格票の構成 各箇条の解説 はじめに JIS（日本工業規格）とは JIS（日本工業規格）とは、日本国内における工業標準化の促進を目的とする『工業標準化法』（昭和24年）に基づいて制定される国家規格である。「JIS」は"Japanese Industrial Standards"の頭文字をとったものであり、「日本工業規格」が正式名称である。 JIS X 8341-3とは 『JIS X 8341-3:2016』の正式名称は、『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』という。この規格でいう「ウェブコンテンツ」は、ブラウザや支援技術などのユーザエージェントを介して利用者に提供されるあら
公開日 : 2015年4月3日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 「コーディング Web アクセシビリティ - WAI-ARIA で実現するマルチデバイス環境の Web アプリケーション」の見本誌をいただきました。すでに書店に並んでいますが、ようやく読み終えましたので、感想を交えつつご紹介します。 この本は、ドイツの Smashing Magazine が出版している「Apps For All : Coding Accessible Web Applications」の日本語訳です。とても軽妙な語り口の、「リファレンス」というよりは「読み物」といった雰囲気の本で、読者に対する姿勢として「厳密さ」よりも「わかりやすさ」を大切にしている (そして徹頭徹尾その姿勢を貫いている) 本だな、と感じました。 比喩が面白かったり (たとえば、WAI-ARIA の「ロール」「
皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
弁護士ドットコムでは、弱視（ロービジョン）の方をお呼びしてユーザーテストを実施しました。前回の記事では、テストを振り返りながら、その対応方法について検討しました。 そして今回は、実際に弁護士ドットコムがどう対応したのかをご紹介します。 弁護士ドットコムが選んだ道前回の振り返り会では、対応の方向として「ブランドカラーを見直すか」「あるいは最低限の箇所だけ色を変更するか」という選択肢が挙げられました。ブランドカラーの見直しが望ましいものの、これは影響範囲が大きく、サイト全体はもちろん、Webの外にまで影響が及びます。簡単には実行できません。 しかし結論としては、弁護士ドットコムはブランドカラーを見直す方向に舵を切りました。 その経緯をお話しする前に、弁護士ドットコムについて少しおさらいしておきます。弁護士ドットコムは、「弁護士をもっと身近に」というコンセプトで、弁護士と相談者をつなぐ場を提供す
Cumulative Layout Shift (CLS) Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It's 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. Unexpected layout
WAI-ARIA珍プレー好プレー
2016年9月3日開催の「HTML5 Conference 2016」において、アクセシビリティ部 アクセシビリティ・エンジニアの黒澤 剛志が講演「WAI-ARIA珍プレー好プレー」で使用したスライドです。
誰にでも開かれたヤフーでありたい。目の不自由な人がネットを快適に使うためのアクセシビリティ検証をレポート！ - 課題解決特集 - CSR - ヤフー株式会社
こんにちは、LIGブログのバイク好き編集者、田中宏亮です。 バイクで出かける際、まず気にするのが天気です。クルマと違って雨に降られてはびしょ濡れになってしまいますから、「Yahoo!天気」アプリで行き先の予報をチェックするのが習慣化しています。 こんな風に、多くの人が日常的に利用しているであろうヤフーのサイトやアプリですが、改めていろいろ触ってみると、使いやすさを第一に考えて構築されていることに気づかされます。考えてみれば、日本中の人が利用することを目的に運営されているサイトやアプリですから、汎用性を重視した作り方になっているのは当然のことと言えます。 しかし、高齢者や、さまざまな障がいがある方にとっても使いやすいサイトとなっているのでしょうか。 今回、視覚障がいをお持ちである日本視覚障害者ICTネットワークの中根雅文さんを招いてヤフーのアクセシビリティ検証がヤフー本社にて開催されると聞き
Webアクセシビリティの勉強会に参加してから、なんやかんや忙しく1ヶ月以上経過してしまいましたが、あらためて当日のスライドを見たり、JISX8341-3（高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ）に目を通す時間ができました。ということで、今日は「アクセシビリティにおける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
ノーマルスターとグリーンスターが色弱に優しくなさすぎるからどうにかしてくれ。今更色は変えられないだろうから縁をつけるとかアクセントで縞模様にするとか。たまにもらってても誰がくれてるんかよくわからん - murlock のブックマーク / はてなブックマーク
ノーマルスターとグリーンスターが色弱に優しくなさすぎるからどうにかしてくれ。今更色は変えられないだろうから縁をつけるとかアクセントで縞模様にするとか。たまにもらってても誰がくれてるんかよくわからん
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
アクセシビリティ観点で必須の<label>要素について、 その重要性 なぜ重要なのか。メリット・デメリット placeholderじゃダメなのか などについてまとめます。 labelの重要性 アクセシビリティ観点でlabelはどのくらい重要なのでしょうか？ 適合レベル A 適合レベルとは、アクセシビリティ上の重要度を示す指標のことです。 WCAG 2.1の適合レベルは、レベルA、レベルAA、レベルAAAの3つに分かれています。 その中でレベルAとは、 最低限のレベルであり、達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いてもサービスを利用できないことを意味します。 なぜそんなに重要？ label要素があることのメリット 1. 選択が容易になる ラジオボタンやチェックボックスなどの小さな選択欄の場所を正確にクリック/タップできなくても、隣接するラベルをクリック/タップするこ
コンテンツデザインから始めるWebアクセシビリティ
理解という名のアクセシビリティ Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。 それは利用者が理解できるコンテンツを制作・配信するという課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。 単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が
「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。 どんな問題が起こるのか 「Death to Icon Fonts 」では、ディスレクシア（日本では失読症、難読症、読字障害などと呼ばれている）向けに作られたフォント「OpenDyslexic 」で問題が起こることが紹介されていて、アイコンフォントにはその他にもアクセシビリティ上の問題がいくつかあるため、使わないほうが良いと勧めています。 これはフォントを強制的にOpenDyslexicなどのディスレクシア対応のもので表示
アクセシビリティを担保するプロセス作り この記事は Web Accessibility Advent Calendar 2016 - Adventar の 12 日目の記事です。 UI 実装の再考と a11y - Frontrend Vol.8 LT でも述べましたが、Accessibility is a Process, Not a Project ということでアクセシビリティ対応するプロジェクトではなく、アクセシビリティを担保するプロセスを作りましょうということで、チェックツールをいくつか並べて俯瞰してみます。対象読者は自分と同じようなクライアントサイドの Web アプリケーション屋さんということにしておきます。 ちなみにアクセシビリティ評価ツールについては 3 日目のアクセシビリティ方針、報告書、試験支援ツールa11ycのご紹介 (Web Accessibility Advent C
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、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といった新たなアプローチにおける期待についても紹介したいと思っております。
Inclusive Components A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece. Get the book! The Inclusive Components book is now available, with updated and improved content and demos. The components:
Amazon subsidiary Zoox has begun testing its purpose-built, electric, autonomous robotaxis on public streets in Las Vegas, the company announced Tuesday. Zoox says this marks the first time that an au We are only scratching the surface of how artificial intelligence might be used in art, and musicians are already experimenting with the technology. But if their AI-assisted composition is to be elig
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
日本規格協会 JSA GROUP Webdesk
★商品の発送に関するお知らせ★ 2024/03/04 平素より当協会のJSA Webdeskをご利用いただき有難うございます。 3月29日(金)に実施いたします棚卸に伴い、3月27日（水）午後以降にご注文いただきました商品は、4月1日（月）以降に順次発送いたします。 ※ダウンロード商品は除きます。 お客様にはご迷惑をおかけいたしますが予めご了承願います。 ★閉店時間に関するお知らせ★ 2024/03/04 3月29日(金)に実施いたします棚卸に伴い、当日のライブラリ・販売所（三田ＭＴビル1階）の営業時間を12：00までとさせていただきます。 お客様にはご迷惑をおかけいたしますが予めご了承願います。 工業標準化法改正に伴うJIS規格名称変更のお知らせ(2020年6月22日更新) 2020/06/22 2020年6月吉日 お 客 様 各 位 日本規格協会グループ 出版情報ユニット 工業標準化法
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会を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.
https://chromelens.xyz/
Home
W3C仕様日本語訳置き場Wiki W3C仕様（等）の日本語訳置き場。コミットログはリポジトリからどうぞ。 WHATWG HTML HTML Standard HTML Standard Developer's Edition WikiのWHATWG HTMLも参照ください。 HTML関連文書 ARIA in HTML （HTMLに使用できるARIAを記した著者向け文書） ITS 2.0 （Internationalization Tag Set (ITS) Version 2.0） ARIA関連 WAI-ARIA 1.2 WAI-ARIA 1.1 WAI-ARIA 1.0 Accessible Name and Description Computation 1.1 WAI-ARIA Graphics Module Digital Publishing WAI-ARIA Module 1.
僕は年間で見て4〜5回くらい間違って女子便に入ってしまうのだけれども、それは単に僕がぼーっとしていて間違ってしまうのではなく、男子便として認識して入った結果、女子便だったというものです。 つまり、僕（色弱の人）から言わせれば、標識が悪いという意見になるのだけれども、実際は「何故」色弱の人が間違ってしまうのかというメカニズムの情報が不足しているので、別に僕自身も仕方ないことだと思っているし、僕が間違わなくなったからと言っても、全ての色覚障害の人にとって、この問題が解決されると言えないところが難しい。 でもまぁ、僕が何故間違ってしまうのかをせっかくなので書いておこうと思います。 1. 入口が男子と女子で離れている 男子と女子の入口が同じ場所にあり、左右に分かれている場合は、ほぼ間違うことがない。これは、両者を同時に比較することが可能であるからだ（これ超重要）。 逆に入口が離れていて同時に比較で
A11Y Style Guide
This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide. Why did this project start? We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer,
Frontrend Vol.10 - 夏の終わりに納涼パフォーマンス話 に行ってきた - dackdive's blog
行ってきました。 絶対ブログ書く人類枠だったのでブログ書きます。 ハッシュタグは #frontrend。また動画が FRESH! で観られます。 https://freshlive.tv/tech-conference/151511 FRESH! クライアントサイドパフォーマンス改善 FRESH! 鈴木雅佳 ( @sutiwo_ ) さん FRESH! 生放送動画見放題の映像配信プラットフォーム アクセシビリティガイドラインも公開してるらしい https://openfresh.github.io/a11y-guidelines/ 話すこと Service Worker で静的アセットのキャッシュ Intersection Observer で遅延ロード SVG スプライトやめてプログレッシブなロード 1. SW で静的アセットのキャッシュ 設計方針と実装方法 キャッシュがあればキャッシュ
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件
Pa11y
絵文字のアクセシビリティについて少し調べてみた : could
新JIS規格ウェブコンテンツ（JIS X 8341-3:2010）
リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]
JIS X 8341-3:2016 解説
コーディング Web アクセシビリティ | Accessible & Usable
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
Cumulative Layout Shift (CLS) | Articles | web.dev
あなたの作ったサイトは大丈夫？Webアクセシビリティの観点からチェックすべき「色」のこと。
Designing accessible color systems
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について
Web アクセシビリティ向け Node.js 製の自動チェックツールや DevTools 用の拡張機能など
2021年のWebアクセシビリティ | gihyo.jp
Inclusive Components
TechCrunch | Startup and Technology News
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swnjp
僕は文字だけ拡大したい - dskd
なぜ私はアクセシビリティに携わっているのか - freee Developers Hub
Learn Accessibility | web.dev
色弱の人が間違えやすい、男子便と女子便。 - 日々、とんは語る。
ヘッダーを固定した表のアクセシビリティ - Qiita