Are your Anchor Links Accessible?
Are your Anchor Links Accessible?December 14th, 202012 mins 📖 📖 📖 📖 📖 📖 Room for growth 🌱accessibility create ssg One day I decided I wanted to add anchor links to each of the sections in my blog posts. Over the past few months, I'd seen these links on a lot of pages—from official documentation pages to smaller blog posts. I find them really useful for sharing sections of pages with other p
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
alt属性をよくわかっていなかった私が代替テキストを書けるようになった話 - Pepabo Tech Portal
こんにちは。最近の猛暑に生存の危機を感じています、コーポレートデザインチームのmewmo(@mewmoppel)です。 突然ですがみなさん、alt属性ってご存知ですか？ alt属性とは、HTML文書においてimg要素に付随する属性のひとつで、画像によって伝えたい内容を説明するための代替テキストを提供します。最近ではTwitterやInstagramといったSNSでも代替テキストを用意できるようになり、より私たちの生活にとって身近なものになっているのではないでしょうか。 そんなalt属性について、最近私がやってしまった失敗とその改善から学んだことをこの場で紹介したいと思います。 alt属性はなぜ必要なの？ alt属性のここがよくわかっていなかった！ 代替テキストを適切に書くためのコツ 1. 画像をなくしてもページの文意が同等レベルで伝わる 2. スクリーンリーダーで読み上げたときに何の画像な
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
改行<br>を複数連続しない方がいい理由【そんなHTMLで大丈夫か？#1】 - Pepabo Tech Portal
はじめまして。技術部 シニアデザイナーの @sizucca です。 HTML のマークアップを担当する職種は会社によって異なると思いますが、ペパボでは主にデザイナーが担当しています。 HTML は、プログラミング言語などに比べるとコードを書くこと自体はそれほど難しくありません。しかし、「正しい HTML」を書こうとすると一気にその難易度は高くなります。HTML のマークアップには、「間違い」はあっても「唯一の正解」が無いからです。 何を表現するのか、何を優先するのか（意味付けの適切さ、制作コスト、メンテナンス性、etc … ）によって、適切と思われるマークアップは変わってきます。そのため、10 人いれば 10 通りのマークアップがあっても不思議ではありません。例えるならば、法律はあれど判決は裁判官次第、だからです。 そんな、悩ましさとの格闘は避けられないマークアップですが、押さえておくとコ
マークアップの最適解を
見つけ出す方法
The document discusses markup and how to structure different elements like headings, paragraphs, lists, sections and comments. It provides examples of proper markup for navigation menus using unordered and ordered lists, adding headings and paragraphs within an article and section elements, and using comments to add notes that do not create paragraphs. The document serves as a guide for how to pro
Schema.org - Schema.org
Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond. Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended th
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
You won't be disappointed
It has been two weeks since my last Blog, not a way to keep your readers happy, if you have any (left). Well, I rather hope that my readers are more to the right than the left. But then, I welcome them all. There are many people who enter the Blogosphere who seem more intent on taunting the Bloggers than to learn and to comment. Foul, ugly-minded, and even beastly, but then, we can always delete t
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と、オープンソー
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
2. プロフィール • 竹内 真 / TAKEUCHI SHIN #singtacks – 創業企業＆所属 • 株式会社レイハウオリ 代表取締役社長（W3Cメンバー） • 株式会社ビズリーチ 取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
GitHub - philipwalton/html-inspector: HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents