HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）

2024/05/07 10 users 障壁 Webアクセシビリティ HTML スクリーンリーダー

HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティを... 続きを読む

アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定

2024/04/19 11 users CSSフレームワーク ライブラリ選定

BARフロントえんどう #2 「CSS Library / Framework」での登壇資料 続きを読む

テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ

2024/03/24 14 users DOM レンダリング テーブル 負荷 テクニック

Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。ス... 続きを読む

axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした

2024/03/17 26 users playwright インスト web 自動テスト 興味

Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインスト... 続きを読む

プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog

2024/03/12 65 users プレースホルダー ユーザビリティ アクセシビリティ上 課題

こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては... 続きを読む

ウェブアクセシビリティ対応、どうすれば？　法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ

2024/03/11 29 users ステップ グッドパッチブログ Goodpatch Blog

アクセシビリティ？　ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウ... 続きを読む

<button>とかのスタイルを消して書き直すときに考えることの備忘録

2024/01/01 12 users Button unset 備忘録 分岐 Chrome

all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポ... 続きを読む

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | freee株式会社

2023/12/19 119 users freee プレスリリース freee株式会社 ノウハウ 組織

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム... 続きを読む

Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き

2023/12/12 33 users インタラクティブエンタテインメント 奥谷海人 歳月 ソニー

Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き ライター：奥谷海人 ソニー・インタラクティブエンタテインメントが先日リリースした「Access コントローラー」は，誰もが不自由なく楽しめるように5年の歳月をかけて開発されたデバイスだ。アクセシビリティに対するゲーム業界の動きは以前か... 続きを読む

ウェブコンテンツアクセシビリティガイドライン（WCAG）は何が難しいのか、あるいは難しさに立ち向かう方法 - 水底の血

2023/11/12 89 users WCAG 水底 文言 スライド ハードル

LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱ... 続きを読む

ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable

2023/09/22 14 users Accessible Stark figma Sketch

公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェッ... 続きを読む

アクセシビリティ | SmartHR Design System

2023/07/03 174 users アクセシビリティ向上 さまざ 障害当事者 ユーザー 多く

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざ... 続きを読む

サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」

2023/05/20 135 users Lighthouse スコア 速度 パフォーマンス ツール

「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse ·... 続きを読む

AppleがiPhoneで15分のトレーニングをするだけで「自分に似た合成音声」で他人と会話できる機能を発表

2023/05/17 14 users iPhone 聴覚 目玉 視覚 Mac

Appleが視覚・聴覚・認知・モビリティのアクセシビリティを向上するためのソフトウェア機能をiPhoneやMacに導入すると、2023年5月16日に発表しました。その中でも特に目玉となる機能が、iPhoneやiPadに声を吹き込むだけで、自分の声を再現した音声を合成し、コミュニケーションに応用できるという「Live Speech」です。 ... 続きを読む

HTMLにsearch要素が追加されたぞ！

2023/03/29 32 users HTML 実装 HTML Standard ブラウザ 仕様

先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にse... 続きを読む

「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」　和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性

2023/01/26 11 users 古川陽介 フロントエンド 戦い 和田卓人 テスト

今活用しているツールを紹介 古川陽介氏（以下、古川）：今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう？」とか「何をしたらいいんだろう？」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでし... 続きを読む

HTMLが強みになる解説書、アクセシビリティやユーザビリティに配慮したコーディングを学べる -武器になるHTML

2022/12/02 62 users ユーザビリティ コーディング CSS 本書 HTML

Webページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わって... 続きを読む

LIFULL HOME'S のヘッダ・フッタが新しくなりました！ - LIFULL Creators Blog

2022/11/25 12 users ブッダ 嶌田 ヘッダ レスポ LIFULL HOME

フロントエンドエンジニアの嶌田です。アクセシビリティ推進グループに所属し、社内のプロダクトのアクセシビリティを高めるために日々奮闘しています。 LIFULL HOME'S は不動産・住宅情報の総合サービスです。住宅や住み替えに関する多くの情報を取り扱っており、サービス全体の規模はかなり大きいといえます。 レスポ... 続きを読む

E2554 - 電子書籍のアクセシビリティに関する日本産業規格 | カレントアウェアネス・ポータル

2022/11/17 10 users カレントアウェアネス・ポータル カレントアウェアネス 最新

カレントアウェアネス・ポータルは、図書館界、図書館情報学に関する最新の情報をお知らせする、国立国会図書館のサイトです。 電子書籍のアクセシビリティに関する日本産業規格 総務部企画課・植村要（うえむらかなめ） ●はじめに 2022年8月22日，経済産業省は，EPUBのアクセシビリティに関する日本産業規格（JIS）「JI... 続きを読む

Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

2022/10/16 14 users アクセシ アクセシブル コンポーネント Vue.js web

Vue Fes Japan Online 2022 発表資料（Web 版） 昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。 最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。 しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシ... 続きを読む

【速報】「Windows 11 2022 Update」の一般提供が開始 ～初の大型アップデート／デスクトップ環境、アクセシビリティ、セキュリティなどに新機能が満載

2022/09/20 15 users セキュリティ 速報 満載 デスクトップ環境 大型アップデート

続きを読む

目が見えなくなったり、手が動かなくなった時、私たちはゲームを遊べるのか ― そんな時の救いとなるかもしれない“PS5のアクセシビリティ”に迫る

2022/08/31 27 users リアリティ 格段 コントローラー グラフィック オーディオ

目が見えなくなったり、手が動かなくなった時、私たちはゲームを遊べるのか ― そんな時の救いとなるかもしれない“PS5のアクセシビリティ”に迫る コントローラーは雨や風を感じられるほどのリアリティになり、グラフィックやオーディオの性能なども向上、ロード時間も短縮された。とにかく没入感が格段に上がっている。 ... 続きを読む

CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style

2022/08/30 15 users Media デバイス さま CSS メディアクエリ

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さま...記事の続きを読む 続きを読む

ユーザーのITリテラシーに配慮するのはアクセシビリティなのか - Qiita

2022/07/29 81 users Qiita WCAG Problem ITリテラシー ユーザー

Help us understand the problem. What are the problem? 主に2つの答えがあります。 A. WCAGの考えではユーザーが適切な支援技術を利用することも含めてアクセシビリティであり、支援技術の入手やアクセシビリティ機能の利用に必要なITリテラシーを持たない人はアクセシビリティの対象ではない。（WCAG偏重派） B. うる... 続きを読む

フロントエンドエンジニアが組織横断のアクセシビリティ専門部署を立ち上げた - LIFULL Creators Blog

2022/06/29 12 users フロントエンドエンジニア 組織横断 嶌田 部署 弊社プロダクト

フロントエンドエンジニアの嶌田です。2022 年 4 月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。今回はこの新しくできた部署について簡単に紹介します。また、会社や私がアクセシビリティに取り組む理由を語ってみようと思います。 弊社プロダクトのアクセシビリティを推進する取り組みは、... 続きを読む