こんにちは
ここ最近の日記の内容に非常に興味があるのですが、いかんせん(X)HTMLやらCSSに対しては趣味レベルの知識しかありません
出てくるタグ名・属性名などで検索して少しずつ学んでいくのが良さげでしょうかね…
んんん、俺も趣味レベルなので何とも・・・HTML-lintが有益なアドバイスを授けてくれると思います！鵜呑みにできないあたりが参考材料にうってつけだし、解説の充実度は掛け値なしに素晴らしいです。
俺の場合、てきとうにページを書いてlint先生に投げる→インプレでボコられる→解説に納得したり、納得できず検索したり→いつのまにか覚える、という流れでした、覚えても片っ端から忘れていくんですが・・・
大きめの表だと、<table>のままで「aDesignerの音声検証」をパスするのは不可能
<th>内に外部リンクつけてたけど、そんなもん評価されない<th>や<dt>はブロックレベル要素を持てなくなるので(HTML5)、見出しジャンプも使えない9個以上のページ内リンクは警告される（数字入力の性質とか考えれば、納得できなくはないけど）
追記： まったくの勘違いでした・・・俺の見たエラーは何だったんだ・・・
accesskeyやtabindexを割り当てまくるのは、環境汚染に等しいので却下IE7用のCSSを書いた瞬間に、aDesignerでも表もどきが正しくレンダリングされて驚愕した
CSS Validatorにおける、配色についての警告のルールが、なんか分かったような気がする
<a>は例外っぽい（a:link, a:visited, a:focus, a:hover, a:active等）いわば"Cascading Progressive Enhancement"?さっそく試してみたら予想外に微妙な気分
コメントで情報いただきとても助かりました！スタンバイOKです！
<abbr>を全部削ると、冒頭の例の所要時間は67秒に短縮された。アクセシブル！<th>のscope属性は便利だなあ、今後は絶対つけていくことに決めたrole="presentation"ならテーブルレイアウトもオッケーらしい
role="presentation"はborder属性を書いちゃダメ<th>にブロックレベル要素を入れることはできなくなった<caption>にブロックレベル要素を入れることができるようになったいただいたコメントはいずれも大変ためになりましたーありがとうございます！
text/htmlの正式な改行コードはCRLF(4. Encoding considerations [RFC 2854])
text/xxxが問題なく読めるのは、寛容なブラウザのおかげ？HTTPヘッダの正式な改行コードもCRLF(3.7.1 Canonicalization and Text Defaults [RFC 2616])
XMLプロセッサは改行をLFで正規化する義務がある(2.11 End-of-Line Handling [XML 1.0])
旧ブラウザは仕様に従って未知要素をインラインで表示するので、新要素の一部は要display: block;
[hidden] { display: none; }<audio>や<video>のコントロールにも細工が要るけど、そこまで知らん本当はCSSであれこれする前に、JavaScriptでDOMを追加しとかないとダメ
<mark>要素は、CSSで文字色と背景色を明示しないとダメ（Opera 11.61が融通きかないので）<acronym>要素は廃止されるので、読み上げ方法の区別は他の方法で示す必要がある
data-* attributesは単独では目的を達成できないし、無意味さは<span>と同程度
<abbr title="Internet Explorer 8" data-pronunciation="[aɪ] [iː] [éɪt]">CSS Speech Moduleは最も楽に目的を達成できるけど、しょせん装飾だし、実装例がほぼ皆無
.spellout { speak-as: spell-out; }<abbr title="Internet Explorer 8" class="spellout">IE8</abbr>-xv-つきでサポートしていたらしいけど、現行版は未確認というわけで、読み上げのセマンティクスを表現するための満足な方法はHTML5には存在しない
html5doctorの邦訳では、title属性値を持たない<abbr>が使えるように読める
しかし、私たちは、それでもなお、
<abbr>を入れる必要があるのだ。スクリーンリーダに、"HTML"をどうにかして発音させるのではなく、H-T-M-Lと確実に読んでもらえるようにするためだ。
<acronym>と<abbr>が統合された現在、一字ずつ読まれることを期待はできない<abbr>を警告するValidatorも、日本には存在する打つ手なし、諦めましょう＼(^o^)／
role="presentation"って入れとくと、読み飛ばしてもらえるらしいよ とかはXMLではundefined entityなので、application/xhtml+xmlでは使えない
text/htmlと切り替えて使い回すなら、数値文字参照で統一したほうが簡単<table border="1">はCSSを切っても枠線が表示されるので便利IE9はおまじないを入れないとHTML5モードにならない、という噂を見かけた・・・まじすかそれ
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />application/xhtml+xmlを送ってるから、常に標準モードになるはずだけど、HTML構文の場合、<meta charset="UTF-8" />はLynxが解釈しないので、旧来の記法で書く
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><?xml version="1.0" encoding="UTF-8"?>で片付けるHTML5でいうところのparagraphは常に明示し、暗黙的なparagraph（匿名ブロック）は避ける
| Bad | Good ... ? |
|---|---|
|
|
後者のほうが機械にとっては好都合（ああ、セマンティックってそういう・・・）
ついでに旧称ブロックレベル要素では、閉じタグの改行位置を細工しておく（あるいは改行せず閉じる）
display: inline-block;とかで余計な空白類文字が入る改行やインデントを扱う仕様上、ソース上での改行は必ず余計な空白類文字が入る
| Code | Actual |
|---|---|
|
途中で 改行 |
| Workaround | Actual |
|---|---|
|
途中で改行 |
閉じタグ内のキモい改行も、コメント挟む改行も、バッドノウハウすぎる
ついでに、従来は<pre>の中でタブ文字を使うのは、厳密にはNGとされていた
UTF-8で、文字サイズが全部相対値指定で、書体がなんかよくわからん条件を満たしているとき、
どんどん沼に飲み込まれてるー！？
ほどほどにネ！
泥沼にはまってる自覚はあります；単にまともなページを書きたいだけなんですが・・・
あとなんだか地味ーに3.0.1、微修正っぽいけどそのたった一行すらわからNEEEEEEEEEE！
おお、情報ありがとうございます！俺もよくわかりませんけど！
a:focus *, a:hover * {...}と書けることに気付いた:matches()疑似クラスなら、After (2)の例も簡潔に書けそう配色だけWCAG 1.0 / 2.0に準拠してはみた（Colour Contrast Analyser 2.2大活躍）
今まで試したCSSチェッカ全般にいえるけど、CSSなのにCascadeを解釈してくれないのが不思議
colorとbackground-colorを一緒に書かないとアウアウ扱いされるinheritやtransparentは一切認めてくれない<body>内の描画されうる全要素について、文字色と背景色のペアを明示的に指定しなきゃダメこんな書き方はどう考えてもおかしいと思うけど、もっとスマートに書けたりするのかしら
| Before: | |
|---|---|
| After: | |
inheritがダメなんだろ？アクセシビリティ的に問題あったりするんでしょうか？* { text-shadow: ...; }とかで済みそうそういえば、Chromeで■のリンクが反応しなくてなんでだろうとは思っていました。あれってCSSで中身を入れ替えて実現していたんですね。
あはい、CSS界隈には画像置換(Image Replacement)なる手法があることを知って、さすがプロは変なこと考えるんだなーと興味が湧きまして。画像じゃなくてもすげかえられそうな気がして試したらできた（ように見えた）ので、その時点でIR法は俺の脳から揮発したのですが、クリックできないリンクとか最悪ですよね！アクセシビリティチェッカーはこういう箇所も指摘してくれるといいのに・・・とにかく後で直しておきますー
Chromeだと、公式ヘルプに特に書いてないので、ボランティアの拡張機能を導入して、サイトの提供する代替ユーザースタイルシートを切り替える感じかな
情報ありがとうございます！Chrome WebStoreでalternate stylesheetで検索かけたら2件ヒットしました。Alt CSSがいい感じかな？Style Chooserは効くページと効かないページがあって、原因が特定できてないっす。Safariは検索でのっけからSafari 5.1 won't load "alternate stylesheets"
とか出てくるし、サイト側でstyleswitcher.js用意するとか、常時スクリプト無効の俺には許容できない記事がひっかかる・・・
<p> 段落 ちがう<p>は日本語でいう段落とは別物This is home of the Falcons!は、文章を視覚的改行でぶったぎってる一方で<br>は「paragraph内のテーマグループの分割に使ってはならない」と明記されてしまった
br elements must not be used for separating thematic groups in a paragraph.
<br>が例外的に認められているのは、俺にはまったくピンとこない感覚<p>で改行しちゃダメ」とは書いてない<p>でオッケーってことでいいよね日本語でいう意味段落（そんな単語は初耳だけど）に対応する要素は、HTML5に存在しない
<section>は入れ子できて便利だけど、見出しを持つ義務があるので、意味段落の表現には不適切<br>は要素の前後のテキストを構造化しないので何の役にも立たない（CSSで字下げとか不可能）<hr>は「段落レベルのテーマ区切り」という意味を持ったが、これもテキストの構造化とは無関係<article>, <aside>, <header>, <footer>, <nav>, <figure>もすべて不適切<p>は日本語でいう意味段落(Semantical Paragraph?)にはなりえない（ブロックを持てないから）
<l>要素が用意されていたらしい、これが消えたのは残念すぎる<p>を日本語でいう形式段落(Formal Paragraph?)とみなすなら、意味段落は<div>しかない<p>は実際は形式段落ですらない<l>同然の存在っぽいので、俺は今後は文章の途中であろうとなんだろうと一切気にせず<p>によってセマンティックにぶったぎっていこうと思いましたU+0000〜U+FFFFのみ）個人的にはﾐｬｯﾐｬｰ・・・を
ﾐｬｯとか書くのはめんどくせーからUnicodeにしたくはあったけど、向こうの圧力がなんかモヤモヤします
<section>を明示しなくて良いので手打ちは最高に楽ですよね、あとたぶんCSS3と相性よさげ<audio>タグでOggを使いたかったりしますけどhitkey.nekokan.dyndns.info/を検証すると以下のエラーが指摘される。
text/htmlは仕様違反。Editor's DraftとHTML5.JPにて確認。<a href="#A">を<a href="xxx.htm#A">とかに直せば回避できてしまう。text-autospaceなんて無かったがっくりしつつ眺めてたらEmphasis Marksとか増えてる・・・WebKitではもう使える
<ruby>文字<rt>●●</rt></ruby>とかやらなくてよくなるのは心強い<table>や<dl>で代用するしかなさそうだけど、いいのかな<ruby>を捨てるのが・・・確かにクソ面倒だけどThe W3C CSS Validation ServiceではIE独自プロパティzoom: 1;などが軒並みアウトになる
* html selector {...}*:first-child+html selector {...}<!--[if lt IE 9]>...<![endif]-->などを使うほうが楽だし確実Another HTML-lintのHTML5対応版を見つけたけど、まだβ版っぽくて、化石項目が有効になってる
checked="checked"とか）を使うなら、「108:」は切らなきゃダメ<p id="A">に対して<a href="#A">のようにするなら、「220:」は切らなきゃダメ全角空白や<br />タグの連発は、内容と見映えを分離する観点からは好ましくない、らしい
CSS3のtext-autospaceはIE限定で有効なはずだけど、俺のIE8では効いてない
.as {-ms-text-autospace: ideograph-alpha;}<span class="as">文字ABC文字ABC文字</span>文字␣ABC␣文字␣ABCタグも空白も入れないのがベストだとは思う： 文字ABC文字ABC
アクセシビリティといわれても試せないことには改善しようがないので、フリーの音声ブラウザを探し中
オープンソースのスクリーンリーダーNVDAは日本語も読めるうえ、音声ブラウザとしても使える
<abbr title="Internet Explorer 8">IE8</abbr>と書いてるのに、HARELはとても参考になるけど、残念ながら理不尽な判定が多いので、満点を目指すわけにはいかない
<img>要素に対してwidth/height属性を求めてくる（仕様違反）<link>のrev="made"はHTML5で廃止されるし、そもそもHTML4.01の仕様ですらない<style><!--...--></style>で「スタイルシートがありません」と怒られる
<style>タグ内のa::after {content:'\20\25bc';}とかも怒られる、うっそおい・・・
いろいろまずいことは承知の上でa::after {content:' ▼';}に戻した
<hgroup>で分けてdisplay: inline-block;だ<li>が8項目以上ある？よろしい、ならば分割だ（注： よろしくない、今の実装に合わせろとか）年月日表記にスラッシュまたはドットが使用されている？テキストノードの該当箇所は全部直したべ？
\d\/\dが引っ掛かってた（\d/\dに全置換して解決）文字色と背景色の明度差が足りない？Fujitsu ColorSelectorの基準と違うねんけどどうなの
<!DOCTYPE html>など使うまいThe W3C Markup Validation Service, The W3C CSS Validation Service, Another HTML-lint, HAREL
諸事情から、内容と見た目は極力変えずにソースだけこっそり書き換えた
<table>で表現してたり、<ul>でインデントしてたり、宇宙すぎて感動したので！<table>どころか、<div>や<span>から<br>まで、ヤケクソで全部排除した