0%
无障碍化 导航栏与可展开按钮
测试工具:
代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html> <html lang="en"> <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" /> <title>Document</title> </head> <body> <div> <head> <a href="/" class="logo">hello world</a> <nav> <ul> <li><a href="/who">Who am I</a></li> <li><a href="/services">Services</a></li> <li><a href="contact">Contact</a></li> </ul> </nav> </head> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!DOCTYPE html> <html lang="en"> <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" /> <title>Document</title> </head> <body> <button aria-expanded="false" aria-controls="sect1" id="btn1"> button </button> <p id="sect1" role="region" aria-label="btn1">content</p> </body> </html>
|
![image-20220731105155702](https://cdn.jsdelivr.net/gh/chiguayeshao/pic-bed/image-20220731105155702.png)