アクセシビリティオブジェクトモデル
アクセシビリティオブジェクトモデル 著者: Alice Boxhall, Google, aboxhall@google.com James Craig, Apple, jcraig@apple.com Dominic Mazzoni, Google, dmazzoni@google.com Alexander Surkov, Mozilla, surkov.alexander@gmail.com Table of Contents はじめに モチベーションとなるユースケース アクセシビリティオブジェクトモデル ARIA属性を反映する Spec/implementation status 要素の参照を反映する ユースケース 2: IDREFsを使用することなく関係プロパティを設定する Spec/implementation status ElementInternalsオブジェクトによるカ
W3C Markup ValidatorでWebサイトを検証する | さくらのナレッジ
Webサイトの運営でHTMLを正しく記述することは、アクセシビリティだけでなくSEOの観点でも重要である。ところが簡単なHTMLでもミスをしているWebサイトは多く、普段から客観的に、機械的にチェックしておくことは必須である。ここでは、その代表ツールであるW3C Markup Validatorの利用方法を紹介していこう。 W3C Markup Validatorとは？ Webの技術標準化を進める国際的な非営利団体「W3C（World Wide Web Consortium）」では、HTMLの文法チェッカー「W3C Markup Validator」を無償で提供している。 図1 「W3C Markup Validator」のWebサービス W3C Markup Validatorには、Webサイト上で利用できる図1のW3C Markup Validation Serviceと、オープンソー
Collapsible contents (code block) in comments / spoiler tag · Issue #166 · dear-github/dear-github
Related: #154, isaacs/github#208 GitHub really needs a way to collapse long contents. Being able to collapse entire comments may suffice for most. To me however, the ideal solution would be to collapse any code block with more than 10 lines (or whatever number) by default. The code block would be replaced by the text: Code (130 lines) - Expand Where clicking "Expand" reveals the code block. Being
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
HTMLのタグ選びで迷うところ - Qiita
WHATWGのHTML Living Standardと、W3CのHTML5.2を見比べつつ、たまにMDNをながめながら書いていますが、少し感情的な部分も混じっています。 <article>と<section> A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent" 4.3.12.1 Article or section? | HTML Standard 実装する人の意図によるよ！ってそれを言っちゃおしまいですよ。気持ちはわかるけども。 <article> in principle, independently distri
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
GitHub - emilwallner/Screenshot-to-code: A neural network that transforms a design mock-up into a static website.
A detailed tutorial covering the code in this repository: Turning design mockups into code with deep learning. Plug: 👉 Check out my 60-page guide, No ML Degree, on how to land a machine learning job without a degree. The neural network is built in three iterations. Starting with a Hello World version, followed by the main neural network layers, and ending by training it to generalize. The models
[Adventar] 「品質としてのHTML」という意識とウェブアクセシビリティ | totoco.org
このエントリーはWeb Accessibility Advent Calendar 2017 7日目の投稿です。 初日からちょうど一週間ということで、箸休め（的な）ポエムに少々お付き合いください。私から見えている世界の話を書いてみます。アドベントカレンダーの本題とは少々かけ離れた内容かもしれませんが、同じ線上のトピックということでご容赦ください。 限られた時間のそのなかでは… 今年は小さい集まりなどでウェブアクセシビリティ（以下、A11y）のことを話題にすることがありました。 まだまだデザインカンプを制作したうえでコーディングに着手することの多い、私から見えている世界。クライアントもIT・ウェブ慣れしていない方が多いため、その手法は現時点ではまだ致し方ないなと思っています。 “見た目駆動”+限られた時間でコーディング作業を進めていくなかで、A11yに取り組むには、マークアップに意欲的に取り
![[Adventar] 「品質としてのHTML」という意識とウェブアクセシビリティ | totoco.org](https://cdn-ak-scissors.b.st-hatena.com/image/square/2058097ca2bbf8aeddd521748dd33788b7628fb9/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftotoco.org%2Fimg%2Fpic_20171208.jpg)
ユーメニューの紹介と技術上の工夫とこれから
Web Accessibility Advent Calendar 2017の12月8日を担当させていただきます、有限会社時代工房の柴田と小寺です。 「きけるおしながき umenu（以降「ユーメニュー」）」の紹介と、技術的なメモを書きます。 なお文中、「Docomoのらくらくホン」が度々登場しますが、これはらくらくホンが、スクリーンリーダを搭載したガラケーとして、視覚障害者の利用率が大変高い（高かった）ためです。 まず基本的な紹介から（柴田） ユーメニューは、視覚障害者向けのサービスです。視覚障害者が飲食店を利用する際、飲食店のメニューを知るためには、以下のいずれかの方法が確保されている必要があります。 飲食店が点字のメニューを用意している 飲食店のサイトでメニューを表示していてアクセシブルである お店のひと、あるいは同伴者に教えてもらう しかし、点字のメニューを備えている店舗は少なく、飲
WHATWG の IPR Policy と Governance Structure | blog.jxck.io
Intro WHATWG が IPR Policy と Governance Structure についての更新を発表した。 おおまかな流れと、これによって引き起されそうな変化について解説する。 Working Mode Changes 昨夜(JST)、WHATWG は以下のブログをポストした。 The WHATWG Blog - Further working mode changes ブラウザベンダ各社もこれに賛同を表明している。 mozilla: https://twitter.com/mozhacks/status/940258410477604864 chrome: https://twitter.com/ChromiumDev/status/940253003587694593 safari: https://twitter.com/webkit/status/94025493
WindowProxy「俺の名前はいっぱいあってな…」 - Qiita
これはChromium Browser アドベントカレンダーの十三日目の記事です。本記事ではHTML規格で定義されるWindowProxyを紹介します。ウェブ開発者にとって、ナビゲーションへの理解を深める一助になればと思います。 WindowProxyとはどのようなものか？ HTML規格で定義されているWindowProxyは、端的に言えば「Windowオブジェクトを指し示すもの」であり、その名前の通りWindowオブジェクトへのプロクシです。これはWindowに対してのみ定義されている特別なプロクシであり、他のDOMオブジェクトはこのようなプロクシを持ちません。これはWindowがナビゲーション(ページ遷移)をサポートする唯一のグローバルオブジェクトであるため1です。なぜナビゲーションやグローバルオブジェクトが重要になるのかは、後ほど説明します。 特別な場合を除けばこのプロクシは何もしま
[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita
Elm でどのように見た目をあつかうかについて僕がいま考えていることをまとめました。 結論として「BootStrap みたいな方針でCSSを書いて使えばいいよ」という単純な話を、 だらだら歴史的経緯とかどうでもいい話をしながら書きました。 従来の主張 まず、「見た目をあらわすクラス名を使うべきではない」と言われてきた背景をおさらいしたいと思います。 ここで言う「見た目をあらわすクラス名」とは、BootStrapのような方式のCSSフレームワークで採用している HTMLのクラス名に col-sm-8 や pull-right のような見た目に関わる名前のクラスを入れる方針のことを意図しています。 従来は HTML/JS/CSS の役割を次のように分け HTMLがページの構造のみを記述し JSが挙動のみをあつかい CSSが見た目をどう見せるかを全て制御する こうすることで、見た目の変更をしたい
![[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/989df2838516ca1ca5c77db9950bc47820f3d148/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRWxtJTVEJTIwJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTkxJUUzJTgxJUE5JUUzJTgwJTgxJUUzJTgyJTgyJUUzJTgxJTg2JUU4JUE2JThCJUUzJTgxJTlGJUU3JTlCJUFFJUUzJTgyJTkyJUUzJTgxJTgyJUUzJTgyJTg5JUUzJTgyJThGJUUzJTgxJTk5JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJTkxJUUzJTgxJUE2JUUzJTgyJTgyJUU1JTg1JUE4JUU3JTg0JUI2JUUzJTgxJTg0JUUzJTgxJTg0JUUzJTgyJTg4JUUzJTgxJUFEJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0zMzE1YTMyMjFlMDgxZDEyNmE1MDE5N2FhNWM3ZGMxMQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXJvd00mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRlZTNiODk0Yjk0ZDVmMDk5ZjgzMGQ5ZDUwNDM5ZWNm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Deb5a06cf35d7c39a51e925e87e5cd6c8)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mint Programming Language
When HTML Can Be Better Than JSON – Fagner Brack – Medium
GitHub - iij-ii/html-validator-cli: Command Line Interface for https://validator.w3.org/
Turn your whiteboard sketches to working code in seconds with Sketch2Code | Microsoft Azure Blog
GitHub - addyosmani/critical: Extract & Inline Critical-path CSS in HTML pages
thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others
GitHub - knupfer/type-of-html-static: TH Optimizations for type-of-html
GitHub - mrkkrp/html-entity-map: Map from HTML5 entity names to the corresponding Unicode text