スキップリンクの書き方

前提・実現したいこと

htmlで、題名、メニュー(リンク)、本文の順に書いています。
メニューは本文へのリンクです。できるならば、htmlの順序は題名→メニュー(リンク)→本文のままで、自動音声ソフト(読み上げ機能)はメニューを飛ばすという形にしたいです。この書き方では無理な場合は、htmlの順序は問わず、読み上げ機能が題名→本文になる形を知りたいです。

発生している問題・エラーメッセージ

検索から、飛ばしたい部分にidをつけて
id名{
position: absolute;
top: -10000px;
left: -10000px;
}
と記入する例を見つけたのですが、classと同じ1行に書くと音声では読み上げられ、画面上から見えなくなると言った結果になります。
positionがかぶっていることが原因のような気がしますが、解決策が分かりません。

感性のかたちとして、メニューを左に寄せて本文を隣にくるようにしています。

該当のソースコード

html
1
2<!DOCTYPE html>
3<html lang="ja">
4	<head>
5		<title>練習３</title>
6		<link rel = "stylesheet" type = "text/css" href = "Renshu3.css"/>
7		<meta charset = "UTF-8">
8	</head>
9	<body>
10		<div class ="daimei">
11			<h1>題名</h1>
12		</div>
13		<div class = "menu" id="skiplink">
14			<ul>
15				<li><a href = "#one" onclick = "changeCategory('cat_one')">一</a></li>
16				<li><a href = "#two" onclick = "changeCategory('cat_two')">二</a></li>
17			</ul>
18		</div>
19
20		<div class ="main">
21				<div class ="menu1">
22					<h2><a id = "one">一</a></h2>
23						<div class ="a">
24								<div class = "picture">
25									<img src = "gazoa.jpg" alt = "gazoa" >
26								</div>
27									<table border ="1" >
28										<tr>
29											<th>１</th>
30											<td>24</td>
31										</tr>
32										<tr>
33											<th>２</th>
34											<td>25</td>
35										</tr>
36										<tr>
37											<th>３</th>
38											<td>21</td>
39										</tr>
40										<tr>
41											<th>４</th>
42											<td>26</td>
43										</tr>
44									</table>
45						</div>
46
47						<div class = "a">
48							<div class = "picture">
49								<img src = "gazoaa.jpg" alt = "gazoaa">
50							</div>
51								<table border = "1" >
52									<tr>
53										<th>１</th>
54										<td>33</td>
55									</tr>
56									<tr>
57										<th>２</th>
58										<td>32</td>
59									</tr>
60									<tr>
61										<th>３</th>
62										<td>28</td>
63									</tr>
64									<tr>
65										<th>４</th>
66										<td>32</td>
67									</tr>
68								</table>
69						</div>
70				</div>
71
72				<div class ="menu2">
73					<h2><a id = "two">二</a></h2>
74						<div class ="b">
75							<div class ="picture">
76								<img src = "gazob.jpg" alt = "gazob">
77							</div>
78								<table border = "1">
79									<tr>
80										<th>１</th>
81										<td>1</td>
82									</tr>
83									<tr>
84										<th>２</th>
85										<td>8</td>
86									</tr>
87									<tr>
88										<th>３</th>
89										<td>3</td>
90									</tr>
91									<tr>
92										<th>４</th>
93										<td>2</td>
94									</tr>
95								</table>
96						</div>
97				</div>
98		</div>
99	</body>
100</html>
101

css
1body{
2	font-size: 80%;
3	color: red;
4}
5
6div.daimei{
7	position:fixed;
8	font-size: 150%;
9	top:0ex;
10	margin-left:2ex;
11}
12h1{
13	margin:0ex;
14	color: black;
15}
16
17div.menu{
18	position:fixed;
19	margin-top:10ex;
20	float:left;
21	font-size: 90%;
22	width:10ex;
23}
24#skiplink{
25	position: absolute;
26	top: -10000px;
27	left: -10000px;
28}
29
30h2{
31	font-size: 100%;
32	margin:10ex;
33	color: blue;
34}
35
36img{
37	width:30ex;
38}
39
40div.picture{
41	float:left;
42	width:30ex;
43	margin:1ex;
44}
45div.a{
46	margin-left:40%;
47	width:calc(100% - 40ex );
48	margin:5ex;
49}
50

試したこと

<div class = "menu"> < id="skiplink"> 分けて順番を変える →class,idの順番問わず見た目には表れる、音声の読み上げも行われる

補足情報（FW/ツールのバージョンなど）

yambejp

2020/06/08 06:57

質問文章について行頭の「#」は表題になってしまうのでマークダウンして変な属性がつかないようにしてください

kei344

2020/06/08 07:29

（質問文は編集できます）メニューは本文に対するリンクでしょうか。また、HTMLの順序が「題名、本文、メニュー(リンク)」になるように組めればよいのでしょうか。（その場合全体のコードを提示されたほうが良いです）

__t_w1ora

2020/06/08 09:07

見てくださりありがとうございます。編集しましたので、また見ていただけると嬉しいです。

行動規範の内容に同意します

回答2件

目的は見せて読ませないこと

スキップリンクではなく、単純にスクリーンリーダに読み飛ばしをさせたいだけであれば、aria-hidden="true" という属性を入れればいいと思います。（NVDA日本語版 + win10 + Firefox77 で確認）

In the example below, the paragraph is not exposed to the accessibility API (e.g. would not be read aloud by a screen reader).

Using the aria-hidden attribute - アクセシビリティ | MDN

ただ、こういった使い方がアクセシビリティとして正しいのかどうかについては、回答の範囲外とさせてください。

投稿2020/06/12 10:20

編集2020/06/12 10:21

Lhankor_Mhy

総合スコア36158

FlexかGridを使って、HTML上の並びと順序を変えてしまえばどうでしょう。

【フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

【order - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/order

【グリッド - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids

【グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

投稿2020/06/09 19:04

kei344

総合スコア69458

Lhankor_Mhy

2020/06/10 01:12

横からすみません。 MDNに「order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。」という記述があります。「読み上げ順を order でコントロールする」という意図であれば誤回答ですし、「読み上げ順にマークアップして、スクリーンの表示を order で整える」という意図であれば、初心者マークを付けている回答者に読み取れるかどうか不安です。

kei344

2020/06/10 02:22

To: Lhankor_Mhyさん例示もしないでリンクだけは、確かに不親切ですね。「「読み上げ順にマークアップして、スクリーンの表示を order で整える」という意図」ですが、せっかくなのでLhankor_Mhyさんが回答されてはいかがでしょう。

Lhankor_Mhy

2020/06/10 02:43

「スキップリンク」とはスクリーン上に表示せず読み上げだけさせるリンクだという理解だったので、この質問の意図を図りかねています。「なぜスキップリンクを読み飛ばししようとしているのですか？」という補足依頼をしようかとも思ったのですが、私はアクセシビリティについて素人同然なので、控えていました。

kei344

2020/06/10 03:11

To: Lhankor_Mhyさんそれは残念、指摘ありがとうございました。

__t_w1ora

2020/06/11 15:06

ここに書くのが合ってるか分かりませんが、失礼します。回答、また意見をありがとうございます。 Lhankor_Mhyさん、スキップリンクとは、私の求めていたことと逆のことだったのですね。勉強不足でした、ややこしくしてしまい申し訳ありません。目的は見せて読ませないこと、ヒントのキーワードとしてスキップリンクを与えられたので鵜呑みにしていました。 kei344さん、HTML上の並びを変える方法もあるのですね。調べて挑戦しましたが、まだまだかかりそうです。URLも参考にして、これからの課題として学んでいこうと思います。ありがとうございました。

行動規範の内容に同意します

あなたの回答