This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The document suggests Yarn may handle dependencies and devD

HTMLでボタンを作るときに意識したいこと https://t.co/8hb0t9Z5fG

HTMLのマークアップでアクセシビリティーを向上させる方法として、WAI-ARIA（ウェイ・アリア）があります。HTML要素の属性に aria-* を追加することで音声読み上げの精度を高められます。 WAI-ARIAの特徴として、状態を示す属性が存在します。たとえば、aria-selected 属性。名前の通り、該当のHTML要素が選択状態であるかを示すことができます。ウェブサイトのUIパーツにはタブやアコーディオンなど動的なものがあります。こういった動的なパーツの「状態」はHTMLのマークアップだけでは示すことが難しく、JavaScriptの実装が不可欠です。 ▲本記事で解説するサンプル。タブの切り替えによって、aria-selected属性を動的に切り替えている。JavaScriptの制御が必要である。 よく利用される例としてタブ型のユーザーインターフェイスを題材とし、流行りのJSライ

初めまして、株式会社HAB&Co.でデザイナーをしているゆきです。 普段はWebデザインを中心にアプリのUI、DTPなどのデザインなどを行っています。 今回はデザインするなら知っておきたい「色覚特性」についてまとめてみました。ノンデザイナーの方もプレゼン資料を作成したり、何かしらデザインをする機会があるかと思いますのでよかったら参考にしてみてください。 1.色覚特性とは？ まずは「色覚特性」とは何かを見ていきます。目薬で有名な参天製薬様のサイトより引用しております。 以下、引用です。(下記文章では「色覚特性」を「色覚異常」として解説しています。) 色覚異常とは、正常とされる他の大勢の人とは色が異なって見えてしまう・感じてしまう状態のことをいいます。そのため色の区別がつきにくい場合があり、日常生活に支障をきたしてしまう可能性があります。 先天色覚異常は日本人男性の20人に１人(5%)、日本人

Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D

The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more. Current Work (updated monthly) See What We're Working On – Accessibility Activities and Publications For Review: Guidance on Applying WCAG 2 to Non-Web ICT (WCAG2ICT) (2024-Jul-02) WCAG2ICT is Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT), incl

altテキスト(代替テキスト)は、Webページ上の画像を表します。HTMLコード内に存在し、通常はページ自体には表示されません。 しかし、altテキスト(代替テキスト)の何が重要なのでしょうか？ また、SEOやユーザーエクスペリエンスを向上させるためにはどうすればいいのでしょうか？ わかりやすい図を交えて解説していきます。 なぜaltテキスト（代替テキスト）が重要なのか？ altテキスト（代替テキスト）が重要な理由は4つあります。 altテキスト（代替テキスト）によるアクセシビリティの向上 何百万人もの人が視覚障害者であり、多くの人がスクリーンリーダーを使ってオンラインコンテンツを利用しています。これらは、画像を含む画面上のコンテンツをオーディオに変換することによって機能しています。 altテキスト（代替テキスト）のない画像は、画像の内容をユーザーに伝える手段がないため、スクリーンリーダー

株式会社コンセント インクルーシブデザイングループのブログ。 インクルーシブデザインに関わる情報を毎週発信していきます。 こんにちは。秋山です。 唐突ですが、みなさんはなぜウェブアクセシビリティに取り組んでいますか？ ぱっと思いつくのは「障害者への配慮」や「規格への対応」、「法的リスクの回避」「品質の一環」あたりでしょうか。 もっと理念的に「ウェブをオープンなものにするため」というのもあると思います。 きっと他にも色々あるんでしょうね。 組織にウェブアクセシビリティを啓発/浸透するにあたって、自分も上記のような言葉を利用することは多々としてあるのですが、なんかしっくりこないなって思う瞬間があります。 これらは「ウェブアクセシビリティに取り組む背景」としては間違ってるわけではないのですが、もうちょっと手前の「個人の動機」としてみた場合にギャップがあるような。 組織を動かす、あるいは頷かせるた

トップ レポート 「Webアクセシビリティ 基本の『キ』。いますぐ実行できる10の“インクルーシブデザイン”テクニック」2019年7月23日開催 月例セミナーレポート(2) 「Webアクセシビリティ 基本の『キ』。いますぐ実行できる10の“インクルーシブデザイン”テクニック」2019年7月23日開催 月例セミナーレポート(2) イベント報告 「障害のある人がWebを使えるようにすること」よりも包括的な「インクルーシブデザイン」へと変わりつつあるWebアクセシビリティ。インフォアクシアの植木氏が、その変化と、専門家でなくてもいますぐ実行できて効果が高い10のWebアクセシビリティ確保テクニックを解説する。 公益社団法人日本アドバタイザーズ協会Web広告研究会（以下、Web広告研究会）は7月23日に月例セミナーを開催。「誰のためのUX？ ～アクセシビリティを再確認しよう～」というテーマのもと、

Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラーアクセシビリティをチェックしてくれるWebツールです。 テキストの色や背景色、周りの色などを解析し、WCAG 2.1に準拠した十分なコントラストがあるかどうかをチェック、評価と指摘をしてくれます。 提供しているのは依頼を受けたWebサイトのアクセシビリティをチェックし、改善レポートを提供するサービスを展開しているAditusによるもの。こちらはボタンのみを自動チェックしてくれるツールを公開したようです。 雑感自分のブログでもチェックしてみましたが、16要素のうち、問題があるのは13か所と、テストなら赤点の採点でした。なんのチェックもせず適当に作りたいように作ったWebサイトならまぁこんなもんじゃないでしょ

英国内務省がウェブアクセシビリティを高めるための啓蒙ポスターを発表し、日本語訳も登場した。障害者にも健常者にもやさしいウェブのために、まずは「知ること」から始めたい。 この夏の参議院選挙で、重度障害者の国会議員が誕生した。快挙に喜ぶのも束の間、「国会議員が国会に登庁する」ために、参議院のバリアフリー化が進められた。 大型の車椅子で利用できるスロープや車いす用トイレの設置、パソコンの持ち込みや、本人の代わりに挙手や投票を行う介助者の付き添い。一連の合理的配慮の実施を報じるニュースを通して、健常者が日頃は気づかない「不自由さ」の数々に気づかされた。 オンラインにおける健常者と障害者の壁 こうした「不自由さ」は、私たちが毎日のように利用しているインターネット上にも無数に存在する。障害のある人のうち、半数以上がインターネットを利用しているが、彼らが私たちと同じ体験を得られているわけではない。 例え

Accessible Color Generatorは任意のカラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれるWebアプリです。提案してくれるのは白いテキストを使う場合に指定したカラーに最も近いカラーでアクセシビリティレベルがAA或いはAAAをクリアしてくれるカラー、同じ条件でグレーのテキストを使う場合はグレーに近いテキストで条件をクリアできるカラーを提案、同系色で条件をクリアできるカラーの3種を提案してくれます。 使ってみる 試しに#61e7ffでテストしました。（この色への直接リンクも可能です） #fffなテキストを使うのであれば近い色合いの#00a3baや#008299を使えばクリアできるそうです。また、背景に使い、テキストをグレー系にする場合は#787878や#5b5b5bなどより濃ければOK、同色系は#008299や#00657aならクリアできる

UX movement UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior. あなたはWebデザインのUIにおいて閲覧者の目に負担をかけるような色の選択をしていませんか。特に、背景色としてに彩度も光度も高い色を使用している場合、ページへの訪問者は長くその画面を見ていられないものなのです。 彩度も光度も高い色はユーザーの注意を引きますが、その色合いが広範囲に渡ってしまうと、網膜に過剰な刺激を与えてしまい、目に負担をかける可能性があるのです。 例として画像の色の見本をご覧ください。左列は最大の光度と彩度の色合いの配色となっています。右列は、光度と彩度が80％に抑えられた配色となっています。光度も彩度

この記事では、 ということを伝えたい。 と、結論のようなものを画像で表現したが、これは良い方法とはいえない。何が良くないのかわかるだろうか。 何か大事な情報を説明するとき、それを画像だけで表現してしまう。そういう記事やWebページは少なくない。 僕が生業としているWeb開発においては、Webアクセシビリティ対応のガイドラインがある。その中でも画像の代替テキストについては、Webサイトやアプリケーションの開発者やデザイナーであれば知っているとおもう。そう信じたい。 代替テキスト代替テキストについての詳細は、WCAGを参照してもらうとして、この記事ではサイバーエージェントのAmeba Accessibility Guidelinesから「1.1.1 画像に代替テキストを提供する」の概要を引用しよう。 ・スクリーンリーダーなどの支援技術を用いているユーザーにも、等しくコンテンツを提供する ・通信

- マシンリーダブルとは何かを知る - 簡単なアクセシビリティチェックができるようになる

2019/03/08 CA11Y #1 〜アクセシビリティはじめて物語〜 で発表した資料です。アメブロでのアクセシビリティの啓蒙活動とその結果、そして最近リリースした「こえのブログ」でのアクセシビリティ向上のための実践事例についてご紹介しました。Read less

欧州アクセシビリティ法（European Accessibility Act: EAA）が欧州議会で2019年3月13日に可決成立した。欧州議会からのプレスリリースを利用して、法律の内容と経済社会へのインパクトについて紹介する。 投票結果は賛成613、反対23、棄権36と圧倒的多数での可決であった。EAAは欧州の総意と見なせる。EAAの目的は障害者や高齢者の日常生活を改善し、さらなるイノベーションの扉を開くことにあるという。障害者などへの対応は負担だが、「イノベーションの扉を開く（opening the door for more innovation）」と前向きな点に注目すべきである。 この法律に基づいてアクセシビリティ対応が進められるのは、発券機およびチェックイン機、ATMやその他の支払い端末、PCとオペレーティングシステム、スマートフォン・タブレット、テレビ機器、消費者向け銀行サービ