accrefs

Webアクセシビリティ関連の資料まとめページです。

開発

Node.js >= v12.7.0
gulp >= v4.0.2

npm ci
npm start

テンプレートを編集するには

Pug を利用しています。src/html/**/*.pugを編集してください。

CSSを編集するには

Sass を利用しています。src/style/**/*.scssを編集してください。

ウェブサイトを編集するには

このウェブサイトの特性上、記事の個別ページがありません。ホームと、タグトップと、記事一覧のみです。

記事を編集するとタグトップに表示された該当箇所が変更されます。

このウェブサイト内における世界観

記事とは、ウェブサイト上で掲載したいリンクというかコンテンツです。ビルドではpostというラベルで扱っています。

タグとは、ウェブサイト上でカテゴリーと呼んでいるものです。ビルドではtagというラベルで扱っています。

記事もタグも Markdown ファイルに YAML ブロックを記述して管理しています。

記事を編集・追加する

src/md/post/**.mdを編集するか、同階層に他の md ファイルと体裁を合わせて追加してください。雛形は下記の通りです。

---
type: 'post' # 変えない
title: 'アクセシビリティとは' # リンクのタイトル
tags:
  - 'Webアクセシビリティとは？的なもの' # 日本語タグ名
link: 'https://waic.jp/knowledge/accessibility/' # リンク先
---
ウェブアクセシビリティ基盤委員会（通称：WAIC）の放つ、公式感漂うSEO的に強そうなドキュメント。Webアクセシビリティ確保とJISの関係性について解説しています。

YAML ブロックでメタ情報を記述し、本文に説明文を設定できます。YAML ブロックの後に続くところが本文で、そこは Markdown 記法あるいは HTML 記述が使えます。

リストやリンク、テーブル、画像なども挿入でき、ビルド時にパースして大体そのまま出力されます。

変えられるのは title と tags と link と本文エリアのみです。他を変えるとビルドができないので注意してください。

タグを編集・追加する

src/md/tag/**.md を編集するか、同階層に他の md ファイルと体裁を合わせて追加してください。雛形は下記の通りです。

---
layout: './src/html/tag.pug' # 変えない
type: 'tag' # 変えない
title: 'Webアクセシビリティとは？的なもの' # 日本語タグ名
desc: 'Webにおけるアクセシビリティを知りましょう。' # 日本語説明文
name: 'introduction_to_web_accessibility' # タグのファイル名。このままURLになるのでそれを見越した文字列にしてください。
---

変えられるのは title と desc と name です。他を変えるとビルドができないので注意してください。

タグの表示順を編集する

プロジェクトルートの order.json の配列がそのまま表示順になっています。これを変更してください。

管理者とメンテナの連絡先

伊原力也（@magi1125）
伊藤由暁（@otiext）

uknmr/accrefs