基础 CSS 基础版式可访问性

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计漂亮的响应式网站、应用程序和电子邮件，使其看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Base Typography为所有基本元素提供了干净、有吸引力的排版样式，这有助于为元素创建吸引人且简单的默认样式。可访问性是指用户可以访问我们的内容。因为文本对您的页面内容非常重要，所以让每个人都可以访问它是至关重要的。

文字与图像：

我们可以使用实际的文本，而不是使用图形中的文本。辅助技术无法读取图像，图像中的文本也无法像普通文本一样被浏览器缩放。如果图像没有正确加载，但我们仍然希望用户了解相关的附加图像。然后，在这种情况下，我们可以通过使用 标记中的alt属性来简单地添加图像描述。

句法：

对比度：文字颜色和元素的背景颜色之间的对比度应该足够高，以便弱视人群清晰可见。推荐的最小对比度为 4.5:1。我们可以使用一种颜色对比度检查器（例如 WebAIM 的颜色对比度检查器）来检查对比度或特定颜色组合（如果我们不确定）。没有可用于检查对比度的专用有效自动化工具。我们还可以使用包含对比度检查器的 Google Chrome 的辅助功能开发工具来完成此任务。

类型大小：建议使用rem和em单位，以便调整所有内容的大小。这不仅有助于字体大小，还有助于我们处理内边距、边距、任何长度值等，确保设计应该均匀地放大和缩小，以防用户更改浏览器的文本大小。浏览器中文本的大小调整（最高 200% 缩放级别）对于视力受损的用户来说很常见。在 Foundation CSS 中， rem单位几乎可以在任何地方使用，即使编写 Sass函数来简化整个任务。 rem-calc()函数可用于将像素值转换为适当的 rem 值，该值接受一个或多个像素值。

句法：

.head {
       font-size: rem-calc(200);
       padding: rem-calc(20 20); 
}

示例：在此示例中，图像不加载，而是通过指定alt属性显示文本“geeksforgeekslogo”。

HTML

  

    
    
    
     

  

    
        

            GeeksforGeeks
        
        

            Foundation CSS Base Typography Accessibility
        
        
    

输出：

参考： https://get.foundation/sites/docs/typography-base.html#accessibility