Foundation CSS Base Typography Accessibility

Last Updated : 25 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Base Typography facilitates the clean, attractive typographic style to all the basic elements, which helps to create appealing and easy default styles for the elements. Accessibility refers to our content being accessible by the users. Because the text is so critical to your page’s content, making it accessible to everyone is crucial.

Text vs. Images:

We can use the actual text, instead of utilising text within a graphic. An image can’t be read by assistive technology, and the text in an image can’t be scaled by a browser like ordinary text. If the image doesn’t load properly but we still want the user to know about the related attached image. Then, in that case, we can add the image description in brief, by specifying it using the alt attribute in the <img> tag.

Syntax:

<img src="local-image path" alt="text">

Contrast: The contrast should be high enough between the text color & the background color of the elements, in order to clearly visible by the low-vision people. The recommended minimum contrast ratio will be 4.5:1 preferred. We can check the contrast or the specific color combination(in case we are not sure) by using one of the color contrast checkers such as WebAIM’s color contrast checker. There is no dedicated effective automated tool that can be used to check for the contrast. We can also use Google Chrome’s Accessibility Developer Tools which contains the contrast checker, to accomplish this task.

Type Size: It is recommended to use the rem and em units, in order to size everything. This not only helps in font size but also helps us in padding, margins, any length value, etc, which ensures the design should be scaled up and down uniformly, in case the user changes their browser’s text size. The resizing of the text in the browser, up to 200% zoom level, is common for vision-impaired users. In Foundation CSS, the rem unit can be used nearly everywhere, even though writing the Sass function to make the overall task easier. The rem-calc() function can be used to convert the pixel value to proper rem values, which accepts one or more pixel values.

Syntax:

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

Example: In this example, the image doesn’t load, instead of that, the text “geeksforgeekslogo” will be displayed, by specifying the alt attribute.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Foundation CSS Base Typography</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" 
          crossorigin="anonymous" />  
</head> 
  
<body> 
    <center> 
        <h2 style="color: green"> 
            GeeksforGeeks 
        </h2> 
        <h4> 
            Foundation CSS Base Typography Accessibility 
        </h4> 
        <img src="static/images/geeksforgeeks.jpg" 
             alt="geeksforgeekslogo" /> 
    </center> 
</body> 
</html>