<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Noto+Sans+JP&display=swap" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <title>site</title> </head> <body> <header class="header"> <h1>Let's learn about the visually impaired!</h1> </header> <div class="search"> <input type="text" id="text" name="text" placeholder="テキストを入力" tabindex="1" /> <button onclick="readAloud()" tabindex="2">クリックで読み上げる</button> <button onclick="readAloud()" tabindex="2">クリックで検索</button> <button onClick="speakSwitch();"></button> </div> <div class="wrap"> <div class="item"> <img src="pic_1.jpg"> <p class="menu"><a href="sub/demo.html" tabindex="3" class="one">視覚障害とは?</a></p> </div> <div class="item"> <img src="pic_4.jpg"> <p class="menu"><a href="sub/demo.html" tabindex="4" class="two">様々な支援要素</a></p> </div> <div class="item"> <img src="pic_3.jpg"> <p class="menu"><a href="sub/demo.html" tabindex="5" class="three">機能について</a></p> </div> <div class="item"> <img src="pic_6.jpg"> <p class="menu"><a href="sub/demo.html" tabindex="6" class="four">その他</a></p> </div> </div> <script src="index.js"></script> </body> </html>