CSS tips

While CSS won't change the way a screen reader reads the page, to a sighted person, it can have a large impact on usability. There are some general things to keep in mind when designing a site with CSS.

1. Sans-serif fonts are easier to read than serifed fonts (serifs are visual flourishes added to letters. We have a tactile example of the difference). By default, browsers will render text in the font Times New Roman (a serif font that looks, this first thing we want to do is change the 'font-family' to be more legible and make our sites look more modern.

   As a best practice, the font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. The following is an example of how to add fallback fonts

   body {font-family: Arial, Helvetica, sans-serif;}
               

2. As a we have just learned, adjusting the default margins can increase the legibility of your sites. To begin, here is an example of adding a margin to a page's body element. We can create room between the top, right, bottom, and left edges of the browser window and content of a site:

   body {margin: 40px 40px 40px 40px;}
               

   Order of numbers address top, right, bottom, and left (The acronym TRBL or trouble can help you remember this order).

3. It is possible to align text to the left side, right side, or center it on a page. For English, paragraph text is usually aligned left. If you want to center something, it's usually best done with headings or short sentences.

   Here is an example of how you can make all headings level one and two centered:

   h1, h2 {text-align: center;}
                   

4. If you're going to change default colors for your background (white) and text (black), make sure that colors have a sufficient contrast. Contrast can be checked using the Web Aim color contrast checker

   Here is an example of how you can make the background black and h1, h2, and paragraph text yellow:

     
            body {background-color:black;}
            h1, h2, p {color:yellow;}
            

5. It is also possible to hide elements using the display and visibility properties. These hidden elements are still read by screen readers and can be a place to leave special messages to other screen reader users

   Here is a CSS formula for how you can make paragraph text with an ID "message" hidden:

     
                   #message {
                   position:absolute;
                   left:-10000px;
                   top:auto;
                   width:1px;
                   height:1px;
                   overflow:hidden;
                   }
                   

6. Readability is also enhanced when proper punctuation and capitalization is used. Make sure that you are meticulous with these things to enhance readability.