タグ アクセシブル
人気順 10 users 50 users 100 users 500 users 1000 usersコンポーネントをアクセシブルに保つ技術
2023/12/21
11 users
コンポーネントライブラリ
Linter
Ubie
実装
技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む
#ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 | CyberAgent Developers Blog
2022/12/02
14 users
abema
FIFA ワールドカップ
チーム
既存サービス
本記事は、CyberAgent Advent Calendar 2022 2日目の記事です。 この記事のまとめ ABEMA では、試合のデータにアクセスしやすいデザインに取り組みました 既存サービスと比較して、1画面に収まる情報量を増やしました 国やチームの色を見やすく自動調整する仕組みをいれました ABEMA で配信する FIFA ワールドカップ カ... 続きを読む
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
2022/10/16
14 users
アクセシ
アクセシビリティ
コンポーネント
Vue.js
知識
Vue Fes Japan Online 2022 発表資料（Web 版） 昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。 最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。 しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシ... 続きを読む
UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
2022/05/17
14 users
Flex
パーソナライズ
アクセシビリティ
ガイドライン
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用した... 続きを読む
アクセシブルな就労について｜みるく｜note
アクセシビリティ Advent Calendar 2021 8日目の記事です。 どうも、500円の靴を2年も履いてるみるくです。 私は29歳の時、右足の病気で障害者になりました。まさか自分が障害者になるとは夢にも思いませんでした。その為、一生従事していこうと決めていた飲食業界の仕事と生き甲斐だったバスケが出来なくなり、大事な物... 続きを読む
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
2021/10/19
41 users
WHATWG
アクセシビリティ
ブラウザベンダ
DAISY
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY（Digital Accessible Information System：アクセシブルな情報システム）規格の開発・維持・... 続きを読む
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6 | コリス
2021/07/06
8 users
コリス
UIデザイナー
テクニック
印象
知識
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by M... 続きを読む
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
2021/06/15
13 users
POSTD
後編
完全ガイド
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないペー... 続きを読む
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
2021/05/24
5 users
POSTD
前編
完全ガイド
クイックサマリー‐私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべ... 続きを読む
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return click... 続きを読む
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス
2021/03/22
602 users
コリス
table
フレームワーク
CSS
グラフ
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む
なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum
2019/06/25
23 users
文言
おさらい
ラベル
代替テキスト
ユーザーテスト
ユーザーテストの結果、いくつかの問題点が明らかになりました。問題点の多くは、ラベルの文言の変更、代替テキストの調整といった微修正レベルで対応できるものでしたが、中に一つ大物案件がありました。それが、タブの問題です。 何が問題かおさらい ユーザーテストでは、スクリーンリーダーでタブを読む際に問題が起... 続きを読む
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider | コリス
2018/09/18
33 users
コリス
スライダー
jQuery
ビフォーアフター画像
操作
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessib... 続きを読む
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利 | Rriver
2018/08/20
36 users
Rriver
CONTRAST
アクセシビリティ
ピッカー
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guid... 続きを読む
HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点 | コリス
2018/03/16
159 users
dialog
ダイアログボックス
コリス
ダイアログ
ボックス
ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログ ボックスを利用できるようにするものです。 <di... 続きを読む
Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ
2017/11/24
191 users
WPJ
Calibre
知見
手助け
Ｗｅｂ屋
アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス
2017/10/10
66 users
モーダルダイアログ
モーダル
コリス
ライブラリ
開閉
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス
2017/04/27
171 users
コリス
CSS
軽量フレームワーク
Flexbox
グリッド
Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどの... 続きを読む
ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
2017/04/26
63 users
ウェブアクセシビリティ
ICS MEDIA
ウェブ制作
基本
アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。特に、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「 WAI-ARI... 続きを読む
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS | コリス
2017/03/14
95 users
セレクタ
コリス
valid
セマンティック
CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです... 続きを読む
GitHub - bakera/designing_web_accessibility: 「デザイニングWebアクセシビリティ」電子版素材置き場です。
2017/03/09
13 users
GitHub
デザイニングWebアクセシビリティ
http
「デザイニングWebアクセシビリティ」電子版素材置き場です。 デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ http://www.amazon.co.jp/dp/4862462650 この電子コンテンツは、ボーンデジタル刊「デザイニングWebアクセシビリティ」の電子書籍版の制作にあたり、電子書籍コンテンツの想定読者の方のレビューを目的に公開状態で作業を行っ... 続きを読む
WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ
2015/06/13
30 users
二の次
ツッコミ
React
WAI-ARIA
性質
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので... 続きを読む
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス
2015/02/10
388 users
セマンティック
コリス
フレームワーク
商用
HTML
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む
Bookshareで個人ユーザーが最も早く簡単にアクセシブルな本を読む方法 | すちゃらかコーダー
2014/05/29
5 users
米国
コーダー
サポートチーム
早い方法
ちゃら
DAISY図書などのアクセシブルコンテンツを集めた米国の電子図書館Bookshareを個人ユーザーが使う場合の、最も簡単で早い方法をBookshareブログが紹介しています（サポートチームによくされる質問なのでまとめたとか）。 Bookshare Support Question – What’s the Quickest and Easiest Way to Read Books from Bo... 続きを読む
コンテンツからみるWebアクセシビリティの課題と提案 : could
2013/12/09
153 users
could
Webアクセシビリティ
課題
提案
コンテンツ
アクセシビリティコンテンツ コンテンツからみるWebアクセシビリティの課題と提案 Webアクセシビリティは、技術だけで解決できるものではありません。文書をきれいに整理・整頓しただけでは、利用者のニーズに合ったコンテンツを提供しているとはいえません。利用者がアクセスしたいコンテンツを提供するという考え方が不可欠になります。 コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2... 続きを読む