テーブルとアクセシビリティ -- ごく簡単なHTMLの説明
大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者（聴取者）に伝える機能を持っています（WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました）。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足：テーブルsummary属性の読み上げ 音声ブラウザとth要素 表（テーブル）は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ
餘りに實用的に過ぎるHTML
制作者(webmaster) 野嵜健秀(Takehide Nozaki) 初出 「闇黒日記」平成二十一年八月/九月 公開 2009-12-05 PC Tips PC Columns 平成二十一年八月二十七日 新しいHTML5の草案が公開 | Web標準Blog | ミツエーリンクス HTML 5は、恐ろしく「實用的」なので、理念的には全く面白みのない規格だ。だから私は全く興味を持たないが、何でも實用的に使ひたい實用的な人には受けが良い事だらう。 汎用埋込み要素であるobject要素は、大變興味深いものだ。が、video要素なんてものは實用的に「使へる」だけで、觀念的には何の面白みも無い。 文書の觀念的な構造・抽象的な構造に興味がある人間にはHTML 4.01邊でもまだまだ具體的に過ぎて不滿だつたのだが、文書を利用して「何かをする」事に興味のある人には逆にHTML 4は抽象的過ぎて不滿だつた
What Beautiful HTML Code Looks Like | CSS-Tricks
📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣 I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it! I can’t help but view source on every nice looking website I see. It’s l
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
Validome - A Free Validation Service for HTML and Accessibility - investing.io
Validome – A Free Validation Service for HTML and Accessibility Validome allows Web Developers to check their website’s syntax with a validation service for compliance with the current HTML specification. Validation for accessibility compliance ensures that all users can effectively use your website and understand your content. This tool also provides an SEO audit, which is especially handy for th
HTMLの表（TABLE）のセル(TD)に斜線を引くjavascriptライブラリslash.js by77-WEB@名古屋
HTMLの表（TABLE）のセル(TD)に斜線を引くjavascriptライブラリ slash.js HTMLで作成した表（TABLE）で斜線（主に空欄・記入禁止などを示すためのもの）を引こうと思ったら、そんなもの引けなかった… そんな経験はありませんか？ 従来、VMLを使う方法と画像を使う方法が知られていましたが、どちらも欠点があり、汎用的に使うことができるものではありませんでした。 ・VML…W3C勧告として採用されておらず、WindowsIEのみ使用可能。Firefox等に移植性なし。 ・画像…tdのサイズに合わせて斜線の画像を用意するので、サイト・ページごとに、斜線の必要なtdの数だけ画像を作成しなければならない。 そこで、複数のページ・サイトに導入可能（何度も同じものを作る必要なし）で、誰でも簡単に使えるものを作れないか？と思い、javascriptを利用したライブラリを作成して
文書構造と動的なWebのアクセシビリティ | Web標準Blog | ミツエーリンクス
Mozillaでアクセシビリティ関連のQAを担当しているMarco Zeheが自身のBlogに “The importance of placement of HTML elements in a document” という記事を投稿していました。JavaScriptでモーダルダイアログなどを実現するものがありますが、実装方法によってアクセシビリティを著しく損ねることになるケースが紹介されています。 記事で例に挙げられていたのはThickBox。デモの写真やリンクをクリックするとダイアログが開くのですが、これは新たに生成したdivを文書の一番後ろに追加し、それをスタイルシートで調整するという実装が行われています。 表示上はなんら問題ない方法ですが、Zeheはこの「文書の一番後ろに追加する」ことに問題があると述べています。文書の最後に要素を追加してしまうと、内容の多いページにおいてはアンカー
階層構造：DIV要素と見出し要素
[ skip ] [ 前頁 ] [ 次頁 ] [ 目次 ] [ 検索 ] [ 雑記帖 ] [ サイトマップ ] trackback status ... 正しいHTMLのための覚書 > BODY要素の内容 階層構造：DIV要素と見出し要素 ここではDIV要素によるグループ化と見出し要素による階層区分について書いています。BODY要素内（閲覧する部分）の骨格を決める重要な部分です。 はじめに DIV要素によるグループ化 DIV要素：論理的な階層化 DIV要素：トップページ DIV要素：個別記事 見出し要素による階層区分 見出し要素：適切な使用 見出し要素：トップページなど 見出し要素：個別記事 見出し要素とSEO 以下に記述する各ソースは単に説明するためだけのものです。 1. はじめに HTML文書を記述する際は、段落部分には通常そ
XHTMLをHTMLに変換するプラグイン | チバのブログ
このブログをHTML5に組み替えようと思ったときに面倒だったのが記事内のタグの変換でした。 管理画面のエントリー検索を使って、記事内の「 />」を「>」に変換することは簡単ですが、画像の挿入で生成されるソースも<img />となっているので、それらを新しく記事を書くたびに手作業で変換するのはかなり面倒です。 XHTMLに戻したくなったときにもまた書き換えなくてはいけません。 XHTMLからHTMLへの変換がテンプレートできれば一番簡単だと思い、perlの練習もかねてプラグインを書いてみました。 変換の方法などいろいろと不備はあるかもしれませんが、せっかくなので公開してみます。 XHTML2HTMLプラグインについて XHTML2HTMLプラグインは記事に書かれているXHTML形式の要素（<br />・<img />など）をHTML形式（<br>・<img>など）に変換するというだけの
Blogサイトで見かける変なHTML - 3ping.org
というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。 自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ！)。 コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。 項目をa要素やbrを使って整形する リストをリンクのためのA要素でマークアップして並べるという、ブログのメニュー部分などでよく見られる
XHTML & CSS Lightbox
A valid XHTML & CSS Lightbox (no JavaScript) by Jenna Smith / Opera fix by Tobias Wiersch Click any of the links below to see it in action Lorem ipsum dolor sit amet, consectetur about us adipiscing elit. Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condi
Another HTML-lintにはコメント宣言の解釈に関する不具合がある(?) - (DxD)∞
Day by Day Infinity – Webな日々(HTML/XHTML/CSS/JavaScript/PHP/CMS) Another HTML-lint gatewayに、コメント宣言の解釈に関する不具合らしきものがあることに気づきました。 「WordPressではscript要素や連続するハイフンも自動整形される」に、WordPressで条件付きコメントを使う場合には注意が必要だと書きました。条件付きコメントはよっぽどのことがない限り使わないのですが、ふと気になって、次のようなXHTMLをThe W3C Markup Validation ServiceとAnother HTML-lintでチェックしてみました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Another HTML-lint 導入ガイド | 鳩丸よもやま話
Another HTML-lint とは？Another HTML-lint は、いしの k16 さん作の HTML 文法チェッカです。HTML 文書が DTD に従ってマーク付けされているかチェックできるのはもちろん、アクセシビリティやブラウザ実装との互換性の問題など、かなり細かい点までチェックすることができます。 非常に高機能なチェッカですが、嬉しいことに原則としてフリーです。ありがたく使わせていただきましょう。 ※非営利目的の使用ならばフリーなのですが、営利目的の使用はフリーではないので注意してください。Web制作会社が業務に使う場合、パソコン教室で使う場合などが該当するそうです。その場合のライセンスは 15,000円です。 ※非営利の個人はフリーで使えますが、作者にビールをおごることが推奨されています。:-) Another HTML-lint の使い方概要Another HTML
https://support.microsoft.com/ja-jp/help/970366
すべて Microsoft 製品 Microsoft 365 Office Windows Surface Xbox セール サポート ソフトウェア Windows アプリ OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Azure Microsoft Dynamics 365 Microsoft 365 Microsoft Industry データ プラットフォーム Power Platform 法人向けを購入する Developer & IT .NET Visual Studio
HTML Techniques for Web Content Accessibility Guidelines 1.0 - 7.3 Ascii art
HTML Techniques for Web Content Accessibility Guidelines 1.0 W3C Note 6 November 2000 This version: http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/ (plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML) Latest version: http://www.w3.org/TR/WCAG10-HTML-TECHS/ Previous version: http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/ Editors: Wendy Chisholm, W3C; Greg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/developer/20091124/26.html?rss
Twitter
BODY直下をDIVで揃えたい症候群 (2007-06-12)
構造化美少女W3C子
WDG HTML Validator