Introduction
HTML, or Hypertext Markup Language, is the primary language for structuring web pages. It collaborates with CSS and JavaScript to define content, appearance, and behavior. HTML comprises elements enclosed in angle brackets, encompassing various webpage components like headings, paragraphs, images, and links. The standard structure includes the , , and elements. HTML facilitates hyperlink creation through the tag, enabling seamless navigation between web pages. HTML5, the latest version, introduces new elements and attributes, enhancing web functionality and accessibility. In essence, HTML serves as the foundation for creating structured, interactive web content, essential for web development and design.

ARIA roles and attributes
About Lesson

ARIA (Accessible Rich Internet Applications) roles and attributes are a set of attributes defined by the W3C (World Wide Web Consortium) to enhance the accessibility of web content, particularly for users with disabilities. Here’s how ARIA roles and attributes improve accessibility:

  1. Role Attribute:

    • The role attribute defines the purpose or role of an element in the web page’s accessibility tree.
    • It supplements the native semantics of HTML elements, providing additional context for assistive technologies like screen readers.
    • ARIA roles help assistive technologies understand the structure and purpose of content, improving navigation and interaction for users with disabilities.
    • Example:
      html
      <div role="button" tabindex="0" onclick="performAction()">Click Me</div>
  2. aria-labelledby and aria-label Attributes:

    • The aria-labelledby attribute references the ID of an element that serves as a label for the current element.
    • The aria-label attribute provides a text label directly to the current element.
    • These attributes help provide descriptive labels for elements that are not inherently accessible, such as custom controls or dynamically generated content.
    • Example:
      html
      <input type="text" aria-labelledby="nameLabel" />
      <span id="nameLabel">Enter your name:</span>
  3. aria-describedby Attribute:

    • The aria-describedby attribute references the ID of an element that describes the current element.
    • It provides additional context or instructions for users, particularly for form fields or complex interactive components.
    • Example:
      html
      <input type="password" aria-describedby="passwordInstructions" />
      <div id="passwordInstructions">Password must be at least 8 characters long.</div>
  4. aria-hidden Attribute:

    • The aria-hidden attribute indicates whether an element is visible or hidden to assistive technologies.
    • It can be used to hide decorative or redundant elements from screen readers while still making them available to sighted users.
    • Example:
      html
      <div aria-hidden="true">Decorative image</div>
  5. aria-expanded Attribute:

    • The aria-expanded attribute indicates whether a collapsible or expandable element is currently expanded or collapsed.
    • It helps screen reader users understand the state of interactive elements and navigate content more effectively.
    • Example:
      html
      <button aria-expanded="true">Collapse Section</button>
  6. aria-live Attribute:

    • The aria-live attribute indicates that an element’s content is live-updated and should be announced to users by assistive technologies.
    • It is commonly used for dynamic content that changes asynchronously, such as live chat messages or updates.
    • Example:
      html
      <div aria-live="polite" id="statusMessage"></div>
  7. aria-disabled Attribute:

    • The aria-disabled attribute indicates whether an interactive element is currently disabled or not.
    • It helps assistive technologies convey the state of interactive elements to users with disabilities.
    • Example:
      html
      <button aria-disabled="true">Submit</button>

By using ARIA roles and attributes effectively, web developers can create more accessible and inclusive web experiences, ensuring that all users, including those with disabilities, can navigate and interact with web content effectively.

Join the conversation