タグ アクセシブル
人気順 5 users 10 users 100 users 500 users 1000 usersHTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス
棒グラフや折れ線グラフ、どうやって実装していますか? Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む
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 下記は各ポイントを意訳したものです... 続きを読む
シンプルな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も用意されているので、すぐ使いたい人にも対応! また、サイト制作中のワ... 続きを読む
マークアップのいまいちな箇所を指摘してくれるブックマークレット -DiagnostiCSS | コリス
ブラウザで表示しているページのアクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれるブックマークレットを紹介します。 DiagnostiCSS DiagnostiCSSでチェックできるのは、以下の項目です。 インラインスタイル 無効リンク 空要素 必須属性のない要素 廃止予定の要素 ページで実行すると、赤い枠で囲まれます。 altがないとか、インラインスタイルを使ってる... 続きを読む
テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio | コリス
テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応してい... 続きを読む
[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css | コリス
ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用(要JavaScript... 続きを読む
[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか? Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む
アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス
アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...] 続きを読む
[JS]jQueryのプラグイン33+1選 -2009年2月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slider 1.5 自動 [...] 続きを読む
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility(英語版)... 続きを読む