並び順

ブックマーク数

期間指定

  • から
  • まで

161 - 200 件 / 287件

新着順 人気順

A11Yの検索結果161 - 200 件 / 287件

  • 意外と知らないvisibilityの活用方法! | フロントエンドBlog | ミツエーリンクス

    ※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる(値がhiddenやcollapaseになる)と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla

      意外と知らないvisibilityの活用方法! | フロントエンドBlog | ミツエーリンクス
    • 第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp

      しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le

        第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
      • アクセシビリティ推進組織立ち上げ後半年間の動き - LIFULL Creators Blog

        こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ(以下推進グループ)に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させていただこうと思います。 立ち上げにあたっての話については以前同グループの嶌田が投稿した記事があるのでそちらをご参照ください。 www.lifull.blog 部署の目指すべきゴールイメージと行動軸 プロダクトに対する直接的な品質改善活動 新しい負債の発生を低減させるための文化醸成 指標化 プロダクトに対する直接的な品質改善活動の指標化 マニュアルテスト スコアリング 加えたマニュアルテスト項目とその重み Lighthouseの推奨するマニュアルテス

          アクセシビリティ推進組織立ち上げ後半年間の動き - LIFULL Creators Blog
        • アクセシビリティチェックってどうやってるの?ということで、実際にやってみた。(その3) - 水底の血

          アクセシビリティチェックってどうやってるの?ということで、実際にやってみた。(その1)、(その2)の続きです。 おさらい 対象ページ:「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌1【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準:WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きに入っていきましょう。 「ABOUT」セクション アクセシビリティチェックの経験がある

            アクセシビリティチェックってどうやってるの?ということで、実際にやってみた。(その3) - 水底の血
          • アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか

            本記事は<svg>要素のみを持つ<button>要素(アイコンボタン)にアクセシブルな名前(accessible name)を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素

              アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
            • Webアクセシビリティ対応で“ブランドカラー”を変更 → 結果的にサイト流入も増えた | 【レポート】Web担当者Forumミーティング 2021 秋

                Webアクセシビリティ対応で“ブランドカラー”を変更 → 結果的にサイト流入も増えた | 【レポート】Web担当者Forumミーティング 2021 秋
              • ウェブアクセシビリティについてとあるツイートを枕にしてつれづれなるままに書いたら最後に政治の話になってた件 - 水底の血

                書き殴りでロクに推敲をしていないのであんまり真に受けないような方向でひとつ Twitterネーム@_tsmdさんからっ*1 会社でアクセシ活動してて思うけど、アクセシビリティの認知度とか「大事だと思っている」って認識はずいぶん広まっているみたい。でもやるためのお墨付きがないとか、どこから着手すべきかわからない、何をすればいいのかわからない、みたいのが多い。— そめ (@_tsmd) 2020年10月14日 要はプライオリティが高くないのである。他にいろんな大事なことがあるから。大事さの絶対的指標は特になく、なんとなく決まるのではないか。「最近ちょくちょく耳にするな」とか「あの人が言ってたからそうなんだろう」とか— そめ (@_tsmd) 2020年10月14日 時間は限られているけれども、個人的な実践といういちばん小さいところから、えらいひとにトップダウンを働きかけてもらう取り組みまでの振

                  ウェブアクセシビリティについてとあるツイートを枕にしてつれづれなるままに書いたら最後に政治の話になってた件 - 水底の血
                • GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

                  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                    GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
                  • ソニーのイメージング技術でロービジョン者の創作意欲に寄り添う網膜投影カメラキットを発売

                    報道資料 ここに掲載されている情報は、発表日現在の情報です。 検索日と情報が異なる可能性がございますので、 あらかじめご了承ください。 2023年2月21日 ロービジョン者※1の創作意欲に寄り添う網膜投影カメラキットを発売 ソニーのイメージング技術が、"見えづらい"を"見える"に変えるプロジェクト「With My Eyes」をサポート ソニーは、デジタルスチルカメラ サイバーショット®『DSC-HX99』と、株式会社QDレーザ(以下、QDレーザ社)のレーザ網膜投影技術を応用したビューファインダー『RETISSA NEOVIEWER (レティッサ ネオビューワ)』※2を組み合わせた、網膜投影カメラキット『DSC-HX99 RNV kit』を、数量限定で発売します。 本商品の発売は、当社が主要賛同企業として参加している、QDレーザ社が展開するロービジョン者の"見えづらい"を"見える"に変えるプ

                      ソニーのイメージング技術でロービジョン者の創作意欲に寄り添う網膜投影カメラキットを発売
                    • WCAG2の「十分な達成方法」について - 水底の血

                      あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の(種類の)エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる:

                        WCAG2の「十分な達成方法」について - 水底の血
                      • APCA Contrast Calculator

                        Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA

                          APCA Contrast Calculator
                        • Accessibility Tree と Accessibility Object Model

                          TBD

                            Accessibility Tree と Accessibility Object Model
                          • フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス

                            この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの23日目の記事です。 私はWebページの検証やコンサルティングの業務を多々行っており、開発者とやり取りすることもあります。その際、開発者に「フォーカスを受け取れるように、要素のtabindex属性に-1を設定してください」と伝えると、高い確率で「tabindex属性に-1を設定するとフォーカスを受け取らなくなるのでは?」と返されます。実際のところ、tabindex="-1"はフォーカスを受け取ります。 なぜ、そのような認識の違いが起こるかというと、ある要素がフォーカスを受け取るかどうかや、受け取るかどうかを制御する方法が複雑なためだと考えています。この記事ではその複雑性と、複雑性がどう整理されようとしているかを述べます。 フォーカスを受け取る経路 Webページでは要素がフォーカスを受け取る経路は、ユーザーの利便性や歴史

                              フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス
                            • 生きづらさを、生きやすさに 大人の発達障害ナビ - 武田薬品工業 | 「大人の発達障害ナビ」

                              あなたの声を、 聞かせて ください。 「大人の発達障害ナビ」は、当事者や周囲の方の 悩みに寄り添う“大人の”発達障害の専門サイトです。 当事者の声に耳を傾けながら運営していきます。 こだわりや 決まったルーティーンじゃないと仕事ができないんです。 あわてんぼう 思いつきで行動してしまい、いつも失敗してしまうんです。 散らかしや やりかけのことで部屋がいっぱい!どうしても片付けられないんです。 わすれんぼう 大事な約束をすっかり忘れて遅刻してしまいます。 超マイペース なんとなく場違いな発言や リアクションをしているみたいです。 コミュ下手 取引先の人と雑談になると どう話していいのかわからなくなります。 一点集中 ひとつのことに夢中になるとなかなか切り替えができません。 一方通行 友達や家族とおしゃべりを するとき、自分のことばかり話してしまいます。 段取り下手 優先順位がつけられなくて

                                生きづらさを、生きやすさに 大人の発達障害ナビ - 武田薬品工業 | 「大人の発達障害ナビ」
                              • Webアプリケーションアクセシビリティ

                                伊原 力也、小林 大輔、桝田 草一、山本 伶(著)/技術評論社/ISBN-13: 978-4297133665/3,960円(税込)/576ページ/2023年2月27日 発売(ほぼ同時に電子版も発売予定)

                                  Webアプリケーションアクセシビリティ
                                • わたしとWebアクセシビリティ - note

                                  わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている(後述)。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを(偉そうに!)したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考えてしまうからだ。 更に今まで、個人事業主などでもないことをいいことに「自分の情報」をまとめることを避けてきた。 そろそろきちんと考え方などまとめる時期ではないかと、画面に向かっている。 わたしにとって

                                    わたしとWebアクセシビリティ - note
                                  • 民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス

                                    年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項(案)では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン(2016年版)では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消

                                      民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
                                    • Don't disable buttons

                                      One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form

                                        Don't disable buttons
                                      • freee Accessibility Training

                                        はじめに このサイトでは、Web サイトを実装する際に作ってしまいがちなアクセシビリティ上の問題と、それが起きにくくなるような実装の例を紹介しています。 freee アクセシビリティー・ガイドラインとあわせて見ることで、Web アクセシビリティへの理解を促進することを目的としています。 ただ各ページを見ていくだけでなく、キーボードのみによって操作したり、スクリーンリーダーで操作したり、開発者ツールで DOM の状態を見たりしてみてください。 キーボードで操作してみよう スクリーンリーダーを使ってみよう 画像 リンク ボタン フォーム 見出し 言語 ランドマーク ステータスメッセージ アクセシビリティチェックの練習ページ

                                        • W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス

                                          2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村(直) Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft(初期公開作業草案)として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract(概要)には以下の1文が記載されています。

                                            W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
                                          • アクセシビリティの二重性|UMEGAKI Masahiro

                                            アクセシビリティ Advent Calendar 2020 の記事です。https://adventar.org/calendars/5011 よし分かった!アクセシビリティって大事だよねって思って取り組むじゃないですか。これ読んでる人って、最初から関心があって読んでる、もうすでに取り組んでいる人たちなわけでしょ?こういう人をAチームって呼びましょうか。 Aチームメンバーって、たいていある種のダブルバインド状態に陥るのですよ。でもそれって、日本固有の現象なんじゃないかなぁって思うのです。そこを掘り下げてみようといというのが、本稿の狙いです。 アクセシビリティについて、よくこんな説明を受けませんか?「アクセシビリティは障害者の(交通、建築、情報)アクセスを確保していく取り組みである」「と同時に、高齢者などのより広い人たちにも役立ちます」って。これって、JIS X8341-1 あたりから意図的

                                              アクセシビリティの二重性|UMEGAKI Masahiro
                                            • アクセシビリティについて

                                              アクセシビリティについて ウェブアクセシビリティ方針 誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す Amebaはこれまでもユーザーの生活に寄り添ってきました。 「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」をミッションに掲げ、ユーザーの「変化」にも寄り添っていきます。 今利用しているユーザーが歳をとっても、怪我や眼鏡を忘れてしまったときにも、ユーザーが日々遭遇するあらゆる環境や状況の変化が障害になるデザインであってはいけません。 アクセシビリティを高めると、障害者や高齢者、子どもも含めた誰もが使えるようになります。 そしてそれは、いつでも使いやすいにつながります。 Amebaはミッションの追求のために「誰もがいつでも、迷わずコンテンツを楽しむことができる」サービスを目指し、これからもアクセシビリティの向上に取り組みつづけていきます。 アクセシビ

                                                アクセシビリティについて
                                              • Overlay Fact Sheet

                                                What is a web accessibility overlay?Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website. Website add-on products claiming to improve accessibility go back to the late 1990s with products like Readspeaker and Browsealoud. They added text-to-s

                                                • 電子図書館のアクセシビリティ対応ガイドライン1.0|国立国会図書館―National Diet Library

                                                  国立国会図書館 図書館におけるアクセシブルな電子書籍サービスに関する検討会 令和5年7月 ※本書は、クリエイティブ・コモンズ・ライセンス 表示 4.0 国際(CC BY 4.0)に従って利用が可能です 「電子図書館のアクセシビリティ対応ガイドライン1.0」について、ご意見・ご要望のある方は以下のメールアドレスまでお知らせください。 総務部企画課企画係 電話:03-3581-2331(代表) メールアドレス:a11y-dl (電子図書館のアクセシビリティ対応ガイドライン1.0(PDF: 1.95MB)は国立国会図書館デジタルコレクションからご覧いただけます。) 令和元年6月、「視覚障害者等の読書環境の整備の推進に関する法律」(令和元年法律第49号。以下「読書バリアフリー法」という。)が施行された。令和2年7月には、同法第7条の規定に基づき、文部科学省及び厚生労働省において「視覚障害者等の読書

                                                  • Accessibility testing with Storybook

                                                      Accessibility testing with Storybook
                                                    • とってもやさしいウェブアクセシビリティチェックリスト|i3DESIGN Designers

                                                      こんにちは!i3DESIGNデザイナーチームです。 今回は、先日発刊させて頂きましたホワイトペーパー”とってもやさしいウェブアクセシビリティチェックリスト”の一部を記事にまとめたいと思います。 ホワイトペーパーには、ウェブアクセシビリティチェックリストというシートがあります。 このシートは、JIS X 8341-3:2016(アクセシビリティについてのJIS規格)に基づき、私たちの解釈で分類・文章を再構成しました。 エンジニアやデザイナーでない方でも理解しやすいよう、一部内容を簡略化したり、複数の達成基準をひとつにまとめたりしている箇所があります。 このチェックリストを「現在提供しているウェブサービスが、どこまで達成できているのか」を図る指標として、ご活用ください。 👇ウェブアクセシビリティチェックリストがついているホワイトペーパー”とってもやさしいウェ

                                                        とってもやさしいウェブアクセシビリティチェックリスト|i3DESIGN Designers
                                                      • GitHub - yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ(随時更新)

                                                        You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                          GitHub - yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ(随時更新)
                                                        • やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)

                                                          この記事は アクセシビリティ Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は PowerCMS X Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は やさしい日本語 Advent Calendar 2021 アイコン別ウィンドウで開きます の第10日目の記事です。 ※ Advent Calendar用に新規記事の作成も考えましたが、ルビをフル活用した ウェブコンテンツに関する実装ノウハウとして纏まっているほうが後の役に立ちそうだったので大幅に加筆して、改訂版としました。 「やさにちウォッチ」 アイコン別ウィンドウで開きますは私たち(アルファサード株式会社) アイコン別ウィンドウで開きますが運営する「やさしい日本語の情報をやさしい日本語で発信する」オウンドメディアです。す

                                                            やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)
                                                          • board(SaaS)のアクセシビリティー改善の取り組みの現在地(2022年10月) - ヴェルク - IT起業の記録

                                                            boardという見積書・請求書等の作成を中心とした業務管理のSaaSのアクセシビリティー改善に取り組んでいるので、その内容や現在の状況について書きたいと思います。 これまでの取り組みの流れ 2021年11月に「Webアクセシビリティー向上のための取り組みについて」というアナウンスを出しましたが、2021年夏ごろから準備をスタートし、2022年からアクセシビリティー改善に関するデプロイを継続的に行っています。 boardではこれ以前の2019年に、色覚特性を考慮した配色にするカラーユニバーサルデザイン(CUD)の取り組みを行っています。NPO法人「カラーユニバーサルデザイン機構(CUDO)」に検証を依頼し、同機構が発行するカラーユニバーサルデザイン(CUD)認証を取得していました。 tamukai.blog.velc.jp 今回の取り組みは、WCAG(Web Content Accessib

                                                              board(SaaS)のアクセシビリティー改善の取り組みの現在地(2022年10月) - ヴェルク - IT起業の記録
                                                            • Dark Mode vs. Light Mode: Which Is Better?

                                                              Summary: In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia. Introduction Recently, spurred by the introduction of dark mode in IOS 13, a reporter asked me to comm

                                                                Dark Mode vs. Light Mode: Which Is Better?
                                                              • a11y を強化する ReactComponent の型推論

                                                                次の Button は tag の指定により、HTML 要素を出し分ける Component です。出力結果は下段のとおりです。この Component を通し a11y を強化する型注釈を考察したので、メモとして投稿します。 <Button tag="button">+1</Button> <Button tag="a" role="button">+1</Button> <Button tag="input" type="button" value="+1" />

                                                                  a11y を強化する ReactComponent の型推論
                                                                • Ariakit - Toolkit for building accessible UIs

                                                                  Build accessible web apps with ReactOpen-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps. Search for usersEscHarry PoeJohn Doe DeleteJane DoeSophie PoeTom DoeDelete userAre you sure you want to delete this user?CancelDelete

                                                                  • Web アクセシビリティの検証ツール「acot」 / masuP.net

                                                                    同僚の @wadackel とウェブアクセシビリティの検証ツール acot (アコット)を作っていて、まだまだ途中だけど、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったのでご紹介。 https://github.com/acot-a11y/acot すでにWeb アクセシビリティの検証ツール acot を作ってる - wadackel.meで詳しく紹介されているので、私の記事では補足的にacotを作るモチベーションや経緯、アイデア、どんなルールが書けるかなどを紹介する。 モチベーションとか経緯とか 以前に @wadackel と開発していたWINTICKETというサービスでは、ウェブアクセシビリティに関する開発ポリシーとコードレビュー、そしてeslint-plugin-jsx-a11yによって一定の品質が保たれていた。 ウェブアクセシビリティ -

                                                                      Web アクセシビリティの検証ツール「acot」 / masuP.net
                                                                    • A11yAutomation

                                                                      A11y Automation Tracker A more thorough way to track the potential accessibility violations and the automated linters and tests currently available. Accessibility Automation Catch potential a11y violations faster. It can be hard to keep track of the potential accessibility violations in your code. More automation is being created for linting rules and tests-- and now there is a single site to trac

                                                                      • Redirecting to https://comica11y.humaan.com

                                                                        • APCA何もわからない - Qiita

                                                                          Accessible Perceptual Contrast Algorithm(APCA)はWCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムです。 つたない英語力でそのコンセプトや概略を読み込んでみて、なんとなく以下のように理解しました。 コントラストというのは単純な背景色と前景色の差分だけで判断できるものではない。錯覚とかあるからね。フォントのサイズやウェイト、行間、コンテキストなどから総合的に知覚されるものだ、ということらしい。 文字の読みやすさに影響するコントラストの知覚に関しては、フォントサイズやウェイトなどからなる空間周波数の影響をとくに受ける。 空間周波数はWikipediaによると「空間的な周期をもつ構造の性質」とのこと、なんとなく一定の二次平面上のパターンの複雑さってことかなぁ?このパターンの刺激が一定程度を超えると知覚できるよう

                                                                            APCA何もわからない - Qiita
                                                                          • The Myths of Color Contrast Accessibility

                                                                            There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies. Not only that, but they assu

                                                                              The Myths of Color Contrast Accessibility
                                                                            • a11y由来のスタイリング考察

                                                                              aria属性 や role属性 を用いたスタリング実例は、まだあまり聞くことがありません。例えば CSS Modules の場合次の様な指定が可能であり、a11yとスタイリングを両立できるため、アプローチとして良さそうと考えています。 .text { color: #000; } .text[aria-invalid=true] { color: #f00; /* エラーの表現とか */ } .menu[aria-expanded=false] { display: none; /* メニューの開閉表現とか */ } .menu[aria-expanded=true] { display: block; /* メニューの開閉表現とか */ }

                                                                                a11y由来のスタイリング考察
                                                                              • markuplint で HTML の構文チェックを始めよう

                                                                                ブラウザが HTML を解釈する方法はその他のプログラミング言語と比べてはるかに寛容です。ブラウザは HTML 内に構文エラーを発見しても大抵の場合は問題なくページに表示されます。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるためです。 例として以下のコード例を確認してみましょう。<ul> タグは仕様でその子要素には 0 個以上の <li> タグまたは script supporting elements (<script> と <template>)のみが許可されています。従って、<ul> タグの子要素に <a> タグを配置している以下のコードは構文エラーとなります。 <ul> <a href="/home">Home</a> <a href="/about">About</a> <a href="/blog">Blog</a> <a hre

                                                                                  markuplint で HTML の構文チェックを始めよう
                                                                                • AtomicDesign の仕分けをテストで判定する

                                                                                  AtomicDesign には「Atoms か Molecules か?、Molecules か Organisms か?」の判定が悩ましい…という課題があります。これは、フロントエンド・デザイナー間ではもちろん、デザイナー同士でも解釈差異があるようです。明確な判定軸がなければ、いずれブレが生じ、規律のないデザインシステムになりかねません。 この状況に対し「アクセシビリティを軸にする」という発想に至り、どのように仕分けるかを先日の投稿で紹介しました。このアイディアはタイトルのとおり「テスト」で機械的に判定可能です。 AtomicDesign カスタムマッチャー関数 「AtomicDesign の仕分けをテストで判定する」ために、独自のカスタムマッチャー関数を設けます。普段利用している'@testing-library/jest-dom'もカスタムマッチャーのライブラリですが、このカスタムマ

                                                                                    AtomicDesign の仕分けをテストで判定する