JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
こちらは STORES Advent Calendar 2022 8日目の記事です。 みなさんこんにちは、STORES のリテール本部でフロントエンドのエンジニアリングマネージャーをしています、 daitasuと申します。 2022年の年の瀬、 STORES のフロントエンド組織は立ち上がりから約4年の月日を迎えました。 日々のカジュアル面談や採用活動のなかで、「STORES のいまの技術状況ってどんな感じですか？Nuxt化って進み具合どうですか？」といった質問を受けることがよくあります。 STORES のフロントエンドグループについて、対外的に全体像を示すような記事が今までなかったので、本記事では、下記を紹介していこうと思います！ STORES フロントエンドの成り立ち 技術負債の解消・改善にどのように向き合っているか 2022年末現在での主な技術状況 2022年現在のスナップショットを
アクセシビリティを改善するために、通常の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
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
「AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版」の講演資料です。
Home - The A11Y Project
Marcy Sutton Testing AccessibilityA self-paced workshop designed to teach you the principles and effective patterns of accessibility, from design to deployment. Learn more about this workshop Michele Williams Introduction to Web AccessibilityUnderstanding how people use their computing devices is vital to understanding the diversity of disability in technology. In this video, Michele explains what
花王が挑む、600サイト・1200名を巻き込んだ全社ウェブアクセシビリティプロジェクトの全貌【前編】 - Findy Engineer Lab
企業がウェブアクセシビリティの向上に取り組む際、まずは少人数で小さな改善から始めていく方法を選択するケースがほとんどです。しかし、2022年のGAAD（※1）で、ある企業の革新的な取り組みが大きな話題になりました。 その企業とは、大手消費財化学メーカーとして知られる花王株式会社。花王が発表したのは、全社を挙げたウェブアクセシビリティ推進プロジェクトの発足と取り組み内容についてでした。 ウェブアクセシビリティの啓蒙に取り組むFindyでは、花王でウェブアクセシビリティの推進に携わる後藤 亮さんと渡邊 佳菜恵さんにお話を伺うべく、ウェブアクセシビリティの専門家として活動されている株式会社ディーゼロのゆうてん（@cloud10designs）さんをインタビュアーに迎えて対談を実施。本記事では、対談の内容を前・後編に分けてたっぷりお届けします。 社員数が3万人を超える大企業である花王が、どのように
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
Next.jsに専用のESLintが追加された！
Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $
社内UIライブラリを作る
こんにちは、monica です。 今回は弊社で開発している社内 UI ライブラリについて紹介します。 また、このプロジェクトは商用利用不可ですがオープンソースで公開していますので、ぜひご覧ください。 経緯 弊社ではこれまでフロントエンドを Vue2+ElementUI で開発してきました。 しかし Vue3 がリリースされ Vue2 のサポートが 2023 年末に終了することが決まったので、マイグレーションを行う必要がありました。 普通に Element UI を使っていれば、公式が提供している Migrator を使ってそこまで不便なくマイグレーションできます。 ですが勝手な外部からのスタイリングが当たっていたり、依存関係をどんどん増やしてしまった結果、Migrator を使うとアプリ全体が壊れるという状況になっていました。 ただたまに Element UI が直接スタイルを当てるように
ブラウザエンジン先端観測会 : ATND に参加してきたのでメモ。 途中から参加なのでServoの話は途中からです。 Twitterのログはこちら ブラウザエンジン先端観測会 #1 - Togetterまとめ Servo (by Tetsuharu OHZEKI a.k.a @saneyuki_s) スライド: Servo parallelism ACID2は通った Servoのレイアウトの計算 ボトムアップの場合 子供のノードは並列に計算する 全ての計算が終わった時に親に行く トップダウン もっとシンプルに親からやっていく floatの話 floatの影響を受けるものはフラグを立てる フラグが立ったものは遅延的に計算する floatの計算終了後に再度計算する = assign height 遅延的にやるのは、同計算していいのか分からないため overflow Block format c
【メモ】Frontend Meetup vol.1 -SPAを語り尽くす会! 2016/9/16 @株式会社FiNC - nabeliwo note(旧)
これに行ってきたのでそのメモ。 Frontend Meetup vol.1 - SPAを語り尽くす会! SPAと聞いて SPAの開発が好きすぎてたまらないのだけれど毎回破綻する僕としてはSPA系の勉強会と聞いたら行きたくてたまらないんです。 やっぱりSPAという言葉にはわりと多くの人が反応するようで今回の勉強会は抽選でした。運良く当たったので行ってきました。 ということでメモったので共有します。 関係ないけどここで勉強会の抽選運を使ってしまったことで次のReact meetupの抽選での運が奪われたのではないかという心配をしてます。 目次 React/Reduxで半年くらい真面目にSPAするとわかること 革命と秩序とSPA Angularと心中する コンテンツ配信とSPA SPAと覚悟 Angular2でつまづいたところ 1pxをめぐる戦い SPAでのセッション管理とセキュリティ 本編 残
プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから - SmartHR Tech Blog
こんにちは、念願の高級水拭き兼用ロボット掃除機を買ってほくほくなプロダクトデザイナー@kgsiです。 ※ この記事は、SmartHR Advent Calendar 2022の13日目の記事です。 SmartHRではReact コンポーネントライブラリ「SmartHR UI」を全プロダクトで使っています。なぜ使っているのか？それはSmartHRのプロダクトの体験統一と、開発速度を向上させるためです。 github.com SmartHR UIがそもそもどういったコンポーネントライブラリなのか、どうやって始まったのか、運用やリリース手順の改善については、過去の記事にて説明しています、よろしければ以下の記事をご覧ください。 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog プロダクト間共通の React コンポーネント
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
GitHub社内におけるエンジニアリングガバナンスがどのように行われているのかを紹介した同社のブログ「GitHub’s Engineering Fundamentals program: How we deliver on availability, security, and accessibility」（GitHubのエンジニアリングにおける基本原則：我々はいかにして可用性、セキュリティ、そしてアクセシビリティをデリバリしているのか）が公開されています。 GitHubにとって、ソフトウェアの開発力が同社の競争力に直結するものであることは明白です。エンジニアリングガバナンスは同社の経営にとって最も重要な要素であり、その同社が構築したエンジニアリングガバナンスのノウハウは多くのIT企業にとって参考になるものでしょう。 同社がどのようなガバナンスを行っているのか、ブログの内容からまとめてみま
Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。 当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。 Blog移転のお知らせ 誠に勝手ながら、このたび当アクセシビリティBlogを移転することになりましたので、お知らせいたします。移転先のURLは http://www.mitsue.co.jp/knowledge/blog/a11y/ になります。大変恐れ入りますが、ブックマークやフィードリーダーなどの設定変更をお願いいたします。 なお、旧URL（http://accessibility.mitsue.co.jp/）は今後もご利用いただけます
freeeアクセシビリティー・ガイドラインVer. 202110.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティー・ガイドラインおじさんの中根です。 基本的に在宅勤務でほとんど外に出掛けず、夏を感じることなく時を過ごした結果、夏休みを取るタイミングを完全に逸してしまったことに気づいた今日この頃、皆さんいかがお過ごしでしょうか。 さて、今回もfreeeアクセシビリティー・ガイドラインの更新情報をお届けします。 freeeアクセシビリティー・ガイドライン Ver. 202110.0リリース・ノート 前回のリリースからほぼ3カ月もあったということで、実はかなりいろいろと更新しているのですが、特に大きな変更について紹介します。 チェックリストのモバイルアプリ対応 社内からも社外からも、モバイルアプリのアクセシビリティー・チェックってどうすればいいの？という質問をしばしば受けます。 freeeアクセシビリティー・ガイドラインの基になっているWCAGは、元々Webに特化し
Google I/O 2017 に行ってきました - Hatena Developer Blog
はじめに みなさま、こんにちは。株式会社はてなの id:funnelbit です。はてなでは Android アプリ、また最近では iOS アプリの開発に携わっています。 さて、Google は毎年5月に Google I/O という開発者向けイベントを開催しています。今年も現地時刻で5月17日から開催されました。Google I/O は抽選でチケットが決まる仕組みで、僕はこれまで当選することはなかったのですが、この度運良く Google I/O 2017 に行く事ができ、現地で発表と空気感を味わってきましたので、（少し前の話題になりますが）その一部を共有したいと思います。 今回の Google I/O では去年に引き続き機械学習を軸にした機能を押してきており、さらに AI にシフトしていくと強く明言。もはや「どのプラットフォームでソフトウェアを作る」かはさほど重要ではなく、いかなる環境に
アプリ権限を悪用してキー入力を記録・パスワード窃取・マルウェア入りアプリインストールなどやりたい放題できる脆弱性「Cloak and Dagger」はAndroidの設計上の問題で解決困難
Androidアプリで求められる正当な権限を組み合わせることで、ソフトウェアキーボードの入力情報を全てコピーしたり、連絡先を根こそぎ盗み出したり、全権限の与えるゴッドモードで不正アプリをインストールしたりとやりたい放題される脆弱性が発見されました。この脆弱性問題は「Cloak and Dagger」と名付けられており、発見したジョージア工科大学の研究者は、「この脆弱性はGoogleによるAndroidの設計思想に起因しており、穴を塞ぐことは困難である」と警告しています。 Cloak and Dagger: From Two Permissions to Complete Control of the UI Feedback Loop (PDFファイル)http://cs.ucsb.edu/~yanick/publications/2017_oakland_cloakanddagger.pd
Rust: state of GUI, December 2022 There was a recent call for blogs about Rust GUI. So, Are we GUI yet? Contents: Categorised listing of toolkits State of KAS State of GUI Categorised listing of toolkits Lets start by categorising entries from Are we GUI yet, ignoring those which appear abandoned or not very functional. Bindings Wrappers around platform-specific toolkits: Mac OS / iOS - cacao - Ru
この攻撃では、Androidのパーミッションを悪用し、ユーザーに気づかれないまま端末を制御できてしまうという。 米ジョージア工科大学の研究者が、Androidのパーミッションを悪用してユーザーに気づかれないまま端末を制御できてしまう攻撃方法を発見したとして、5月22日付で論文を発表した。この攻撃を「Cloak & Dagger」と命名して解説サイトも公開している。 それによると、この攻撃はAndroidの「System Alert Window」（draw on top）と「Bind Accessibility Service」（a11y）という2つのパーミッションを単独で、または組み合わせて利用する。 この2つのパーミッションは、GoogleのPlay Storeからインストールしたアプリであれば、ユーザーに許可を求める画面が表示されないため、ユーザーに気づかれないまま攻撃を成功させるこ
ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog
この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得したリソースを元に生成します 1. はじめに 2022/08/16 に入社しました、Web フロントエンド開発を中心に行っている寺島です。 私は入社してから現在に至るまで、アンドパッドのデザインシステム 『Tsukuri』 の Web 向け実装である 『Tsukuri for Web』を開発しています。 この記事では以下について紹介します。 Tsukuri および Tsukuri for Web の背景 現在行っている開発のベースとな
この記事はfreee Developers Advent Calendar 2019の24日目です。こんにちは、freeeの@magi1125こと伊原です。あだ名は「アクセシビリティで一発当て太郎」です。いまはデザインリサーチチームのマネジャーをやっています。 この記事ではタイトル通り、2019年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2018以前の活動については「2018年、freeeのアクセシビリティを振り返る」をご覧ください。 developers.freee.co.jp ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 12月26日追記: 本記事にインスパイアされたとのことで、@masup9が同様の振り返り記事をまとめています。こちらもぜひご覧ください。 develope
成果物 https://github.com/ktrkmk/rrrmaebwea 詳しくはリポジトリ側の README.md も御覧ください。 きっかけ Web アプリケーションにおけるバックエンド側をそれなりにやってきていましたが、とある日「10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。」という記事を読み、フロントエンド界隈に少し興味を持ったのがきっかけになった感じです。 試そうとしたのはいいが… 早速その「React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide」を試してみようじゃないか、と思ったものの、これだけ色々並ぶと何がなにやら状態。そもそも一番最初に必要
Speaker SRE @kani_b: AWS とログが好きな SRE [blog] [Web] @deeeet: Tech lead at microservices platform at Mercari [blog] @y_uuk1: ウェブシステムアーキテクチャが好き [blog] Performance @1000ch: 趣味は Web 標準技術と Web ページの品質改善です。Web の未来が気になります。 [web] [github] likr: 大学で働いています。趣味でWebや高速化をやっています。 [web] [github] @sisidovski: Web技術全般とパフォーマンスに興味があります。 [web] [github] A11y @tokimariri: フロントエンドエンジニア。社内外でアクセシビリティの啓蒙活動にあくせくしています。 @ma10: 19
2024/08/24(土)で開催されたフロントエンドカンファレンス北海道 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、fortee や資料に記載されていたり、資料公開の投稿で分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 タイムテーブル 本イベントでは2つの会場でそれぞれ講演がありました。 便宜上、以下のように A, B と表します。 カケハシ（8F）：A LINE ヤフー WOW ルーム（6F）：B 11:00 - A - Webの潮流から考える、フロントエンドの溢れんばかりの魅力とフロントエンドエンジ
アクセシビリティ - Wikipedia
この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。 出典を追加して記事の信頼性向上にご協力ください。（このテンプレートの使い方） 出典検索?: "アクセシビリティ" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL (2016年8月) アクセシビリティ（英: accessibility、略称: A11Y）とは、障害者が他の人と同じように物理的環境、輸送機関、情報通信及びその他の施設・サービスを利用できることをいう。 上記の定義は障害者権利条約に基づく。その第9条は、英文では"Accessibility"であり、外務省が提供する日本語訳では「施設及びサービス等の利用の容易さ」となっている。欧州アクセシビリティ法の定義もほぼ等しい。 建物と、建物に至る経路において、高齢者や障害者を含む誰
こんにちは！意匠部新卒デザイナーの大桐です。 つい4ヶ月前まで、私は建築学生でした🪚 そして今年の4月に初めて足を踏み入れたWEB業界。舐めていました、業界の差。まるで異世界です！ 異世界では聞いたことのない業界用語が毎日飛び交っています。 「このままではだめだ！」と思った私は、入社して初めて知った業界用語 1)をまとめてみることにしました。 今回、その中から、言葉の由来が面白い！知ってるとかっこいい！と思ったものを10個紹介しようと思います。 1) WEBデザイン用語、WEBプログラミング用語や、印刷用語、その他、 IT/WEB業界全般で使われる用語を含みます。 ■ 面白業界用語のイラストクイズに挑戦してみよう 「でも、ただ用語を紹介&解説するだけじゃ、デザイナーのブログっぽくないな...」 と思ったので、意匠部のデザイナーに業界用語のイラストを描いてもらい、それを全10問のクイズにし
これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります ちょっと機会があって、swiper.js使ったからその時のメモ。 本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく（ ブラウザの検索機能を使ってくだしあ。 ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。 あと、例が欲しいところがあれば気まぐれで追記します。 これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります swiper.jsってなんぞ？ swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識し
概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので、コンポーネント単位でのアクセシビリティ関連実装を進めている。 React 実装 今回はタブ UI を題材に、React コンポーネントを実装した。 行うべき操作を見通しよくするために、タブ UI を <Tabs> コンポーネント1つで実装した。厳密には <TabList> や <TabPanel> などの要素を分解してコンポーネント化したほうが良いだろうが、今回は簡易実装としている。 キーボード
Windows 10の標準アプリ「Sticky Notes」（以前のバージョンでは「付箋」）が、iPhoneやiPad、Android端末でも使えるようになり、メモの内容を自動で同期させることが可能になると報じられています。 MicrosoftがSticky Notesの大型アップデートを予告 Windows 10の「Sticky Notes」は、簡単なメモをデスクトップに保存できるアプリで、Windowsユーザーの方は利用している方も多いと思います。 Microsoftは、「Sticky Notes」の大型アップデートを予定しており、以下のような多くの新機能が追加される予定だとMicrosoftの開発者がTwitterで予告しています。 背景色が黒系の「ダークテーマ」 文字装飾が簡単になる、新たな「書式バー」 アニメーション機能 動作の高速化 音声読み上げ、コントラスト向上などの「アクセ
この記事はfreee Developers Advent Calendar 2020の18日目です。 こんにちは、freeeの@magi1125こと伊原です。自称「アクセシビリティで一発当て太郎」です。アクセシビリティによるビジネス貢献を模索していますが、最近は「いつ当てるの？」と聞かれて悩んだりもしています。もうちょっと待って。 この記事ではタイトル通り、2020年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2019年以前の活動については「2019年、freeeのアクセシビリティを振り返る」をご覧ください。 developers.freee.co.jp ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 腕力の限界と停滞 freee Developers Advent Calenda
GitHub - visible/visible: 🦉 Accessibility testing framework at the next level
🔎 Validation ― Visible can run fully automated validation based on the web standard ACT (Accessibility Conformance Testing) just by putting the URL. The result always comes out with highlighted codes and detailed messages so you can immediately start fixing the problem. 🤖 Suggestion ― Unlike other test tools, we also provide suggestions that may help you to understand the a11y more. Suggestions
Stailerがスクリーンリーダーに対応するまでの道のり~Flutterでのスクリーンリーダー対応について、あるいはユーザビリティやユーザー獲得の話~ - 10X Product Blog
こんにちは、ソフトウェアエンジニアの@futaboooです。 先日スクリーンリーダーへ対応したプレスリリースを配信しました。今日はその裏側について紹介です。 10x.co.jp はじめに とあるパートナーのネットスーパーシステムをStailerへリプレイスして少しすると、お客様から「今まで使えていたのに使えなくなった！」という切実な声が届きました。この問い合わせを通じて、視覚障害者のお客様がスクリーンリーダーを使って買い物をしていたこと、そしてStailerがそのニーズに応えていないことに気づきました。 そこで、我々は視覚障害者のお客様へのヒアリングを開始し、どのような環境でアプリを使っているのか、使用しているデバイスやスクリーンリーダーソフトウェアの種類など、具体的な情報を収集しました。このプロセスを通じて、アプリがより多くの人々にとって使いやすいものになるための重要な改善点を発見しまし
TJK Design
TJK Design is now cssmojo Please update your bookmarks! TJK Design has been retired. A few articles have been moved here while others have been left behind. You can search cssmojo, check the home page, check the Site Map, or browse these topics: html css javascript a11y trick tricks layout rwd opinion bfc float clearfix misc
アクセシビリティー研修でスクリーンリーダーの音声を届けるために - freee Developers Hub
こんにちは、id:ymrlです。この記事はfreee Developers Advent Calendarの2日目です。 先日の記事で、全従業員向けのアクセシビリティ研修を紹介しました。 developers.freee.co.jp この研修でとても大切にしていることのひとつに 「スクリーンリーダー（画面読み上げソフトウェア）の操作を実演する」 というものがあります。多くの人にとって「視覚的に見るもの」であるWebが、視覚障害の当事者にはこういう形になっているということを見て（聞いて）もらうことが、新たな視点を持つキッカケになることを期待してのことです（もちろん、中根さん（@ma10）が研修をやっているから特に説得力があるというのもあります）。 研修では中根さんがWindowsでNVDAを、私はmacOSでVoiceOverをそれぞれ実演しています。この記事では私の手元でやっていることを紹
QAが率先してアクセシビリティチェック品質をリードしたらいいことづくしだった - freee Developers Hub
こんにちは。freee人事労務でQAエンジニアをしているshihoです。 freee QA Advent Calendar2023 15日目です。 自己紹介 元カスタマーサポートで、2016年8月にfreeeに入社しました。3年前にQAエンジニアに異動してから、品質保証の重要性とユーザーのニーズに焦点を当てた仕事に取り組んでいます。お客様との関わりがあった経験を活かし、使いやすく信頼性の高いプロダクトを提供することに情熱を燃やしています。 アクセシビリティとは アクセシビリティに関しては、さまざまな定義が存在しますが、freeeとしては特定の個人を対象とするのではなく、すべての人に使いやすいものを提供することを目指しています。また、特定の条件での使いやすさではなく、あらゆる条件下でも使用できることを重視しています。 アクセシビリティチェックに取り組むきっかけ 元々freeeに入る前は、アク
Xboxがサイコロの各面を自由にカスタマイズしたりサイコロ同士をつなげたりして自分だけのコントローラーを作り出せるモジュール式コントローラー「Proteusコントローラー」を発表
Xboxが各面を自由にカスタマイズできるサイコロ状のモジュールを複数つないでコントローラーとして使うことができるという、従来のコントローラーとは一線を画する見た目とカスタマイズ性のモジュール式コントローラー「Proteusコントローラー」を発表しました。 Proteus Controller Kit VIP Price https://www.byowave.com/product/proteus-controller-kit-vip We are super excited to be featured in @XboxWire 's article on the upcoming accessibility updates for Xbox! Thanks to the Xbox team for supporting us on this journey to making game
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
STORES フロントエンドの現在地 2022 - STORES Product Blog
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
アクセシビリティ vs セキュリティ ～こんな対策はいらない！～
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
ブラウザエンジン先端観測会 アウトラインメモ
GitHub社内におけるエンジニアリングガバナンスはどのように行われているのか
アクセシビリティBlog | ナレッジ | ミツエーリンクス
State of GUI 2022 - KAS blog
Androidの設計問題突く攻撃手法「Cloak & Dagger」、米研究者が論文公開
2019年、freeeのアクセシビリティを振り返る - freee Developers Hub
React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide を Ubuntu Server 16.10 環境に Vagrant でセットアップするスクリプトを書いた - Qiita
次世代 Web カンファレンス - connpass
フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ
何個知ってる？入社して知った面白業界用語10選 - 意匠部
swiper.js使ってみたからそのオプションについて | なんかいろいろデザインする人
Ameba Accessibility Guidelines
WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する
Windows 10標準「付箋」アプリ、iOS/Android版が年内にも公開か - iPhone Mania
2020年、freeeのアクセシビリティを振り返る - freee Developers Hub