This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -0,0 +1,31 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" | ||
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Tic Tac Toe</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <section> | ||
| <h1 class="game--title">Tic Tac Toe</h1> | ||
| <div class="game--container"> | ||
| <div data-cell-index="0" class="cell"></div> | ||
|
||
| <div data-cell-index="1" class="cell"></div> | ||
| <div data-cell-index="2" class="cell"></div> | ||
| <div data-cell-index="3" class="cell"></div> | ||
| <div data-cell-index="4" class="cell"></div> | ||
| <div data-cell-index="5" class="cell"></div> | ||
| <div data-cell-index="6" class="cell"></div> | ||
| <div data-cell-index="7" class="cell"></div> | ||
| <div data-cell-index="8" class="cell"></div> | ||
| </div> | ||
| <h2 class="game--status"></h2> | ||
| <button class="game--restart">Restart Game</button> | ||
| </section> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> | ||
By using
divelements, this makes the game inaccessible for screenreader and keyboard users.Fortunately, in order to remedy this, all you have to do is refactor these into
buttonelements.Buttons typically have a lot of browser-specific styling associated with them, which drives this tendency to use an unstyled
divas a clean slate for designing a custom UI element. However, you can use a CSS button reset to mitigate this and get your buttons looking the way that you want them to. CSS Tricks has a great blog on the subject.