Design accessibility

Design accessibility describes how many people can use the website interface. It is the process of designing websites for people with various types of impairments, such as vision, hearing, mobility, cognitive, and so on. Earlier, you learned about impairments and what technologies work in favor of users who have them. In this topic, you will learn how can you adjust your design to make your website even more accessible. You will learn various coding styles you can apply to your design in order to give the user the most pleasant experience.

Text styling

You can style anything with CSS, including text. However, as you already know, it isn't always the best practice, especially when it comes to accessibility. Because of accessibility, you should use focusable HTML elements such as main, section, article, and so on. So how can you style your text, but still make it accessible?

First of all, use standard text content structure. What does that mean? It means that, instead of using a lot of divs, you use headings, paragraphs, lists, and other core structures of a web page. Let's look at the example below:

<h1>Groceries</h1>
...
<p>List</p>
...
<ol>
  <li>Apple</li>
  <li>Bread</li>
  <li>Juice</li>
</ol>

And here is the CSS code:

h1 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}

In general, you can always style page features to suit your design, but try to keep in mind every user that is accessing your web page. Here are some guidelines you can follow to make your design more accessible:

• Use a legible font, sensible font size, and sufficient line height to make your text more readable, clear, and pleasant to look at.

• Use good semantics in a logical order. Emphasize the headings from the body text with bold text and apply color design.

• Make sure your text color is in contrast with the background color.

Next up are links. A link is an essential part of every website because it leads to other webpages. Because of that, we need to enhance them with proper styling. Links have a different color for each state: blue for the standard state, purple for the visited state, and red for the nonactive state. Thanks to CSS, you can change this into a more accessible design. When styling links, be creative. Change colors, font size, and color contrast to make the link stand out. Try to change the state of the link once users have clicked on it. Here is the basic structure of a link:

Check out the CSS code below for the styled link with a more accessible design:

a {
text-decoration: none;
font-size: 25pt;
font-family: Arial, Helvetica, sans-serif;
color: rgb(55, 54, 54);

}

a:hover {
    color: rgb(242, 240, 244);
    background-color: rgb(56, 56, 56);
    border-radius: 10pt;
}

Here is the output:

The link style when hovered over with mouse pointer:

Styling tables

In addition to text styling, let's discuss tables. Tables are used for the tabular representation of data. Applying CSS to tables is primarily for fitting the tables to the design of your choice. To make sure your table is more accessible, emphasize the header so users have an idea of what the table is about. Also, use color contrast, such as zebra stripping for better data analysis. Here is a good example of an easily accessible table:

<h1>Table</h1>
    <table>
         <tr>
           <th scope="col">Name</th>
           <th scope="col">Age</th>
           <th scope="col">Gender</th>
         </tr>
         <tr>
           <th scope="row">Inez</th>
           <td>23</td>
           <td>Female</td>
         </tr>
         <tr>
           <th scope="row">James</th>
           <td>26</td>
           <td>Male</td>
         </tr>
         <tr>
           <th scope="row">Betty</th>
           <td>21</td>
           <td>Female</td>
         </tr>
     </table>

Here is the CSS file:

html {
    font-family: sans-serif;
  }

  table {
    width: 600px;
    border-collapse: collapse;
    border: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }

  th,td {
    padding: 10px;
  }

  td {
    text-align: center;
  }

  th[scope="col"] {
    background: #ccc;
  }

  tr:nth-child(even) {
    background: #eee;
  }

  tr:nth-child(odd) {
    background: #ddd;
  }

Here is the output:

Color and contrast

Color picking is one of the most important things you need to look out for when building a website. There are some simple steps you can follow. First and foremost, make sure your text is in contrast with the background color. If you are picking a black-and-white design, make sure your black is not set to fully black, and your white is not set to fully white. If the contrast is too high, it can strain your eyes, and that experience is undesirable for any user. Still, make sure the contrast is right so users with color blindness can view the website. This Contrast Checker can help you make sure the color contrast is set right. Below you can see some contrast examples for black-and-white design to help you understand it better:

Let's take a look at the JetBrains web page. It is a good example of a black-and-white design. If you look carefully, you can notice that the black color is not completely black. You can also notice that by comparing the logo with the rest of the website. The links in the navigation bar are not white but gray, but there is still good contrast there and it perfectly matches the rest of the design. The main information is in white, but not entirely. Lastly, the website has a colorful design that is in good contrast with the text.

Accessible responsive design

Responsive design plays a huge part in web accessibility. There will be users that need to zoom in on the webpage up to 500% percent, and your job is to make that possible by using responsive design. A good practice is to use the viewport meta tag. The viewport meta tag gives the browser instructions on controlling the page dimensions and scaling. Let's look at the code snippet below:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width sets the width of the page to match the screen width of the device, and initial-scale=1.0 establishes a 1:1 relationship between CSS pixels and device-independent pixels.

Instead of setting your website to a specific size, make sure you are using a flexible grid. In other words, if the user makes the screen bigger let the elements get bigger too. Always use relative units such as rem and em because of content resizing. When you are adapting your website for the mobile screen, make sure your tap targets are large enough so users can easily activate them. A good size element you should stick with is 48px.

Content ordering

Content ordering is a vital part of design accessibility. Your content must be in logical order so your users can easily navigate your website. Screen readers read the content based on their order and based on focusable elements from top to bottom. That's why it is important to have a well-structured website. To get a proper content ordering, here are some CSS properties that allow you to move elements around for better design and content accessibility:

• position: absolute; to highlight certain elements;

• order to set the element order in a flex or grid container;

• flex-direction to set a flex item in the flex container (normal or reversed);

• grid-auto-flow to set auto-placed items to flow in the grid;

• grid-template-areas to set the cells of the grid by assigning them names.

Conclusion

In this topic, you learned great style practices you can follow in order to make your design more accessible. Here is the summary of what you need to remember:

• Use a legible font, sensible font size, and sufficient line height to make your text more readable.

• Your text color must be in contrast with the background color.

• Use CSS to accomplish the accessible responsive design.

Now that you've passed the theory part, let's put it to the test!