March 18, 2025

ikayaniaamirshahzad@gmail.com

Everything You Need to Know About Web Acessibility


look like a button. True, but using semantic elements is important for the following reasons:

  • Semantic elements have built-in styles and functionality that you otherwise would need to add through CSS and JavaScript. This makes them easier to use.

  • They make the code easier to read and maintain, as you can actually see the elements being used rather than seeing a bunch of divs everywhere.

  • Screen readers can easily read and interpret semantic elements, helping people with visual impairments.

In the following sections, we’ll understand basic accessibility practices for each type of content you render on HTML. We’ll explore how to use the correct HTML tags for each situation, helping you see how choosing the right tag for its purpose improves accessibility.

Feel free to test each example with a screen reader. On Mac, use ⌘+F5 to activate VoiceOver, Mac’s built-in screen reader. For Windows, you can use the built-in screen reader called Narrator by pressing Ctrl + Windows Key + Enter.

Text Content

When writing text content, it’s important to use the correct elements for headings, paragraphs, and lists. Let’s understand with the following examples.

Let’s say you write headings and paragraphs in the following way:

<span id="heading1">Heading 1span>
<br />
<br />
<span id="heading2">Heading 2span>
<br />
<br />
This is one paragraph
<br />
<br />
This is another paragraph

This approach has the following problems:

  • The screen reader won’t be able to distinguish between headings and paragraphs – it would just read out the contents in one go, thus confusing people who depend on screen readers.

  • It’s difficult to style individual paragraphs, since there are no selectors. Even if you add a to each one, it requires extra CSS styling.

  • It also contains unnecessary line breaks which can be avoided by using the right elements.

The above code is an example of bad semantics. This is what you should do instead:

<h1>Heading 1h1>
<h2>Heading 2h2>
<p>This is one paragraphp>
<p>This is another paragraphp>

Here, we have used the right semantic elements for the text content, which has the following benefits:

  • A screen reader is able to distinguish the headings from the paragraph text by reading out the heading level before reading the text.

  • h1, h2, and p come with built-in styles and they each render on a new line. This eliminates the need to use line breaks.

  • The code looks cleaner and is much more readable.

Lists

To render a list of items, we have the following approaches. The non-semantic approach just groups a bunch of divs together and applies CSS styles to them.

<h2>TODO Listh2>
<div id="mylist">
  <div>Make Breakfastdiv>
  <div>Do Laundrydiv>
  <div>Complete blog postdiv>
div>

Again, this achieves the desired output but it’s difficult for screen readers to identify this content as a list of items. Instead, use semantic elements:

<h2>TODO Listh2>
<ul id="mylist">
  <li>Make Breakfastli>
  <li>Do Laundryli>
  <li>Complete blog postli>
ul>

This helps screen readers identify the element as an unordered list and read out each item. also comes with default styles and bullet points for each list item. You can also use

    for numbered lists, where the screen reader reads out the number on each list item.

    You can test the above examples with Mac’s VoiceOver to see the difference.

    Emphasized Text

    Emphasized text refers to highlighted text that gives importance to certain words or phrases within a piece of content. When adding emphasized text, it’s important to use the right semantic elements like and .

    <p>For best results, use <em>fresh ingredientsem> when cooking.p>

<p>The process of water turning into gas is called <strong>evaporationstrong>.p>

    These elements add some built-in styles to the text like bold and italic. Also, if you test with VoiceOver, you’ll notice that it puts some emphasis on the text inside these elements. This helps people using screen readers identify emphasised text.

    You may also add some colour to the emphasized text. But, there’s no need to add a lot of styles, else it may cause confusion. Visit MDN Docs-Emphasis and Importance to learn more about text emphasis in HTML.

    Abbreviations

    Next, when writing abbreviations (or acronyms), it’s a good practice to make them visually different and also include the full expansion of the acronym. You can also add some simple styling to the abbreviation. Learn more about abbreviations in MDN Docs-Abbreviations.

    Other best practices

    Apart from the above, there are a few other practices that are good to follow:

    • Use clear language, wherever possible. For example, expand abbreviations: instead of Jan, write January.

    • When writing ranges, avoid using dashes if possible, write 1 to 5 instead of 1-5.

    • Avoid using characters that may confuse users when a screen reader reads them out, for example ~ or *.

    • Avoid excessive exclamations and emojis.

    Also, when writing CSS for text content, remember these practices:

    • When using styles like font sizes, line height, and letter spacing, ensure that the text is comfortable to read.

    • Your headings should stand out from the other text, in case you are using CSS styles. Usually, this is achieved by just using the right heading tags.

    • Text color should have 4.5:1 contrast with the background. See the Color Contrast section for details.

    If you want more tips on styling text, visit MDN Docs – CSS Text Styling.

    Page Layouts

    Page layout is concerned with how the content is laid out on the screen. When you start designing a web page, your first thought is how your content should be positioned on the screen.

    Typically, a web page consists of a header, nav bar, footer, main content, and sidebar. In the bad old days (phrase borrowed from the docs, sorry), developers used tables to create page layouts consisting of these elements.

    But tables made the layouts incredibly complex and hard to maintain. Table layouts are also difficult for screen readers to read, affecting accessibility.

    Nowadays, there are much better ways to write page layouts. If you are including a header, nav bar, and footer along with the main content, you can use the following semantic elements:

    <header>
  <h1>Headerh1>
  <nav>
    
  nav>
header>


<main>
  
main>

<footer>
  
footer>

    Let’s understand each tag used above (skip if you already know):

    • : Represents the introductory section of a webpage, typically containing headings, logos, or navigation links.

    • : Represents the main content area that focusses on the primary purpose of the page or the website, excluding common elements like header, footer, or sidebar (may include sidebar depending on the website).

    • : Represents the bottom section of the web page, typically containing metadata, copyright information, or links to related resources.

    These elements are called sectioning elements. Following are advantages of using these elements:

    • The layout is clear with each element clearly describing its purpose, making the code readable and maintainable.

    • Using the right semantic elements makes screen readers identify each part of the layout, thus helping visually impaired users understand how the website is structured.

    Of course, you can write the above layouts by using divs, but sectioning elements provide good semantics and help users understand the type of content they are navigating.

    Interactive Elements

    These consist of elements through which a user interacts with the web page. These elements include buttons, form fields, links, and so on.

    Keyboard Accessibility

    Each interactive element on a web page should be navigable through the keyboard. This gives a user flexibility while navigating your website. Keyboard accessibility is really helpful for people with mobility impairments that may struggle to use a mouse.

    For instance, visit this page and try to navigate to each interactive element by pressing Tab on your keyboard. You can also press Enter/Spacebar to click on a button or a link. This should give you an idea of what a keyboard-accessible website looks like.

    For the most part, using the right semantic elements should ensure keyboard accessibility, as they come with built-in functionality. Check out the following example:

    <p>
  Visit my blog at 
  <a href="https://www.freecodecamp.org/news/author/KunalN25/">freecodecamp.orga>
p>

<button>Click mebutton>
<button>Click me againbutton>

<div>
  <input type="text" placeholder="Enter your name" />
div>

    Here, we have used the correct semantic elements for the hyperlink, button, and input element. All these elements can be accessed through Tab and interacted with using Enter/Spacebar. Check out other form-related elements in this list.

    Some people use a div or span and make them look like an anchor tag or a button with CSS styling. But this is bad for accessibility for two reasons:

    • div and span are not tab-able by default. So, even if you do make a div look like a button, the user cannot navigate to it using the keyboard.

    • Screen readers won’t be able to identify them as buttons, while in the case of semantic elements, they read these elements out as buttons or links.

    But if you absolutely have to use a div to create a clickable element, include the following attributes:

    <div id="customButton" role="button" tabindex="0">Click mediv>

    Here, we have added two attributes, tabindex and role. We’ll understand the role attribute in a later section.

    The tabindex attribute takes an integer that specifies the tab order of tab-able elements, instead of the default top to bottom tab order. A positive integer means the element is focussed in an order specified by the attribute’s value.

    But using tabindex to change the default tab order is not recommended, as it may cause confusion for keyboard navigators and affect accessibility. And frankly, it’s not necessary.

    You should only ever use the following two values:

    • tabindex=”0” makes an element tab-able which means it can be accessed through a keyboard in the natural tab order.

    • tabindex=”-1” means the element is not reachable via keyboard navigation.

    These attributes make the div behave like a button, but there’s a small piece of JS code you still need to add to make the button clickable via Enter/Return:

    document.getElementById("customButton").addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.activeElement.click();
  }
});

    Here, we have added an event listener to the element that listens for the keydown event. If the key pressed is Enter, then it calls the element’s onclick method.

    If you are using a non-semantic element as a button, you need to add this extra code to make it work like a button. So, only use it if it’s absolutely necessary. Otherwise, it’s always better to use the correct semantic element in the first place.

    Keyboard Accessibility is important for audio and video controls too. We’ll discuss this in the Multimedia Accessibility section.

    Form Labels

    A form label is some text that describes what you need to enter in a form field. Adding labels to form fields is a necessary practice since it lets the user know how to fill the form. But using the right semantic elements is important.

    You could do the following and still achieve the desired output:

    Enter name: <input type="text" id="name" name="name" />

    This is not good for screen reader users, as it does not read out what the input field is for. Even if it reads out “Enter name”, the user may not associate it with the input field. Instead, use the element for form labels.

    <div>
      <label for="name">Enter name:label>
      <input type="text" id="nameField" name="name" />
    div>

    The for attribute associates the label with the input field. With this, when the screen reader’s focus is on the input field, it reads out the label, followed by “edit field” to let the user know they should enter their name in the input field.

    Check out the form without label and form with label examples for more clarity. Use Mac’s Voiceover (⌘+F5) or Windows’ Narrator (Ctrl+Windows+Enter) to see how it reads out the form elements.

    Using offers more advantages:

    • By linking a to an input field with the for attribute (clickable association), clicking on the label focuses on the input field.

    • Clickable association with input field helps the user’s select small inputs like checkboxes or radio buttons.

    • It follows semantic HTML and specifies that the text is being used as a form label.

    Lastly, remember that the label text should clearly describe what the user should enter into the field. For examples, “Enter name” or “Enter email”.

    This applies to buttons as well. Ensure that button text is descriptive enough to tell the user what they are clicking on. Vague texts like “Click me!” or “Click here!” are not helpful. Examples of descriptive text are “Submit Form” or “Download Report” that give the users a clear idea of the button’s action.

    Along with these, links also come under interactive elements. But since there are a lot of examples for Links, I’ll discuss them in their own section now.

    Links are a key part of web pages as they allow the user to navigate the website. Links serve different purposes: going to a different page in the same website, going to an external website, or downloading something. In this section, you’ll learn about several practices with links that contribute towards accessibility.

    Linking to External Websites

    When you add a link that lets users open an external website, including the target=_blank attribute opens the link in a new tab.

    <a href="https://www.wikipedia.org/" target="_blank"> Wikipedia a>

    This is helpful for users as they don’t need to exit the website, saving them from the hassle of navigating back to the website.

    Also, if your link opens in a new tab, it’s a good idea to mention it so the screen readers can read it out and help visually impaired users.

    <a href="https://www.wikipedia.org/" target="_blank" >
Wikipedia (opens in new tab)
a>

    Similarly, if your link opens a non-HTML file, like a pdf or docx, you should mention it:

    <a target="_blank" href="jan-salary-slip.pdf">
Salary-January (PDF)
a>

    Alternatively, you can use an icon to indicate a link opening in new tab.

    <a href="https://www.wikipedia.org/" target="_blank">
  Wikipedia
  <img src="new-tab-icon.png" alt="Opens in new tab" style="width:16px; height:16px; margin-left:5px;">
a>

    When using an icon, make sure that you include the alt attribute with description about the image. We’ll understand its purpose in the Multimedia Accessibility section.

    A skip link is a link element placed at the top of a page that links directly to the main content of the page. This allows the users to skip the headers and all the navigation menus, and directly jump to the main content of the page. This is helpful on websites where there’s lot of repetitive content on top like menus or banners.

    Skip links are especially helpful for people who are visually impaired and who might be using screen readers. These links provide a way to bypass repetitive navigation menus and directly access the main content. This also helps keyboard navigators, thus saving time and enhancing the user experience.

    To add a skip link, add an anchor tag at the very top, just under the body tag, and link it to the main content.

    <body>
 <a href="#main">Skip to main contenta>
    <header>
      <h1>Page Titleh1>
      <nav>
        <ul id="nav-links">
          <li><a href="/">Homea>li>
          <li><a href="/about">Abouta>li>
          <li><a href="/blog">Bloga>li>
          
        ul>
      nav>
    header>
    <main id="main">
      
    main>
body>

    The skip link is keyboard accessible and is also read out by the screen reader. Clicking on it takes you straight to the main content. Visit WebAIM and press Tab on your keyboard to see skip links in action.

    By default, links created with the anchor tag are visually different from non-link text. This is because the anchor tag has built-in styles like colour, text-decoration, focus-ring (displays when you tab on to the link with the keyboard) and hover effects.

    Links should look different from the other text so they’re easily distinguishable. As you saw above, the browser does that for you, so you don’t need to do much. But if you are adding custom styles to the link that fit in better with your theme, you need to follow some best practices:

    • Links should have different colors for default, visited, focus and hover states.

    • Link text color should be different from the non-link text and should have different styling.

    • Link text color should have a contrast of 3:1 between other text and 4.5:1 contrast between background color. See the Color Contrast section for more understanding

    An example of custom styling for links is shown below (from the Docs):

    a {
  color: #ff0000;
}

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

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

    With the help of pseudo-classes, this adds different styles for when link is hovered, previously visited, focussed (with the keyboard), or active (when the link is being clicked).

    You can experiment with different colors and styles, but don’t remove the cursor: pointer or outline properties. Both are important for people using keyboard navigation.

    Remember, links already have built-in styles for all the link states. Only add your own if you want something in line with your website’s theme.

    Avoid using onclick handlers

    Links are used to navigate to another web page on the same website or navigate to an external website. Specifying the link in the href attribute does this for you without any need to add JavaScript code.

    But some people add an onclick attribute to anchor elements, to make them behave like buttons and set href=”#” or href="https://www.freecodecamp.org/news/the-web-accessibility-handbook/javascript:void(0)" to avoid page refresh. This causes unexpected behaviour and may lead to the following problems:

    • Copying or dragging this link adds an unnecessary # or void(0) to the URL, which does not make sense.

    • Clicking the link immediately scrolls the page to the top, which may lead to the user losing track of where they were.

    • If JavaScript is still downloading, clicking the link does nothing and the web page becomes unresponsive.

    It is also bad for semantics and accessibility, as people using screen readers may get confused. If you want to add JavaScript functionality on click of an element, just use a

If you read this far, thank the author to show them you care.



Source link

Latest articles

Leave a Comment

VOICE

Morbi massa risus, ultricies in nulla ut, elementum volutpat mi. Quisque rhoncus dolor in velit lobortis cursus. Duis quis lobortis quam. Quisque sagittis est non odio consequat, non suscipit orci condimentum. Integer suscipit aliquam velit, at ultricies metus luctus vel.

[Insert your form here]

Tags

Copyright © 2025 VOICE. Built with GeneratePress