diff --git a/_tips/developing.ja.md b/_tips/developing.ja.md
new file mode 100644
index 0000000..87cd6fa
--- /dev/null
+++ b/_tips/developing.ja.md
@@ -0,0 +1,642 @@
+---
+# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#".
+# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:"
+
+title: "ウェブ・アクセシビリティのための開発 – 始めるにあたってのヒント"
+title_html: "ウェブ・アクセシビリティのための開発"
+nav_title: "始めるにあたってのヒント"
+lang: ja # Change "en" to the translated-language shortcode
+last_updated: 2024-04-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
+
+resource:
+ ref: /tips/
+
+navigation:
+ previous: /tips/designing/
+
+translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
+- name: "Jay Kishigami" # Replace Jan Doe with translator name
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
+# contributors:
+# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
+# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
+
+github:
+ repository: w3c/wai-quick-start
+ path: _tips/developing.ja.md # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
+
+permalink: /tips/developing/ja # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
+ref: /tips/developing/ # Do not change this
+
+ext_css: tips.css
+title_icon: /tips/img/icons.svg#developing
+
+acknowledgements: /tips/acknowledgements/
+
+# In the footer below:
+# Do not change the dates
+# Do not translate ACKNOWLEDGEMENTS
+# Translate the other words, including "Date:" and "Editors:"
+# Translate the Working Group name. Leave the Working Group acronym in English.
+footer: >
+ 日にち: マイナーアップデート:2019年1月9日､アップデート:2016年4月15日｡最初の出版:2015年9月
+ 編集者: Kevin White , Shadi Abou-Zahra , and Shawn Lawton Henry . ACKNOWLEDGEMENTS lists contributors and credits.
+ 教育と援助のためのWG (EOWG) によって開発され. WAI-DEV プロジェクト からのサポートを受けるとともに, ヨーロッパ委員会の援助を受けた｡
+---
+
+{::nomarkdown}
+{% include box.html type="start" h="2" title="概要" class="full" %}
+{:/}
+
+このページでは､障害者にとってアクセシブルなWebコンテンツの開発を始める際に役立つ､いくつかの基本的な考慮事項を紹介します｡これらのヒントは､Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)の要件を満たすためのグッドプラクティスです｡関連するWCAG要件､「より理解するための」ドキュメントでの詳細な背景､チュートリアルからのガイダンス､ユーザーストーリーなどへのリンクをたどってください｡
+
+{::nomarkdown}
+{% include box.html type="end" %}
+{:/}
+
+{::options toc_levels="2" /}
+
+{::nomarkdown}
+{% include_cached toc.html type="start" title="Page Contents" class="full" %}
+{:/}
+
+- TOC is created automatically.
+{:toc}
+
+{::nomarkdown}
+{% include_cached toc.html type="end" %}
+{:/}
+
+## すべてのフォームコントロールにラベルを関連付ける
+
+フォーム要素の `id` 属性にリンクされた `` 要素の `for` 性を使うか､ WAI-ARIA 属性を使います｡特定の状況では `` 要素を視覚的に隠すことが許容されるかもしれませんが､ほとんどの場合ラベルは全ての読者が必要な入力を理解するのに必要です｡
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="例: for 属性と id 属性の使用" class="example" %}
+
+
+
+{% include_cached icon.html name="desktop" %} 表現
+ユーザーネーム
+
+
+{% include_cached icon.html name="code" %} 短いコード
+{:/}
+
+~~~html
+ユーザーネーム
+
+
+{% include_cached box.html type="end" %}
+{:/}
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="詳細情報" class="simple" %}
+{:/}
+
+* **WCAG**
+ * [ラベルあるいは説明 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([理解のため 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions))
+* **Tutorial**
+ * [ラベルの制御](/tutorials/forms/labels/)
+
+{::nomarkdown}
+{% include_cached box.html type="end" %}
+{:/}
+
+## 画像の代替テキストを含める
+
+すべての情報画像と機能画像に画像の代替テキストが追加されていることを確認すること｡装飾的な画像は空の代替テキスト､`alt=""`を使うか､画像自体をCSSに含めてください｡代替テキストは通常､文章コンテンツの責任者が提供します｡
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="詳細情報" class="simple" %}
+{:/}
+
+* **WCAG**
+ * [テキスト以外のコンテンツ 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([理解のため 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
+* **チュートリアル**
+ * [画像](/tutorials/images/)
+* **ユーザーストーリー**
+ * [視覚障害者にとっての代替テキストの価値を説明](/people-use-web/user-stories/#accountant)
+
+{::nomarkdown}
+{% include_cached box.html type="end" %}
+{:/}
+
+## ページの言語と言語の変更を特定する
+
+例えば `` のように `html` タグで `lang` 属性を使うことで､すべてのページの主要言語を示します｡要素の言語がページの他の部分と異なる場合､特定の要素で`lang`属性を使います｡
+
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="詳細情報" class="simple" %}
+{:/}
+
+* **WCAG**
+ * [ページの言語 3.1.1](/WAI/WCAG21/quickref/#language-of-page) ([理解のため 3.1.1](/WAI/WCAG21/Understanding/language-of-page))
+ * [部分的な言語 3.1.2](/WAI/WCAG21/quickref/#language-of-parts) ([理解のため 3.1.2](/WAI/WCAG21/Understanding/language-of-parts))
+* **手法**
+ * [HTMLでの言語宣言](/International/questions/qa-html-language-declarations)
+
+{::nomarkdown}
+{% include_cached box.html type="end" %}
+{:/}
+
+## マークアップを使って意味と構造を伝える
+
+見出し､リスト､表などには適切なマークアップを使用しましょう｡HTML5 は `` や `` のような追加要素を提供し､ コンテンツをよりよく構造化します｡ WAI-ARIA の役割は､例えば､ `role="search"` を使って検索機能を識別するなど､追加の意味を提供することができます｡デザイナーやコンテンツ・ライターと協力して､意味について合意し､一貫して使用しましょう｡
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="例: 構造と意味を提供するためにHTMLを使用" class="example" %}
+
+
+
+{% include_cached icon.html name="desktop" %} 表示
+
+
+ スーパーベアが窮地を救う
+ 2015年8月7日
+ 街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡
+
+
+
+
+
+{% include_cached icon.html name="code" %}短いコード
+{:/}
+
+~~~html
+
+
+ スーパーベアが窮地を救う
+ 2015年8月7日
+ 街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡
+
+
+
+~~~
+
+{::nomarkdown}
+
+
WAI-ARIA を使った検索フィールド" class="example" %}
+
+
+
+{% include_cached icon.html name="desktop" %} 表示
+
+
+
+{% include_cached icon.html name="code" %}短いコード
+{:/}
+
+~~~html
+
+~~~
+
+{::nomarkdown}
+
+
+
+
+{% include_cached icon.html name="ex-circle" label="Wrong" %}ヘッダーより前の画像は見逃す可能性がある
+{:/}
+
+~~~html
+宇宙トレーナー
+宇宙...
+カートに加える
+~~~
+
+{% include excol.html type="start" id="full-code-img-before-heading" %}
+すべてのコードを見る
+{% include excol.html type="middle" %}
+
+~~~html
+
+ 宇宙トレーナー
+ クラシックでスタイリッシュな宇宙トレーナー
+
+
+~~~
+
+{% include excol.html type="end" %}
+
+{::nomarkdown}
+
+
+{% include_cached icon.html name="check-circle" label="OK" %}見出しは章のはじめに
+{:/}
+
+~~~html
+宇宙トレーナー
+宇宙...
+カートに加える
+~~~
+
+{% include excol.html type="start" id="full-code-img-before-heading" %}
+すべてのコードを見る
+{% include excol.html type="middle" %}
+
+~~~html
+
+ 宇宙トレーナー
+ クラシックでスタイリッシュな宇宙トレーナー
+
+
+~~~
+
+{% include excol.html type="end" %}
+
+{::nomarkdown}
+
+
+
+
+
+
+{:/}
+
+~~~css
+/* 狭いビューポートでは､ナビゲーションを全幅にする */
+@media screen and (min-width: 25em) {
+ #nav {
+ float: none;
+ width: auto;
+ }
+ #main {
+ margin-left: 0;
+ }
+}
+~~~
+
+{::nomarkdown}
+
+
+{:/}
+
+~~~css
+/* より広いビューポートでは､ナビゲーションを左に配置する*/
+@media screen and (min-width: 43em) {
+ #nav {
+ float: left;
+ width: 24%;
+ }
+ #main {
+ margin-left: 27%;
+ }
+}
+~~~
+
+{::nomarkdown}
+
+
+
+
WAI-ARIA を使用して､アコーディオンや特注ボタンなどのカスタムウィジェットの機能と状態に関する情報を提供します｡例えば`role="navigation"` や `aria-expanded="true"`です｡ ｡このようなウィジェットの動作､例えばコンテンツの展開や折りたたみ､ウィジェットがキーボード・イベントにどのように応答するかなどを実装するには､追加のコードが必要です｡
+
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="例: WAI-ARIAを使ったメニューの機能と状態の識別" class="example" %}
+
+
+
+
+{:/}
+
+~~~html
+
+
+
+~~~
+
+{::nomarkdown}
+
+
` あるいは `
`のようみ通常はフォーカスを受けない要素を､インタラクションのために使うときにはナビゲーション・オーダーに加えましょう｡スクリプトを使ってキーボード・イベントを捕捉し､それに応答することが必要です｡
+
+
+{::nomarkdown}
+{% include_cached box.html type="start" title="例: キーボードからアクセス可能なメニューボタン" class="example" %}
+
+
+
+{% include_cached icon.html name="desktop" %} 表示
+
+
+
+
+
+
+
+{% include_cached icon.html name="code" %} Code Snippet
+{:/}
+
+~~~javascript
+var buttonExample = document.getElementById('example-button');
+
+buttonExample.addEventListener('keydown', function(e) {
+ // Toggle the menu when RETURN is pressed
+ if(e.keyCode && e.keyCode == 13) {
+ toggleMenu(document.getElementById('example-button-menu'));
+ }
+});
+
+buttonExample.addEventListener('click', function(e) {
+// Toggle the menu on mouse click
+ toggleMenu(document.getElementById('example-button-menu'));
+});
+~~~
+
+{::nomarkdown}
+
+
WCAG 要求事項の紹介
+* [障害者はどのようにウェブを利用しているか](/people-use-web/) — 障害者にとってのアクセシビリティの利点の実例
+* [ウェブ・アクセシビリティ・チュートリアル](/tutorials/) —障害者がアクセスしやすいウェブコンテンツを開発する方法を紹介
+* [ビフォー・アフター・デモンストレーション](/WAI/demos/bad/) — 同じビジュアル・デザインを共有するアクセシブルなウェブサイトとアクセシブルでないウェブサイトの例で､主要なアクセシビリティの障害と修復を強調する注釈､およびWCAG の評価レポートが掲載されています｡
+
+* [WCAGを満たす方法（クイックリファレンス）](/WAI/WCAG21/quickref/) —すべてのWCAG要件とテクニックのカスタマイズ可能なリファレンス
+
+* [ ウェブ・アクセシビリティ評価ツールリスト](/WAI/ER/tools/) — コードのアクセシビリティを調査するのに役立つさまざまなツールを提供しています｡
+* [WAI-ARIA 概要](/standards-guidelines/aria/) — WAI-ARIA の紹介と全仕様へのリンク
+
+{::nomarkdown}
+{% include box.html type="end" %}
+{:/}