Aria Examples

gistfile1.txt

// Role Attributes
role="region"       // Defines a distinct section of the page that users might want to navigate to
role="list"         // Tells screen readers this is a list container
role="listitem"     // Tells screen readers this is an item within a list
role="group"        // Groups related form elements together
role="status"       // Announces changes to screen readers without interrupting
role="img"          // Indicates that an element represents an image

// Labelling and Description Attributes
aria-label="Add book form"           // Provides a name for the element when visible text isn't present
aria-labelledby="form-title"         // References another element's ID that labels this element
aria-describedby="rating-description" // References text that describes the element in more detail

// Form-specific Attributes
aria-required="true"     // Indicates that user input is required
aria-invalid={true}      // Indicates that the input's value is invalid
aria-valuemin={1}        // Specifies the minimum allowed value
aria-valuemax={5}        // Specifies the maximum allowed value
aria-valuenow={rating}   // Specifies the current value

// Visual and State Attributes
aria-hidden="true"       // Hides decorative elements from screen readers
aria-expanded="false"    // Indicates if a collapsible section is expanded


// 1. Form Input Example
<div className="flex flex-col">
  {/* The label and input are associated using htmlFor/id */}
  <label 
    htmlFor="title"
    className="block text-sm font-medium mb-1"
  >
    Book Title
    {/* Screen readers will announce "required" */}
    <span aria-label="required" className="text-red-500">*</span>
  </label>
  <input
    id="title"
    type="text"
    required
    value={formData.title}
    onChange={handleChange}
    // These ARIA attributes provide additional information to screen readers
    aria-required="true"
    aria-invalid={formData.title.length === 0}
    aria-describedby="title-error"
    className="p-2 border rounded"
  />
  {/* Error message referenced by aria-describedby */}
  {formData.title.length === 0 && (
    <span 
      id="title-error" 
      className="text-red-500"
      role="alert"
    >
      Title is required
    </span>
  )}
</div>

// 2. Rating Display Example
<div 
  className="flex items-center"
  // Provides clear description of the rating
  aria-label={`Rating: ${book.rating} out of 5 stars`}
>
  <span className="sr-only">
    Book rating: {book.rating} stars
  </span>
  <div 
    className="flex"
    role="img"
    aria-hidden="true" // Hides visual stars from screen readers
  >
    {/* Star display code */}
  </div>
</div>

// 3. Book List Example
<div
  // Defines this as a list container for screen readers
  role="list"
  aria-label="Book collection"
  className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
  {books.map(book => (
    <div
      key={book._id}
      // Defines this as a list item for screen readers
      role="listitem"
      className="border rounded-lg p-4"
    >
      {/* Book content */}
    </div>
  ))}
  
  {/* Status message for empty state */}
  {books.length === 0 && (
    <div 
      role="status"
      aria-live="polite"
      className="text-center"
    >
      No books found
    </div>
  )}
</div>

// 4. Filter Section Example
<div role="region" aria-labelledby="filter-heading">
  <h2 id="filter-heading" className="sr-only">
    Filter Options
  </h2>
  <select
    aria-label="Filter books by rating"
    onChange={handleFilterChange}
  >
    <option value="">All Ratings</option>
    {/* Options */}
  </select>
</div>