使编码网站可访问的提示

保持您的网站可访问性并不像看起来那么艰巨！以下是您在编码时应该记住的一些简单提示：

替代文本：替代文本有两个主要目的：

• 向有视觉障碍的用户提供该图像所代表的内容的描述。
• 如果图像由于互联网速度慢或其他问题而无法加载，用户可以使用该描述来了解页面中缺少的内容。

输出：

标题标签： HTML 中的        

Home Page

  

输出：

标题：如果您因为喜欢字体大小而使用标题，请停止偷懒并使用 CSS。标题在保持网站结构可访问方面发挥着重要作用。依靠屏幕阅读器浏览网页的用户可以一次浏览网站的每个标题。屏幕阅读器将按顺序浏览标题，如果您正确使用它们，您可以使您的网站更有条理，更易于浏览。

• h1 标签应该只用于页面的标题。
• h2 标签用于子类别。示例：如果您正在创建一个讨论电视节目《老友记》中每个字符的网站，您应该将 h1 用于标题“老友记”，h2 用于每个字符（瑞秋、莫妮卡、菲比、钱德勒、乔伊和罗斯）。
• 不要过度使用标题。如果您需要的不仅仅是 h3，您可能使用它太多，您的网站可能难以浏览。

标签：您应该使用标签来表明页面上某些项目的用途。

• 如果页面上有按钮或表单，则应使用指示按钮或表单元素标签的标签。同样，它对依赖屏幕阅读器的用户非常有帮助
• ARIA 标签是添加可访问标签和描述的最佳方式。它会覆盖任何其他本地标签机制，例如 HTML 标签元素。

输出：

菜单：要使下拉菜单可访问，下拉项需要保留在屏幕上。否则，如果用户不小心将鼠标悬停在下拉菜单之外，他们将无法再收听这些项目。使用点击而不是悬停来确保菜单停留在屏幕上。

  

    
    Menu
    
        .dropdown {
            display: inline-block;
            position: relative;
        }
        .dropdown-items {
            display: none;
            position: absolute;
            z-index: 1;
        }
        .dropdown-items a {
            display: block;
        }
        .show {
            display: block;
        }
    
      
    
        function myFunction() {
            document.getElementById("dropdown-menu")
                            .classList.toggle("show");
        }
  
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.
                    getElementsByClassName("dropdown-items");
              
                var i;
                  
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                      
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    

  

    
        
            Dropdown
        
  
        
            Item 1
            Item 2
            Item 3
        
    

  

输出：

TAB 键：

• 如果您想确保您的网站可以轻松导航，但又不想在每次更改时使用屏幕阅读器测试您的代码，请使用键盘上的 TAB 键！
• 屏幕阅读器将按照与 TAB 键相同的顺序浏览您的网站内容。