レスポンシブでアクセシブルなconcrete5のテーマ「Company」をリリース！

2016/12/14 00:30 JST

HTML5+CSS3で構築したレスポンシブWebデザインでアクセシブルなコーポレイトサイト用concrete5 バージョン5.7.5.9から8.0.0対応テーマ「Company」を作成しました。

テーマCompanyのスクリーンショット画像
PC&iPad&iPhoneのスクリーンショット

テーマ「Company」の特徴及び仕様

画像やテキストをご自身のサイトに合うよう置き換えていただければ色んなサイトで使っていただけます。

このテーマは、サンプルコンテンツ入りテーマです。
コンテンツ入りでテーマをインストールしていただき、ご自分のサイトに合った画像とテキストに置き換えるだけで簡単にアクセシブルなサイト構築を可能にします。 (画像がHTMLブロック等HTMLの記述になっている箇所は、src="画像の保存場所" alt="画像の説明"を必ず記入してください。)

横幅1165以下の環境では、WAI-ARIAを使用したドロワーメニュー(Progressive Hamburger by @heydonworks)を使用しています。(よりアクセシブルになるようほんの少し改良しています)

ドロワーメニューを開いた時は、「×」ボタン又はメニューを選択するまではフォーカスはグローバルナビゲーション内のみの移動になります。

マシンリーダブルな Schema.orgに対応する為、Microdataを使用しています。

グローバルナビゲーション、パンくずリスト、新着情報、FAQを schema.org の仕様に従って記述しています。

スマートフォンでスクロールした状態でもすぐにナビメニューをタップ出来るようにヘッダを固定しています。
(ページ内リンクを設定される時は、(ヘッダの高さが100pxの場合)例：margin-top:-100px;padding-top:100px;をコンテンツエリア等に設定してください。)

facebookの窓等横幅を絶対値で指定している箇所を追加される場合、その数値(横幅)より小さいサイズのデバイスで閲覧すると横スクロールバーが出てしまうかレイアウトが崩れる可能性があるのでご注意ください。(ご自身で横幅を調整してください)

Mainエリアには2カラム(Col Twobox)3カラム(Col Threebox)の独自レイアウトを設定出来る様にしています。

デモサイトは、Home | Companyになります。

テーマ「Company」のダウンロード

テーマ「Company」のダウンロードは、concrete5のマーケットプレイス「Company - concrete5」で行ってください。(有料になります)

テーマ「Company」のアクセシビリティについて

WCAG 2.0の1.4.3 最低限のコントラストに関する達成基準(レベルAA)の基準を満たしています。(カラーチェックツール colour contrast Analyser を使用)
WCAG 2.0の2.1.1 キーボード操作に関する達成基準(レベルA)の基準を満たしています。(jQuery UIのアコーディオンとタブメニュー部分は矢印キーで移動します)
ナビゲーションスキップを設置しています。 (ページを表示した後Tabキーを押すと表示されます)
尚、横幅1165以下の環境ではドロワーメニューを使用しているので、ナビゲーションスキップは非表示且つスクリーンリーダーで読み上げないように設定してます。
ドロワーメニューを開閉するボタン(アイコン)部分は、視覚的には「menu」「close」とCSSで表示させ、スクリーンリーダーでは「ナビゲーションメニュー」と読み上げる様に設定しています。また、a要素がボタンである事をWAI-ARIAを使用して示しています。
ドロワーメニューの開閉の状態は、aria-expanded属性を使用して示しています。aria-expanded属性に対応しているスクリーンリーダーでは、開閉ボタンにフォーカスした時に「折り畳み」「展開」のように読み上げます。
ドロワーメニュー使用時のグローバルナビゲーションは、閉めている時は視覚的に表示せず、スクリーンリーダーでも読み上げないようにし、aria-hidden="true"を使用して表示していない事を示しています。
ドロワーメニューが閉まっている時は、グローバルナビゲーションを視覚的にも表示させずスクリーンリーダーでも読み上げないようにしているので、下部にクローンを作成しています。クローンは視覚的には表示せずスクリーンリーダーでは読み上げる様にしています。
追記(2018/5/7):画面サイズが1165px以上の時、WAI-ARIAを使ったアクセシブルなドロップダウンメニューをグローバルナビゲーションに追加しました。（第2階層（1つのサブメニュー）までの対応）(テーマのversion1.1.0以降)
追記(2017/1/30):グローバルメニューの中で選択されているメニューには、aria-current属性を付けています。(テーマのversion1.0.2以降)
また、version1.1.3でパンくずリストにもaria-current属性を付けました。
コンテンツ部分には、WAI-ARIA対応のタブメニューとアコーディオンUI(jQuery UI - v1.11.4)を使用しています。尚、WAI-ARIA対応のタブ型 UI の読み上げ検証を行いました。の結果からa要素に記述されていたrole="presentation"を削除しています。

テーマ以外の修正必須箇所

デフォルトのままだとtitle要素がサイト名 :: ページ名なので、ページ名 | サイト名に変更してください。修正方法は下記の通りです。

concrete5/config/concrete.phpの868行目を 'title_format' => '%1$s :: %2$s',から''title_format' => '%2$s :: %1$s',に変更してください。
参照：設定ファイルの使い方 :: concrete5 Japan 日本語公式サイト

尚、concrete5 Ver.8から[ページタイトル] :: [サイト名]がデフォルトになるので、上記の修正は必要なくなりました。参照：title要素について質問及び要望です。 :: concrete5 Japan 日本語公式サイト

テーマ以外の注意事項

記事ブロックで画像を追加しそのまま保存するとaltの値が空になってしまうので、追加した画像をクリックしポップアップ編集画面でaltの値を適切な値を入力してください。

尚、concrete5 Ver.8から上記の注意は必要なくなりました。

カスタムスタイルについて

image-frame - 画像等にフレームのような枠線を付ける
left-justify - 記事等で左揃えにする(文字が回り込みタイプ)
list-mark - トップページの新着情報のリストのようなアイコンを付ける
company-btn - 水色のボタンスタイル
'company-title - 下層ページのh1のスタイル

エリア　カスタムスタイル

Main AREA: list-mark - トップページの新着情報のリストのようなアイコンを付ける; company-btn - 水色のボタンスタイル
Footer　Nav: subnav-link - リストを横並びにする; list-mark - トップページの新着情報のリストのようなアイコンを付ける; company-btn - 水色のボタンスタイル

カスタムテンプレートについて

グローバルナビゲーションは、autonavオートナビのカスタムテンプレートのcompany_responsive_header_navigation」を使用してください。
パンくずナビゲーションは、autonavオートナビのカスタムテンプレートの「company_breadcrumb」を使用してください。
新着情報は、page_listページリストのカスタムテンプレートの「company_new_info」を使用してください。
FAQのaccordionアコーディオン部分は、faqのカスタムテンプレートの「company_faq」を使用してください。
ページのタイトル部分は、page_titleのカスタムテンプレートの「company_page_title」をまた、Blogタイトル部分は、page_titleのカスタムテンプレートの「company_blog_title」を使用してください。
Blog用ページタイプの右2カラムページのサイドに設置するブロックの検索部分は、searchのカスタムテンプレートの「company_search」を使用してください。
同じくサイドに設置するブロックのArchives部分は、date_navigationのカスタムテンプレートの「company_date_navigation」を使用してください。
同じくサイドに設置するブロックの「次へ」「前へ」ナビ部分は、next_previousのカスタムテンプレートの「company_next_previous」を使用してください
同じくサイドに設置するブロックのサムネイル付きのページリスト部分は、page_listのカスタムテンプレートの「company_thumbnail」を使用してください。(サムネイル画像は、管理画面のブログ記事ページのコンポーザーでサムネイルを設定してください)
同じくサイドに設置するブロックのページリスト部分は、page_listのカスタムテンプレートの「company_list」を使用してください。(デフォルトのままだと見出しレベルが違う為)
同じくサイドに設置するブロックのトピックリスト部分は、topic_listのカスタムテンプレートの「company_topic_list」を使用してください。

カスタムレイアウトについて

編集ページの該当のエリアでレイアウトを追加を選びプリセットの「Col Twobox」(2カラムの場合)又は「Col Threebox」(3カラムの場合)独自レイアウトを選択し、レイアウト追加をクリックしてください。

サイト名(Header Site Title Area)の編集方法について

Ver7.5.13の場合は、HTMLブロックを使わず、記事ブロックを使ってサイト名を修正してください。(HTMLブロックを使うと自動的に<div id="HTMLBlock167" class="HTMLBlock">が入力されてしまう為)
また、記事ブロックを使って画像に変更する場合は、画像アイコンをクリックして画像を追加した後、HTMLアイコンをクリックしてp要素を削除してください。

Ver8の場合は、Header Site Title Area の記事ブロックを削除し、HTMLブロックで

<a href="/">サイト名</a>

と入力してください。
また、画像を追加する場合は、画像ブロックを使用してください。

デザインを再現するマークアップについて

コンテンツ入りでインストールし、情報を自分のサイトに合うよう修正するために記事ブロックで編集しようとすると、自動的に不要な要素が入る上に必要な要素が削除されてしまいます。ですので、下記のコードをコピペしてご自分のサイトに合うよう修正してください。

トップページ編

トップページのMain Topエリアの部分は、下記のようにマークアップしてください。
※デモサイトのHomeを参考にしてください。

<div class="two-box-long">
  <ul>
  <li><a href="./index.php/products" class="future-parts first-parts">
  <h2>Provide high quality products</h2>
  <img src="./download_file/view/top-img01.png" alt="image photo of Provide high quality products" class="left-side-img">
  <p>Our company provides high-quality products. You will probably be satisfied.</p>
  </a></li>
  <li><a href="./index.php/products" class="future-parts second-parts">
  <h2>High Function Parts</h2>
  <img src="./download_file/view/top-img02.png" alt="image photo of High Function Parts" class="left-side-img">
  <p>To provide the parts having a high function. It will be the essential thing is for the precision machines.</p>
  </a></li></ul>
</div>
<div class="two-box-short">
  <a href="./index.php/products" class="new-future-parts">
  <h2>New products</h2>
  <img src="./download_file/view/top-img03.png" alt="image photo of New products" class="center-img">
  <p>The new products are in stock. This product is made in my factory.</p>
  </a>
</div>

Main Middleエリアの3つのブロックの個々のマークアップは、下記のように記述してください。
※デモサイトのHomeを参考にしてください。

<a href="./index.php/services" class="image-box"><img src="./download_file/view/10/1" alt="image photo of Awesome Features"><h2>Awesome Features</h2><p>What kind of special features does that have? The greatest features are that it's first of the commodity industry.</p></a>

下層ページ編

ブロックの編集エリアをクリックし、デサイン＆カスタムテンプレートをクリックする。一番右のアイコン(titleがカスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックし、カスタムテンプレートから「company_page_title」を選択します。最後に保存をクリックします。

デモサイトの下層ページで使用しているタブUIを使用する場合は、下記のようにマークアップしてください。
※デモサイトのProductsを参考にしてください。

<div id="tabs">
  <ul>
  <li><a href="#tabs-1">Price</a></li>
  <li><a href="#tabs-2">Graph</a></li>
  <li><a href="#tabs-3">Photo</a></li>
  </ul>
  <div id="tabs-1">
  <h2 tabindex="0">Price list</h2>
  <ol class="grade-list clearfix">
  <li class="grade-list-item">
  <dl>
  <dt class="grade-list-ttl">High grade</dt>
  <dd class="grade-list-important">&#36;80</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">100 unit</dd>
  <dd class="grade-list-desc">3 years</dd>
  </dl>
  </li>
  <li class="grade-list-item grade-list-item-best">
  <dl>
  <dt class="grade-list-ttl grade-list-ttl-att">standard</dt>
  <dd class="grade-list-important">&#36;50</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">60 unit</dd>
  <dd class="grade-list-desc">1 years</dd>
  </dl>
  </li>
  <li class="grade-list-item">
  <dl>
  <dt class="grade-list-ttl">Basic</dt>
  <dd class="grade-list-important">&#36;25</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">30 unit</dd>
  <dd class="grade-list-desc">half-year</dd>
  </dl>
  </li>
  </ol>
  </div>
  <div id="tabs-2">
  <h2 tabindex="0">Graph</h2>
  <p>Please refer to our company performance.</p>
  <svg viewbox="-10 30 400 300" aria-labelledby="graph-title graph-desc" role="img">
  <title id="graph-title">Our Company Performance Graph</title>
  <desc id="graph-desc">The transition graph of 5 years. 2012 is 20%. 2013 is 40%. 2014 is 80%. 2015 is 60%. 2016 is 70%.</desc>
  <rect x="60" y="220" width="20" height="20" fill="#47678e" stroke="#405c7f" id="bar1" />
  <rect x="120" y="180" width="20" height="60" fill="#47678e" stroke="#405c7f" id="bar2" />
  <rect x="180" y="100" width="20" height="140" fill="#47678e" stroke="#405c7f" id="bar3" />
  <rect x="240" y="140" width="20" height="100" fill="#47678e" stroke="#405c7fb" id="bar4" />
  <rect x="300" y="120" width="20" height="120" fill="#47678e" stroke="#405c7f" id="bar5" />
  <line x1="40" y1="40" x2="40" y2="240" stroke="#4c5f76">
  <text y="220" x="0" stroke="#121011">20%</text>
  <text y="180" x="0" stroke="#121011">40%</text>
  <text y="140" x="0" stroke="#121011">60%</text>
  <text y="100" x="0" stroke="#121011">80%</text>
  <text y="60" x="-10" stroke="#121011">100%</text>
  <line x1="40" y1="240" x2="360" y2="240" stroke="#4c5f76">
  <text x="53" y="260" stroke="#121011">2012</text>
  <text x="113" y="260" stroke="#121011">2013</text>
  <text x="173" y="260" stroke="#121011">2014</text>
  <text x="233" y="260" stroke="#121011">2015</text>
  <text x="293" y="260" stroke="#121011">2016</text>
  </svg>
  </div>
  <div id="tabs-3">
  <h2 tabindex="0">Photo</h2>
  <p><img alt="products image" src="./download_file/view/16/157" class="image-frame">
  <br>In a professional context it often happens that private or corporate clients corder a publication to be made.</p>
  </div>
</div>

また、デモサイトの下層ページで使用しているアコーディオンUIを使用する場合は、下記のようにマークアップしてください。
※デモサイトのFAQを参考にしてください。

<div id="accordion" class="ccm-faq-container" itemscope itemtype="http://schema.org/Question">
  <h2 itemprop="name">Do you personally deal possible ?</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa 
  <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur mus. </p> 
  <p><a href="#">More information about company</a></p>
  </div>
  </div>
  <h2 itemprop="name">When is a new product?</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
  </ul>
  </div>
  </div>
  <h2 itemprop="name">Tell me about company.</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p><p>elit. Aenean commodo ligula eget dolor. </p>
  <p><strong>strong</strong>. Cum sociis natoque penatibus</p>
  </div>
  </div>
</div>

カスタムテンプレートの設定方法

Main Bottomエリアのページリストブロックの新着情報は、カスタムテンプレートの「company_new_info」を適用しブログ記事の「タイトル」、「日付」、「説明文」を表示させてます。(ページ名を含めるとページの説明を含めるを「はい」に設定してください。)(カスタムスタイルの「company_new_info」を適用するとデモサイトと同じスタイルになります)

ブログ記事以外のタイトルと同じスタイルにしたい場合は、ブロックの編集エリアをクリックし、デサイン＆カスタムテンプレートをクリックします。一番右のアイコン(titleがカスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックし、カスタムテンプレートから「company_page_title」を選択します。最後に保存をクリックして設定完了です。

すべてのカスタムテンプレートについて

カスタムテンプレートを適用したい箇所をクリックする。
デザインとテンプレートをクリックする。
一番右のアイコン(titleがカスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックする。
適用したいカスタムテンプレートを選択する。
保存をクリックする。

表示と読み上げ確認について

以下の環境で表示・動作・読み上げの確認をしています。

concrete5 バージョン5.7.5.9~5.7.5.13, 8.0.0~8.0.3
OS:Windows 7

ブラウザ：: Internet Explorer11, 10, 9 ズーム 200% 時と文字サイズ「大」「最大」時; Firefox50.0 ズーム 200% 時と文字サイズだけ変更×4時; GoogleChrome54.0.2840.99 ズーム 200%時

OS:Windows 10 ブラウザ:: Edge ズーム 200%時; Firefox50.0 ズーム 200%と文字サイズだけ変更×4時; GoogleChrome53.0.2785.143 ズーム 200%時

OS:Mac OS Sierra 10.12.1 ブラウザ:: Safari10.01 ズーム 200%時; Firefox50.0 ズーム 200%と文字サイズだけ変更×3時; GoogleChrome54.0.2840.98 ズーム 200%時

タブレット:: iPad iOS 9.3.5 Safari
スマートフォン:: GALAXY Android5.0.1 標準ブラウザ、GoogleChrome54.0.2840.85; iPhone5s iOS 10.1.1 Safari

音声読上げ確認に使用した音声読上げソフトとブラウザ: PC-Talker 7 + Win7 Internet Explorer11; NVDA 2016.3jp + Win7 Firefox50.0; Voice Over + iPod touch iOS 9.3.5; TalkBack5.0.4.3 + GALAXY Android5.0.1
カラーチェックツール: colour contrast Analyser

ProductsページにあるSVGのグラフの読み上げについてですが、PC-Talkerは棒グラフの値部分でどれもタイトルだけを読み上げるという不具合がありました。これはPC-TalkerがまだWAI-ARIAに対応していないからだと推測しています。また、NVDAは同じSVGのグラフ部分の意図した情報を2度読み上げる(情報自体は正確です)ので、その旨報告し2度読みしないよう機能リクエストしています。

テーマのインストール方法

ダウンロードしたファイルを解凍し、サーバーにFTPで packages/ にアップロードしてください。管理画面の「concrete5を拡張」の中の「機能追加」をクリックすると「インストール待ち」にテーマCompanyの表示が出るのでインストールをクリックしコンテンツ入りインストールかテーマのみインストールかを選んでインストールしてください。(マーケットプレイスからの追加テーマのインストール方法は、マーケットプレイスの使い方 :: concrete5 Japan 日本語公式サイトをご覧下さい。)

著作権

テーマ「Company」は、concrete5　マーケットプレイスの標準ライセンスに基づいてます。詳しくはconcrete5 :: Licenseをご覧ください。

日	月	火	水	木	金	土
2024年 11月					«	»
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30