Increasingly, web design demands include improved web accessibility. But isn’t optimizing the site for all major browsers with cross-device compatibility enough? You can easily measure your website’s performance, accessibility, best practices, and SEO using Google Lighthouse. So why is accessibility important?

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

Structured HTML with appropriate semantics

While making the website visually appealing, assistive technology users should not get lost. Although many content management systems like WordPress apply HTML, it is your responsibility to double check and confirm that it is applied correctly.

For example, a tag

provides more detail than a tag

. Likewise, instead of using

, you must add a to clarify more. Since

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

Semantic HTML is easier to develop because you will get additional functionality. It works great on mobile. Moreover, when you give importance to the keywords wrapped in the tag

or , this helps with SEO.

Here is an example of good or bad semantic HTML code.


My heading

Here's how you can make an accessible website using HTML and CSS

My second heading


My heading

Here's how you can make an accessible website using HTML and CSS

The former is fairly easy to navigate for screen readers. It will read the header indicating the title and paragraph. It will stop one second after each element. You can skip some titles or go back to the previous one using Enter / Return. You can also form a table of contents using the header tag.

When you write presentation 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 which is much more difficult to cascade and manipulate since there are no potential selectors.

Language and layouts for an accessible website

You should use precise language with extensive acronyms and abbreviations. If possible, try to avoid dashes by writing 9-5 -> 9-5. Previously, HTML tables were used to create layouts. This prevented correct reads due to nested tables which formed a rather complex layout. Here is a modern website structure:


This is a header









Article heading




Related

So as you can see this layout is friendly for screen readers. Markup is understandable with clear and concise code. In addition, it is easy to maintain and requires less bandwidth when downloading. Make sure you’ve placed the source code in a logical way; It will make all the difference.

Reconsider UI controls, tables, and alt text

Most commonly, UI controls are buttons, forms, and link controls in your web document. The rule of thumb is that they can be manipulated from the keyboard. They have a default style (may differ across browsers) where you can access other options using the Tab key and hit Enter / Return to come to a conclusion. You can manage text labels by adding distinctive and meaningful anchor texts instead of “click here”.

To create accessible tables, add table headers

and specify the rows or columns using the scope attribute. In addition, you can use the summary attribute or to give screen readers a quick overview of the contents of the table.

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

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


A red flower ...

You used the aria-labelledby attribute to refer to this identifier. This will allow screen readers to use alt text in the form of this paragraph.

Standard CSS for better accessibility

The styling of the accessible page features means that your design should behave according to the main content of the page. For example, for an element

,

and

, a typical CSS should be:

h1 {
font-size: 4rem;
}
p, li {
font-size: 1.5rem;
color: blue;
}

Font size, letter spacing, font family, etc., should help a comfortable reading. Headers should stand out from the body of the text (the default style is also good). Additionally, the text should have a contrasting color against the background you select with CSS.

Style text, links and labels

Micro-interactions are possible with accessible CSS. It can be as small as accentuating text to highlight links appropriately. You can use the tags and distinctly. You can add a dotted underline using the 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 mouse pointer change, you need to highlight the focused text. The pointer cursor and outline play an important role in web accessibility.

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

Color contrast and masking values

Adjust the website color scheme so that the foreground color (text / image) contrasts with the background color mainly because it is more difficult for the visually impaired (e.g. color blind) to read correctly the content. You can use Color contrast checker to get a decent color scheme by WCAG criteria. Also, try adding markup signs (like an asterisk) as well as warnings or terms and conditions (not just a red alert).

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

Make it easy to change your style

The key point is that no matter how good the site design is, there are various reasons for users to override the style. For example, some maybe want a larger text size or want to change the text and background color for readability. Your content area should therefore be able to handle it completely.

Conclusion: Combine HTML and CSS

Now you know the basics of getting started with Semantic HTML and writing sane source code in the right order for an accessible website. Focus on the HTML and move on to creating accessible CSS once it’s done.

By using the techniques above, you can improve the user experience and serve a beautiful audience. So, start building responsive and accessible websites.

How To Build A Website: For Beginners

Today, I’m going to walk you through the process of building a complete website from scratch. Don’t worry if this seems difficult. I will be with you every step of the way.

About the Author

Nainy Mourya
(3 published articles)

Naincy specializes in building highly responsive websites and effective content strategy as well as web copies. She is a freelance technical writer who closely monitors technology trends.

Categorized Directory

Main Menu

Categorized Directory

How to Create an Accessible Website Using Semantic HTML and CSS

This is a header

Article heading

Categorized Directory

Main Menu

Categorized Directory

How to Create an Accessible Website Using Semantic HTML and CSS

Subscribe to our newsletter

One more step…!