（メモ）W3Cアクセシビリティ成熟度モデルの話 - 水底の血
界隈的にはWCAG 2.2 CRが話題になってると思いますけども、WCAG 2.2 CRと同じ日に、ドラフトノートとしてW3C Accessibility Maturity Model（W3Cアクセシビリティ成熟度モデル）という文書が発行されています。 これは何なのか？というのは、この文書のAbstractには次のようにあります。 The W3C Accessibility Maturity Model is a guide for organizations to evaluate and improve their business processes to produce digital products that are accessible to people with disabilities. Use of the W3C Accessibility Maturity Mod
属性セレクター - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
jQueryの使い方「基本の書き方と考え方」 - STAND-4U
「jQueryはもう古い」「脱jQuery」なんて言われているが、今でもjQueryは簡単・便利につかえて、プログラミング初心者のファーストステップに超おすすめなのがjQuery。 そんな、jQuery初心者の方にむけ、今回はjQueryの「書き方」と「考え方」を具体例を交えながら学習していこう！ ▼動画で学びたい方は、こちらからどうぞ↓ なぜ脱jQueryと言われるのか？ まず、なぜ脱jQueryと言われているのだろうか？いくつかあるが、その一部を抜粋しよう。 jQuery本体を読み込む事が、WEBサイト表示の遅延になる 各ブラウザが進化し、jQueryの恩恵が少なくなった ReactやVue.jsなどモダンなフレームワークとコードが競合する場合がある 古いプラグインなど動作しないもの等がある 初心者はjQueryを学んだほうが良い？無駄な学習になる？ 結論から言うと「脱jQuery」と
アクセシビリティ対応済みのドロワーメニュー - Google 検索
2023/08/01 · ドロワーとはボタンのクリックイベント等をトリガーに画面の横からシュッと出てくるメニューのことです。今回の完成物は以下になります。 ドロワー：Close ...
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
押したキーのキーコードを取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
押したキーのキーコードを取得するには、イベント引数であるevent.keyCodeプロパティで取得できます。 取得できるイベントはkeyup、keydown、keypressです。 keyCodeプロパティはイベントの引数で参照できますが、IE8以下ではwindow.eventでのみの参照が可能となっています。 デモ ※ 何かキーを押してください。 サンプルコード JavaScript document.onkeydown = function(e) { var keyCode = false; if (e) event = e; if (event) { if (event.keyCode) { keyCode = event.keyCode; } else if (event.which) { keyCode = event.which; } } alert(keyCode); };
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる？
最近作成したWebサイトをデザインしたとき、特別なニーズや障害のある人にとってサイトがアクセシブルになるためにどのくらいの時間と労力を使いましたか。たぶん、多くの答えは「なにもしていない」だと思います。しかし、インターネットユーザーの中には、色を区別したり、テキストを読んだり、マウスを使ったり、あるいは、単にWebサイト構造が複雑でナビゲートするのに問題があるために、サイトのアクセスに苦労する人がたくさんいることを否定する人はいないと思います。 アクセシビリティへの配慮は、チェックしたり、解決策を実装したりするのに労力がかかるので、無視されがちです。Web開発者は根本となる基準を知っておくだけでなく、その基準が満たされているか常にチェックしなければなりません。自動的に基準をチェックして、もっと簡単にアクセシブルなWebサイトをつくれないでしょうか。 この記事では、作成するサイトやアプリケー
始まる前から終わってたクラウドmiChecker - 水底の血
クラウド環境でウェブアクセシビリティ検査報告書を作成する【クラウドmiChecker】を公開 | インフォ・クリエイツ http://www.infocreate.co.jp/archives/1613 私が今認識しているこのツールの問題点は2つあって、1つは<html lang="ja">と指定しているにも関わらず、「n件、問題が見つかりました。検査箇所（行番号）をクリックして確認してください。問題ではない場合もあります。(問題あり)」と表示され、さらに「文書内で主に利用されている言語をlang属性を用いて明示してください (例： <html lang="ja">) 」と指摘される件で、もう1つは<!DOCTYPE html>とHTMLの先頭に置くと、「n件、検査が必要な箇所が見つかりました。検査箇所（行番号）をクリックして検査してください。(要判断箇所)」と表示され、説明として「文書の
Pa11y CI でアクセシビリティテストを自動化し日本語のレポートを HTML 形式で生成する
Node.js で動作する CUI Web アクセシビリティチェックツール 「Pa11y」 ベースの CI ツール 「Pa11y CI」 の導入から、複数 URL に対するアクセシビリティテストを一括で実行し、最終的に日本語のレポートを HTML 形式で生成するまでを解説します。 かなり前 （2016年だった） に Node.js で動作する CUI Web アクセシビリティチェックツール 「Pa11y のレポートを日本語で出力する方法に関して記事を書きました。 参考 pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った Pa11y のアップデートによって上記記事の内容は古くなっていて、今は使えない状態になっているわけですけども、Pa11y 自体はずっと使わせて頂いているのと、今は Pa11y ベースの CI ツールとして 「Pa11y C
miCheckerってOSSだったんだなとか（HTML5対応してた） - 水底の血
HTML5に非対応で一部方面では有名な（？）miCheckerがバージョンアップして、HTML5対応をいつの間にかしていたみたい*1。 総務省｜情報バリアフリー環境の整備｜みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0からダウンロードできる。 ところで、@kim_upsilonさんが昼に、 miCheckerはOSSらしいんだけどソースコードどこにあるのかよく分からなかった— upsilon (@kim_upsilon) 2016年4月21日 と呟いてたので、軽く調べたところ、それっぽいものが見つったのでついでにメモしておこうと。 Bug 489096 – HTML5 support (Eclipse Bugzilla)HTML5対応のBugzillaのスレッド。 org.eclipse.actf.examples.git - technolo
「アクセシビリティ」気にしてますか？適切なコントラスト比で優しいwebサイトに！ | ハニコログ。
ブロガーのみなさま、「アクセシビリティ」ってチェックされていますか？ アクセシビリティの高いサイトは、誰もが求めている情報に簡単にたどりつけ、利用できるように配慮ができているサイトです。 デザイン性や自分の好みだけでサイトを作成すると、アクセシビリティへの配慮ができないことも。配慮ができていないと、「せっかく訪問してくれたのに”情報”にたどりつけない方がいる」という可能性があるんです。 この改善は、総務省も「情報バリアフリー環境の整備」として取り組まれており、Googleも長期間かけて今も取り組んでらっしゃいます。 「ブログ」を書いて「情報」を発信している私たちも他人事ではありません。 アクセシビリティへの配慮で一番とっつきやすい「コントラスト比」について記録します。 アクセシビリティのチェックは、ツールを使ってすぐに出来ます。 誰もが「求める情報」へたどり着ける、優しいサイト作りを目指し
Webサイトにおけるアクセシビリティについてのメモ - はしくれエンジニアもどきのメモ
Webサイトにおけるアクセシビリティについてのメモ Webサイトにおけるアクセシビリティ関連の情報をまとめておきます。 アクセシビリティ・ツール 先にツールから紹介しておきます。 miChecker みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) ダウンロードページ 総務省が作って公開しているアクセシビリティチェックツールです。引用を以下に。 総務省では平成22年8月のJIS X 8341-3:2010の改正に合わせて、 平成22年度に「みんなの公共サイト運用モデル」を改定するとともに国、地方公共団体等におけるウェブアクセシビリティ評価の取組を促進することを目的として、 「みんなのアクセシビリティ評価ツール（miChecker（エムアイチェッカー））を開発しました。 miCheckerは、ウェブアクセシビリティ対応の取組みを支援するために、総務省が開発し、
HTML_CodeSniffer
あなたのHTMLが規約に準拠しているかチェックしましょう HTML_CodeSnifferは、HTMLソースコードをチェックし、設定したコーディング標準に違反している部分を検出するクライアントサイドスクリプトです。HTML_CodeSnifferはすべてJavaScriptで記述されているため、サーバーサイドの処理を一切必要としませんし、開発者はルールを追加することにより、独自の規約も遵守するよう拡張することができます。 てはじめとして、HTML_CodeSnifferにはWeb Content Accessibility Guidelines (WCAG) 2.0の3つの適合レベルと、アメリカ合衆国リハビリテーション法第508条のWeb関連部分の規格が付属しています。また、どんなWebページでもアクセシビリティをチェックできる監査インターフェースがブックマークレットで提供されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery: focusin (フォーカスイン) の解説 | 独学 Webプログラミング! - YWORK
オープンソースのアクセシビリティ・チェックツール
Search Result for "アクセシビリティ" on Slideshare