Introduction

You may have heard about Web Accessibilities, but what are Web Accessibilities?

Web Accessibilities means that the websites, tools and technologies are designed and developed so that people with disabilities can use them without any difficulty. More specifically people can: perceive, understand, navigate and interact with the web.

When it involves to Web Accessibility, CSS plays a significant role for creating a website more accessible and user friendly. CSS stands for cascading styles sheet, it allows you to change display and elegance characteristics of HTML elements. Use of CSS can be done to boost the navigation on a web page and at the same time getting to know with what element of the web the user is coping with in real time.

In this article, I’ve put together a few unique conditions that can affect the way some users experience the web and some simple CSS techniques that will help you build better web experiences.

"Standard" text content structure:

Headings, paragraphs, lists — the core text content of your page:

<h1>Heading</h1>
<p>Paragraph</p>
<ul>
  <li>My list</li>
  <li>has two items.</li>
</ul>

Some typical CSS might look like this:

h1 {
  font-size: 5rem;
}

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

You should:

Select reasonable font sizes, line heights, letter spacing, etc. to make your text more logical, legible, and easy to read.
Make sure your headings stand out from your body text, typically big and bold like the default styling.
Lists should look like lists.
Text color should contrast well with your background color.

Emphasized text

Inline markup that confers specific emphasis to the text that it wraps:

<p>The water is <em>very hot</em></p>

<p>Water droplets collecting on surfaces is called <strong>condensation</strong></p>

You might want to add some simple coloring to your emphasized text:

strong, em {
  color: #a60000;
}

You will however rarely need to style emphasis elements in any significant way. The standard conventions of bold and italic text are very recognizable, and changing the style can cause confusion for the user.

Abbreviations

An element that allows an abbreviation, acronym, or initialization to be associated with its expansion:

<p>Web content is marked up using Hypertext Markup Language, or <abbr>HTML</abbr></p>

Again, you might want to style it in some simple way:

abbr {
  color: #a60000;
}

The recognized styling convention for abbreviations could be a dotted underline, and it's unwise to significantly deviate from this.

Links

Hyperlinks — the way you get to new places on the web:

<p>Visit the <a href="https://www.google.com">Google Homepage</a></p>

Some simple link styling is demonstrated below:

a {
  color: #ff0000;
}

a:hover, a:visited, a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

The Standard way to show a link is an underlined and different color(default: blue) and when the link has been visited becomes different (default: purple),and another color when the link is activated(default: red).

In addition, the mouse pointer changes to a pointer icon when links are hovered over, and the link receives a highlight when focused (e.g. via tabbing) or activated. The following image shows the highlight in both Firefox (a dotted outline) and Chrome (a blue outline):

Color and Color Contrast

When choosing a color scheme for your website, confirm that the text color contrasts well with the background color. Your design might look cool, but it's no good if people with visual difficulty like color blindness can't read your content.

Conclusion

In this article, I put together a number of tips that you, as the developer, can start applying to the way you write CSS, to create better web experiences.

While this is not be a full list, it's a decent starting point. Remember that creating accessible web experiences isn't a “do it all at once” task. It’s a relentless slow process that starts by incorporating accessibility into development workflows from the onset then making changes along the way, as you test and find faults.

Checkout our other blogs as well.

Happy Learning ;-)

CSS Accessibilities