HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

2021/03/22 602 users コリス table フレームワーク CSS グラフ

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む

シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス

2015/02/10 388 users セマンティック コリス フレームワーク 商用 HTML

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス Ajax スクリプト コンテンツスライダー スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む

アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス

2009/03/11 225 users コリス チュートリアル集 美しいフォーム

アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...] 続きを読む

[JS]jQueryのプラグイン33+1選 -2009年2月 | コリス

2009/02/09 224 users jQuery コリス スライダー アニメーション 気持ち

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slider 1.5 自動 [...] 続きを読む

Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ

2017/11/24 191 users WPJ Calibre 知見 手助け Ｗｅｂ屋

アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス

2017/04/27 171 users コリス CSS 軽量フレームワーク Flexbox グリッド

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどの... 続きを読む

[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css | コリス

2011/05/18 168 users コリス CSS ブックマークレット スタイルシート イエロー

ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用（要JavaScript... 続きを読む

HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点 | コリス

2018/03/16 159 users dialog ダイアログボックス コリス ダイアログ ボックス

ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログ ボックスを利用できるようにするものです。 <di... 続きを読む

コンテンツからみるWebアクセシビリティの課題と提案 : could

2013/12/09 153 users could Webアクセシビリティ 課題 提案 コンテンツ

アクセシビリティコンテンツ コンテンツからみるWebアクセシビリティの課題と提案 Webアクセシビリティは、技術だけで解決できるものではありません。文書をきれいに整理・整頓しただけでは、利用者のニーズに合ったコンテンツを提供しているとはいえません。利用者がアクセスしたいコンテンツを提供するという考え方が不可欠になります。 コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2... 続きを読む

[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス

2010/09/14 118 users コリス アコーディオン スクリプト jQuery カスタマイズ

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む

Dive Into Accessibility

2006/04/10 113 users 文書 答え 英語版 質問

この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）... 続きを読む

[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 下記は各ポイントを意訳したものです... 続きを読む

プロジェクトに合わせたサイトを自由に作成できるWordPressのテーマファイル -Roots | コリス

2013/09/09 87 users Roots コリス Bootstrap wp-content

HTML5 Boilerplateをベースにミニマルでアクセシブルなマークアップで、より少ないコードでファイルやテンプレートの構造を設定でき、/wp-content/などのWordPress特有のURLの変更やルートからの相対パスの利用など、カスタマイズに優れたWordPressのテーマファイルを紹介します。 Bootstrapも用意されているので、すぐ使いたい人にも対応！ また、サイト制作中のワ... 続きを読む

マークアップのいまいちな箇所を指摘してくれるブックマークレット -DiagnostiCSS | コリス

2013/07/09 79 users コリス ブックマークレット valid Alt 箇所

ブラウザで表示しているページのアクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれるブックマークレットを紹介します。 DiagnostiCSS DiagnostiCSSでチェックできるのは、以下の項目です。 インラインスタイル 無効リンク 空要素 必須属性のない要素 廃止予定の要素 ページで実行すると、赤い枠で囲まれます。 altがないとか、インラインスタイルを使ってる... 続きを読む

Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス

2017/10/10 66 users モーダルダイアログ モーダル コリス ライブラリ 開閉

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む

ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA

2017/04/26 63 users ウェブアクセシビリティ ICS MEDIA ウェブ制作 基本

アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。特に、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「 WAI-ARI... 続きを読む

テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio | コリス

2013/04/09 52 users RGB コリス 組み合わせ テキスト 背景

テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応してい... 続きを読む

Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡

2021/10/19 41 users WHATWG アクセシビリティ ブラウザベンダ DAISY

Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY（Digital Accessible Information System：アクセシブルな情報システム）規格の開発・維持・... 続きを読む

色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利 | Rriver

2018/08/20 36 users Rriver CONTRAST アクセシビリティ ピッカー

テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guid... 続きを読む

スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider | コリス

2018/09/18 33 users コリス スライダー jQuery ビフォーアフター画像 操作

スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessib... 続きを読む

でんでんコンバーターによるEPUB制作

2013/09/08 33 users コンバーター ePUB制作 ePub DAISY 高瀬

でんでんコンバーターによるEPUB制作 Presentation Transcript 楽しい・簡単・アクセシブル でんでんコンバーターによる EPUB制作 イースト株式会社 高瀬 拓史 Sep, 7, 2013 「マラケシュ条約とDAISY/EPUBのこれから」発表資料  自己紹介 • 高瀬 拓史（たかせ ひろし） @lost_and_found / ろす • イースト株式会社 EPUBエバンジ... 続きを読む

WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ

2015/06/13 30 users 二の次 ツッコミ React WAI-ARIA 性質

タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので... 続きを読む

なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum

2019/06/25 23 users 文言 おさらい ラベル 代替テキスト ユーザーテスト

ユーザーテストの結果、いくつかの問題点が明らかになりました。問題点の多くは、ラベルの文言の変更、代替テキストの調整といった微修正レベルで対応できるものでしたが、中に一つ大物案件がありました。それが、タブの問題です。 何が問題かおさらい ユーザーテストでは、スクリーンリーダーでタブを読む際に問題が起... 続きを読む

良いユーザ体験を目指すためにはアクセシビリティが大事だという話：アクセシブルなウェブに向けて - Liner Note

2013/03/10 23 users Google Glass ユーザ体験 勉強 アクセシビリティ

ユーザ中心デザインとか、ユーザ体験デザインとかの勉強をしてかれこれ3年くらいになるんですが、そのためには情報のアクセシビリティが良くなることが特に大切だと最近は思ってるんですね。 で、今日はその理由とか、じゃあどうアクションするよ、みたいなところを書いてみます。 Google glassとアクセシビリティ まずは、「アクセシビリティとユーザ体験ってどう関係あるのよ？？」と思った人向けに小話をひとつ... 続きを読む