Categorized Directory

Main Menu

  • Home
  • Search directory
  • Web crawlers
  • Collect data
  • Indexation
  • Bankroll

Categorized Directory

Header Banner

Categorized Directory

  • Home
  • Search directory
  • Web crawlers
  • Collect data
  • Indexation
  • Bankroll
Web crawlers
Home›Web crawlers›How to Create an Accessible Website Using Semantic HTML and CSS

How to Create an Accessible Website Using Semantic HTML and CSS

By Ed Robertson
July 15, 2021
0
0

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
Next article

, 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.

Structured content for screen reader users

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








Web accessibility in semantic HTML

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.

A red flower

Result after adding alt text

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.


    make-website-beginner
    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.

    Read more


    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.

    More from Naincy Mourya

    Subscribe to our newsletter

    Join our newsletter for technical tips, reviews, free ebooks and exclusive offers!

    One more step…!

    Please confirm your email address in the email we just sent you.

    .

    Related posts:

    1. Which platform is right for you?
    2. SEO: what is it and how it works
    3. Empathy app helps grieving people complete tasks
    4. Web Scraper Software Market To Gain USD 948.60 Million At

    Categories

    • Bankroll
    • Collect data
    • Indexation
    • Search directory
    • Web crawlers

    Recent Posts

    • How your phone could be used in the criminalization of abortion
    • How many people have prostate cancer without knowing it?
    • EOFY changes: their impact on your business
    • RURU again a winner! – OurAuckland
    • Federal Privacy Bill, Broadband Data Collection

    Archives

    • June 2022
    • May 2022
    • April 2022
    • March 2022
    • February 2022
    • January 2022
    • December 2021
    • November 2021
    • October 2021
    • September 2021
    • August 2021
    • July 2021
    • June 2021
    • May 2021
    • April 2021
    • Privacy Policy
    • Terms and Conditions