Raindrop.io Bookmarks 12/24/2024

2024年12月24日 著

• Potential dangers of status messages - Bogdan on Digital Accessibility (A11y)

  "Status messages will flatten their content. This means that if I have a HTML list inside the wrapper for status messages the list semantics will be lost (or any other semantics)."

• Design Tokens Course with Brad Frost and Ian Frost

  "World-renowned design systems experts Brad Frost (creator of Atomic Design) and Ian Frost teach you everything you need to know about creating an effective design token system to help your organization design and build at scale."

• To blog something to show | Stefan Judis Web Development

  "Because having a blog shows that you care. You care about the internet. You care about a specific topic. You care about sharing knowledge. You're into something."

• HTML inert Attribute | 12 Days of Web

  "inert is meant for making an HTML element (and all HTML elements inside of it) inactive, not focusable and ignored in the accessibility tree because the respective element is either partially or fully obscured."

• Recap of the State of the Word 2024  - WP Tavern

  "WordPress now powers 43.6% of the internet and, according to W3Techs, has a 62.3% CMS market share. WordPress powers 58.5% of all the websites in Japan and has an 83% market share, which is 31x Shopify, which is only at 2.7%."

• PSA: Stop using the title attribute as tooltip! - HTMHell

  "The title attribute is inaccessible. Users of mobile phones and tablets, users of assistive technologies, and keyboard only users cannot interact with it. If you want a tooltip, a much better, and accessible, option is using the popover attribute."

• CSS box-decoration-break | 12 Days of Web

  "When an element is broken across multiple lines (or columns), box-decoration-break enables you to decide whether each segment should clone the decorations for themselves or if the box should remain sliced."

できるポケット HTML&CSS 全事典 改訂4版

2024年12月24日 著

2008年5月に開催されたイベント「Designer meets Designers 03」でご一緒に登壇して以来？　何かと懇意にしていただいてきた加藤さん（当時はデジパ所属、現在はバーンワークス代表）より、本日発売の著書『できるポケット HTML&CSS 全事典 改訂4版』をご恵贈いただきました。ありがとうございます！

手にしてまず驚いたのが、やはり厚さ。B6判と小ぶりのサイズながら720ページもあって、測ってみたら自立可能な3cm超！絶対ポケットには収まりません笑。しかし見た目から想像するほど重くはなく、片手でラクに持てる絶妙な重量感とバランス。そして全ページがカラーにもかかわらず、税込で2,500円を切る驚きの価格設定！！実に素晴らしいですね。

中身についても、さすが長年Web標準に携わってこられただけのことはある......すでに全ページを読んだわけではなく、ざっと眺めた程度ですけど、項目ごとの情報量は必要最小限に厳選されている印象。地味にプロパティ名なんかにカタカナで読み仮名がふられているのは、面白いっていうか親切だなーと。

紙媒体ゆえの難しさもしっかり織り込まれており、当然ながら日進月歩のHTML&CSSすべてが網羅されているわけではありません。入力途中では検証しない（ちょっと良いUIおれおれAdvent Calendar 2024 - 23日目）を読んだのがきっかけで、:invalidと:user-invalidが本書でどう対比されているか調べようと思ったら、前者は掲載されていたけれど、後者の項目はありませんでした。

その点、事情を察しつつ加藤さんに質問してみたのですけど、やっぱりねーというお返事。発売までのスケジュールであったり価格設定など、ありとあらゆる部分に影響してしまうがゆえに、ちょっとした項目の追加でも一筋縄ではいかないのですね。とはいえ本書、日常的にHTML&CSSを触るような方であれば、机の上に常備しておいて損はない一冊に仕上がっていると思います。

いまどき、ググったりMDNで調べた方が速いなんて状況は往々にしてあるにせよ、長年にわたり正確かつコンパクトに伝えるという至上命題と向き合ってこられたであろう加藤さんの文章は、理解しやすいハズですから。また何かを調べる目的でなくとも、たまーに手に取りパラパラ眺めては「おおこんなのもあったのか」って驚いたり笑、自身の知識を再確認するのも一興でしょう。

Raindrop.io Bookmarks 12/22/2024

2024年12月22日 著

• A progress update on reading-flow - Rachel Andrew

  "As soon as I realized this problem existed when using grid, I felt as if we were giving people potential with one hand but then removing it with the other. I'm very happy that we're now fixing that problem."

• View Transitions

  "A collection of demos to show off View Transitions. Built by Bramus, Chrome DevRel at Google."

• Web Performance Calendar » When users interact

  "Users expect to be able to interact with the site once the page is largely visible, however, the user experience for interactions is sub-optimal until the time to interactive which can be much later in the page's loading cycle."

• What Makes a Great Engineering Manager?

  "People don't quit jobs, they quit bad managers. Here's what great engineering leadership actually looks like"

• Character-based alignment - CSSence.com

  "we can work around this! Eric Meyer came up with a really advanced solution using CSS transforms. If you're looking for something simpler, albeit less versatile, I may have something in store for you."

• Web Performance Calendar » Simple Web Performance Mentoring

  "In general my advice is: don't let perfect be the enemy of the good, and may you prosper in your web performance journey and the people you help will prosper too."

• Keyword Vitals

  "Keyword Vitals helps you discover how web performance impacts your SEO keywords. It shows inline performance scores on Google search result pages for overall Core Web Vitals, LCP, CLS, and INP. "

WCAG2/JIS X 8341-3にある達成基準の「つまみ食い」のススメ

2024年12月22日 著

アクセシビリティ Advent Calendar 2024の22日目の記事です。

12月19日付けで、ウェブアクセシビリティ基盤委員会（WAIC）のサイトに「画像の代替テキストから始めましょう」と題したコラムを掲載していただきました。先日の覚え書きではコラムを書いた動機、背景に触れましたが、この記事はコラムの補足という位置付けで書きます。コラムの冒頭、私は以下のように記しました。

個人的な印象ですが、ウェブアクセシビリティの重要性や必要性を学び、理解したばかりの方々のなかには、やる気に満ちて意気込むあまり、現実離れした高すぎる目標を掲げる方が少なくありません。

敢えてコラムでは掘り下げませんでしたが、ここでいう「現実離れした高すぎる目標」とは、具体的にはWCAG2の適合レベルAAへの適合、JIS X 8341-3の文脈で表現するならば適合レベルAAへの準拠のことです。

いやいや、目標として高すぎるなんてことないのでは？　との意見は当然あるでしょう。実際、アメリカで今年4月に更新されたADA Title IIやヨーロッパのEN 301 549 V3.2.1（PDFファイル）、日本のみんなの公共サイト運用ガイドライン（2024年版）はいずれも、要件に適合レベルAAを掲げています。その流れを汲み、大手/グローバル企業を中心に、適合レベルAAへの適合/準拠を目標に据える民間企業も増えているように感じます。

しかし正直、適合レベルAAに適合/準拠したWebコンテンツが増えている、総じてWebのアクセシビリティが全体的に改善されているとの感覚は、個人的に見聞きする話を総合する限り、持てないのですよね。Web Almanac 2024のAccessibilityの章を眺めても、2年前の状況と大差ないわけで（もんどさんの書いた「Web Almanac 2024にみるWebアクセシビリティ」参照）。

「WCAG2/JIS X 8341-3にある達成基準の「つまみ食い」のススメ」の全文を読む