アクセシビリティ改善のためHTMLの要素を変更します

近日中に行う変更のお知らせです(2023/6/12) shokai.icon

スクリーンリーダーでの操作性とアクセシビリティの向上の為、HTMLを変更します

変更内容

<div class='page'>を

<main class='page'>に変更

<div class='col-page-side'>を

<section class='col-page-side'>に変更

<div class='related-page-list'>を

<section class='related-page-list'>に変更

HTMLのタグ名が置き換わります

DOMの構造は変化しません

以下のようなCSSセレクタを使っているUserCSSに影響があります

div.page

.pageもしくはmain.pageに変更してください

div.col-page-side

.col-page-sideもしくはaside.col-page-sideに変更してください

div.related-page-list

.related-page-listもしくはsection.related-page-listに変更してください

コンテナ要素に.page等の、対象が明確に指示されたclass名が付いている場合

div.pageのようにHTMLタグ名を含めるのではなく

.pageのように、class名だけで指定するようにする

要素を指定して外見を少し調整する程度のカスタマイズの場合、HTMLタグ名を指定せず、class名だけでセマンティックに指定する方が変更に強いと思いますshokai.icon

自分の参加しているproejctが影響を受けるか？

今後はアナウンス無しにアップデートを行います

これまでに、ScrapboxはHTML要素や構造の変更をアナウンスした事はありませんでした

同様の変更を継続的に行います

テーマを変更するだけでは物足りず、さらにScrapbox側のHTML構造の変更を物ともしない上級者向けの危険な機能

です

今回アナウンスした理由

改めて利用頻度の高いUserCSSを調査した結果、Scrapbox側の変更に弱い書き方が目立った

変更に強いCSSを書くtipsを共有する為にお知らせした