The demands for web design increasingly include improved web accessibility. But isn’t optimizing the site for all the major browsers with multiple device compatibility enough? You can easily measure your website performance, accessibility, best practices, and SEO using Google Lighthouse. So why does accessibility matter?

According to the CDC (Centers for Disease Control and Prevention), over 60 million Americans live with a disability. Following the Web Content Accessibility Guidelines, you can introduce some preliminary considerations that will contribute to making an accessible website. Here’s everything you need to get started with web accessibility using HTML and CSS.

Structured HTML With Proper Semantics

While making the website visually appealing, assistive technology users shouldn’t get confused. Although many content management systems like WordPress apply the HTML, it is your responsibility to recheck and confirm that it is applied correctly.

For instance, a <nav> tag provides greater detail than a <div> tag. Similarly, instead of using <div> Next article </div>, you should add a <button> Next article </button> for clarity. Since <button> already has some default style, you may probably want to override it. Still, the built-in keyboard accessibility would allow the users to navigate between the buttons using the tab key.

Read more: Simple HTML Code Examples You Can Learn in 10 Minutes

Semantic HTML is easier to develop as you will get additional functionalities along with it. It works awesome on mobile. Also, when you give importance to keywords wrapped inside <h1> or <a> tag, it helps in SEO.

Structured Content for Screen Reader Users

Here’s an example of semantic HTML good vs. bad.

        <!--Good semantic HTML-->
<h1 class="hero-title">My heading</h1>
<p>Here's how you can make an accessible website using HTML and CSS</p>
<h2>My second heading</h2>
<!--Bad semantic HTML-->
<p style="font-size: 2.5em; font-weight: bold;">My heading</p>
<p>Here's how you can make an accessible website using HTML and CSS</p>

The first case is pretty easy to navigate for screen readers. It will read the header notifying about the heading and the paragraph. It will stop for a second after each element. You can skip some headings or go back to the previous using Enter/Return. You can also form a table of contents by using the header tag.

When you write presentational HTML instead of semantic HTML (in the second case), the line breaks unnecessarily and results in a bad experience. It’s like preparing a giant block that is way harder to cascade and manipulate since there are no potential selectors.

Language and Layouts for Accessible Website

You should use precise language with expanded acronyms and abbreviations. If possible, try to avoid dashes by writing 9-5 -> 9 to 5. Previously HTML tables were used to create the page layouts. It used to hamper the correct readouts due to nested tables that formed a quite complex layout. Here is a modern website structure:

        <header>
<h1>This is a header</h1>
</header>
<nav>
<!--navbar for navigation-->
</nav>
<!--Main page content-->
<main>
<!--containing article-->
<article>
<h2>Article heading</h2>
<!--article content-->
</article>
<aside>
<h2>Related</h2>
<!--aside content-->
</aside>
</main>
<!--Website footer-->
<footer>
<!--footer content-->
</footer>
Web accessibility using semantic HTML

So, as you can see, this layout is screen reader friendly. The markup is understandable with a clear and concise code. Also, it is easy to maintain and requires less bandwidth while downloading. Ensure that you have placed the source code logically; it will make all the difference.

Reconsider UI Controls, Tables, and Alt Text

Most commonly, UI controls are buttons, form, and link controls of your web document. The rule of thumb is that they can be manipulated by keyboard. They have some default style (may differ in different browsers) where you can jump to other options using the tab key and press Enter/Return to reach a conclusion. You can manage the text labels by adding distinctive and meaningful anchor texts instead of "click here."

To create accessible tables, add table headers <th> and specify the rows or columns using the scope attribute. In addition, you can use the <caption> or <table> summary attribute to give the screen readers a quick overview of the content of the table.

Alternative text gives the contextual information of the image or video to the web crawlers and screen readers. If your image is for decorative purposes, it’s better to leave the alt tag empty. Otherwise, giving a detailed description of the image helps a lot.

        <img src="flower.png" alt="A red flower" title="The red flower">
    
Result after adding alt text

In most cases, the screen reader will read out the alt text, filename, and the title attribute (you can skip it). Also, if you don’t want to use alt text or want to add the same label to multiple images, then here’s a quick tip:

        <img src="flower.png" aria-labelledby="red-flower">
<p id="red-flower">A red flower ...</p>

You used the aria-labelledby attribute for referring to that id. It will allow the screen readers to use alt text in the form of that paragraph.

Standard CSS for Better Accessibility

Styling accessible page features means that your design should behave according to the core content of the page. For instance, for a <h1>, <p>, and <li> element, a typical CSS should be:

        h1 {

font-size: 4rem;

}

p, li {

font-size: 1.5rem;

color: blue;

}

The font size, letter spacing, font family, etc., should help in a comfortable read. Headings should stand out from the body text (default styling is also good). Additionally, the text should have a contrasting color from the background you select with CSS.

Micro-interactions are possible with an accessible CSS. It can be as small as emphasizing the text to highlighting the links in a proper way. You can use the <strong> and <em> tag distinctively. You can add a dotted underline using the <abbr> element.

The standard link should be underlined with a default color: blue and a previously visited link with a default color: purple (you can customize it).

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

So, with a change in mouse pointer, you should highlight the focused text. The pointer cursor and the outline play an important role in web accessibility.

Use CSS to give a clean look to the form elements and labels. Also, decide focus/hover states that are consistent across most browsers. Remember that these small cues help people to understand your web page.

Color Contrast and Hiding Values

Adjust the website’s color scheme so that the foreground (text/image) color contrasts with the background color primarily because it is harder for people with visual impairments (e.g., color blindness) to read the content properly. You can use Color Contrast Checker to get a decent color scheme according to the WCAG criteria. Also, try to add markup signs (like an asterisk) along with warnings or terms and conditions (not just a red alert).

Screen readers have nothing to worry about until the source code order is decently written. Try to avoid using display: none or visibility: hidden properties since they hide the content from the screen readers.

Make It Easy To Override Style

The key point is no matter how well you design the site, users have various reasons to override the style. For example, maybe some want a larger text size or want to change the text and background color for readability. So your content area should be able to handle it completely.

Wrapping Up: Combine HTML and CSS

Now, you know the basics of getting started with semantic HTML and writing a sensible source code in the right order for an accessible website. Focus on HTML and move towards making an accessible CSS once it’s done.

Using the above techniques, you can enhance the user experience and serve a beautiful audience. So, start making websites that are responsive and accessible.