覚え書き

2015年1月27日

第5回 社内マークアップ部

勤務先の部活動、マークアップ部の第5回のお題は「インデックス」。ワイヤーフレームは以下の通り:

インデックスのワイヤーフレーム

今回もいろいろ論点があるように思いますけど、マークアップ言語としては HTML5 を使うとして、自分にとっての主な論点なり前提条件は以下の通り:

  • 全体は単一のリストかどうか。先頭の項目は他の4項目と比べ、画像の表示エリアが大きいほか、リンクラベルにリード文が含まれていたり、リンクラベルに続けてテキストが存在している点において、情報構造が異なります。しかし、先頭の項目と他の4項目を一括りにすることに難があるほど情報構造上の相違は大きくないと感じましたし、むしろ一括りにしたほうが効率的にスタイル付けできる(カテゴリー表記とか、画像とテキストの並びといったスタイルは共通している)と期待して、単一のリストと捉えました(画像と横並びになったテキストのひとまとまりが li 要素を構成、反復されているという認識)。なお、時間軸に関する情報が入っているわけでもないので、順番を入れ替えても破綻しないリストと考え、ol ではなく ul 要素にすべきと考えます。
  • 画像はコンテンツの一部か、それとも純粋に装飾としての意味しか持たないか。前者であれば img 要素としてマークアップすることになりますし、後者であれば背景画像として CSS で表示させることになります。自分は前者という前提を設ける(= img 要素としてマークアップする)ことにします。この手のモジュールにおいて、項目内容が更新されるその都度 CSS に手を入れる運用というのはちょっと考えにくく、裏側で CMS の類が動いていることを想像すれば尚更なので。img 要素であれば、次項のリンクの扱いについてもポジティブなマークアップにしやすいというメリットがあります。
  • 画像はリンクとして機能すべきかどうか。画像のすぐ右腋にリンクラベルが並んでいるわけですが、ラベル文字列だけでなしに、画像をクリックないしタップしてもリンク先へ遷移できたほうが、ユーザビリティ的に好ましいと考えます(むしろ li 要素内容全体がリンクとして機能すべきという論もあるでしょうが、そこはテキストに対するリンク下線の有無で混乱を招くおそれがあると考え忌避)。前項で、画像は img 要素としてマークアップすることにしていますから、WCAG 2.0 実装方法集のH2: 隣り合った画像とテキストリンクを同じリンクの中に入れるに倣う感じになります。その場合、画像については position プロパティで絶対配置する感じになるはずで(マークアップ上はリンクラベルを画像より先に記述する前提)、レスポンシブな実装とは相性があまり良くなくなるのですけど、ひとまず仕方ないかなぁという感じ。
  • カテゴリー表記、リード文リンクラベル、画像、先頭の項目にあるテキスト部分については、制作者スタイルシートが無効な状況においてそれぞれを視覚的に判別しやすいよう、span ではなく div 要素で適当な名前をつけて括る方向で。なおカテゴリー表記については文字に下線がついていないのでリンクではない(同じカテゴリーのインデックス画面へのリンクではない)と判断。
  • 先頭の項目にあるテキスト部分ですけど、末尾が「...続き」となっています。この部分、実直にそれがワイヤーフレームの一部を成していると解釈するかどうか、で判断が微妙に変わってくるような。もし仮に「...続き」という文言が実在するとしたら、それを忠実に再現しようとするより、続かない(このページ上で完結する)文章を掲載したほうが良いように思います(どのみち「続き」はリンクの遷移先にあるのは間違いないのだから)。

「第5回 社内マークアップ部」の全文を読む

Diigo Bookmarks 01/27/2015

Posted from Diigo. The rest of my favorite links are here.

2015年1月26日

円環ピクトリアル No.2

魔まマ オンリーイベント~もう何も恐くない~17で頒布されたという同人誌『円環ピクトリアル No.2』を、イベントに参加していないながらも発行者である富永さんのご好意で直接購入させていただきました(100円)。ありがとうございます。

ファンの人(というか富永さん)からすれば怒られそうだけど、魔法少女まどか☆マギカ(以下「まどマギ」)に関して断片的な知識こそ持っているものの、いまだかつて通しで見たことはありません。そんな僕がなぜこの同人誌を手に入れたかったかというと、テーマが「ウェブにおける情報発信とアクセシビリティ」だからです。加えて発売を知ったタイミングと前後して、よーねんさん(誰)が

実際は語りたいけど、いざ語ると先行者(誰)からまさかりが飛んでくるから君子危うきに近寄らず的な対応なのではという気がしなくもない。もしそうなら普段から語る古参(謎)の人たちは視点を変える必要があるように思ったり思わなかったり

つぶやいていました。前後の文脈を分かっていないながらも、そのつぶやきを目にしたとき、まるで自分に向けられた言葉のように感じたのですね。先行者などと気取るつもりは無いけれど、しかしWebアクセシビリティに関して自分は間違いなく古参の一人という認識がありますから。

「円環ピクトリアル No.2」の全文を読む

Diigo Bookmarks 01/26/2015

  • "You don't have to be a professional web designer to create and send HTML email. In this guide, we'll explain the basics of HTML email and run through the tips and best practices you'll need to consider as you develop your own email marketing plan."

    tags: book webdev email

  • "Today, most new features require months or years of standardization, followed by careful implementation by browser vendors, only then followed by developer feedback and iteration. We prefer to enable feature development and iteration in JavaScript, followed by implementation in browsers and standardization."

    tags: web standards

  • "Of the 84,054 pages I parsed (I excluded XML, ISO files, and so on), I found that 39,433 use the lang attribute on the element. That's just about 47% (46.914% if I understand significant digits correctly)."

    tags: html

  • "This page is intended to be a resource documenting alternatives (hopefully better alternatives) to longdesc in HTML 5. It is a work-in-progress and I will link example content below as I create it."

    tags: html accessibility

  • "In other words, writing good CSS means you need magical powers and the ability to predict the future."

    tags: css html

Posted from Diigo. The rest of my favorite links are here.

過去の覚え書きについては月別アーカイブからご覧ください。

現在地:ホーム > 覚え書き