タグ アクセシブル
人気順 5 users 50 users 100 users 500 users 1000 usersコンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む
#ABEMA で試合のデータをアクセシブルに!デザインと色調整技術 | CyberAgent Developers Blog
本記事は、CyberAgent Advent Calendar 2022 2日目の記事です。 この記事のまとめ ABEMA では、試合のデータにアクセスしやすいデザインに取り組みました 既存サービスと比較して、1画面に収まる情報量を増やしました 国やチームの色を見やすく自動調整する仕組みをいれました ABEMA で配信する FIFA ワールドカップ カ... 続きを読む
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
Vue Fes Japan Online 2022 発表資料(Web 版) 昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。 最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。 しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシ... 続きを読む
UIデザイナーは要チェック! 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
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らに公開書簡
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY(Digital Accessible Information System:アクセシブルな情報システム)規格の開発・維持・... 続きを読む
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | 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サイトのアクセシビリティを分析し、エラーがないペー... 続きを読む
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス
棒グラフや折れ線グラフ、どうやって実装していますか? Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む
なぜ「タブ」はスクリーンリーダーで読めない? タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum
ユーザーテストの結果、いくつかの問題点が明らかになりました。問題点の多くは、ラベルの文言の変更、代替テキストの調整といった微修正レベルで対応できるものでしたが、中に一つ大物案件がありました。それが、タブの問題です。 何が問題かおさらい ユーザーテストでは、スクリーンリーダーでタブを読む際に問題が起... 続きを読む
スマホの操作も快適な優れもの!ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider | コリス
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessib... 続きを読む
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利 | Rriver
テキストと背景の色を選ぶとき「これってアクセシブルかな?」とビクビクしながら選んでしまうことってないですか?僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guid... 続きを読む
HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点 | コリス
ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログ ボックスを利用できるようにするものです。 <di... 続きを読む
Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ
アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む
Web制作者は要チェック!モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス
Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量(7KB)CSSフレームワーク。ほとんどの... 続きを読む
ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
アクセシビリティという言葉を聞いたことはありますか? 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。特に、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「 WAI-ARI... 続きを読む
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS | コリス
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです... 続きを読む
GitHub - bakera/designing_web_accessibility: 「デザイニングWebアクセシビリティ」電子版素材置き場です。
「デザイニングWebアクセシビリティ」電子版素材置き場です。 デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ http://www.amazon.co.jp/dp/4862462650 この電子コンテンツは、ボーンデジタル刊「デザイニングWebアクセシビリティ」の電子書籍版の制作にあたり、電子書籍コンテンツの想定読者の方のレビューを目的に公開状態で作業を行っ... 続きを読む
WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応(主に WAI-ARIA)の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので... 続きを読む
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む
コンテンツからみるWebアクセシビリティの課題と提案 : could
アクセシビリティコンテンツ コンテンツからみるWebアクセシビリティの課題と提案 Webアクセシビリティは、技術だけで解決できるものではありません。文書をきれいに整理・整頓しただけでは、利用者のニーズに合ったコンテンツを提供しているとはいえません。利用者がアクセスしたいコンテンツを提供するという考え方が不可欠になります。 コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2... 続きを読む
プロジェクトに合わせたサイトを自由に作成できるWordPressのテーマファイル -Roots | コリス
HTML5 Boilerplateをベースにミニマルでアクセシブルなマークアップで、より少ないコードでファイルやテンプレートの構造を設定でき、/wp-content/などのWordPress特有のURLの変更やルートからの相対パスの利用など、カスタマイズに優れたWordPressのテーマファイルを紹介します。 Bootstrapも用意されているので、すぐ使いたい人にも対応! また、サイト制作中のワ... 続きを読む
でんでんコンバーターによるEPUB制作
でんでんコンバーターによるEPUB制作 Presentation Transcript 楽しい・簡単・アクセシブル でんでんコンバーターによる EPUB制作 イースト株式会社 高瀬 拓史 Sep, 7, 2013 「マラケシュ条約とDAISY/EPUBのこれから」発表資料 自己紹介 • 高瀬 拓史(たかせ ひろし) @lost_and_found / ろす • イースト株式会社 EPUBエバンジ... 続きを読む
マークアップのいまいちな箇所を指摘してくれるブックマークレット -DiagnostiCSS | コリス
ブラウザで表示しているページのアクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれるブックマークレットを紹介します。 DiagnostiCSS DiagnostiCSSでチェックできるのは、以下の項目です。 インラインスタイル 無効リンク 空要素 必須属性のない要素 廃止予定の要素 ページで実行すると、赤い枠で囲まれます。 altがないとか、インラインスタイルを使ってる... 続きを読む
テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio | コリス
テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応してい... 続きを読む