1. Open DevTools: In your Shiny app, right-click the "Show entries" dropdown and select "Inspect."
2. Examine the Elements Panel: You'll likely see the non-semantic structure we discussed—a series of <div>s instead of a clean <select>. Notice the lack of accessibility-related attributes.
3. Switch to the Accessibility Tab: This is the crucial part. In Chrome/Edge, it's a tab within the Elements panel. In Firefox, it's the "Accessibility" tab in the main DevTools window.

In the Accessibility Tree, find your dropdown. You'll probably see that it has a generic role like generic or group. It will be missing key information that assistive tech needs:

• Role: It should be combobox or listbox, not something generic.
• Name/Label: It might not have an accessible name, so a screen reader can't say what it's for.
• Properties: It lacks properties like aria-expanded (to indicate if it's open or closed) and might not be focusable.

Now that we've confirmed the diagnosis, it's time to write the prescription.

Step 2: The JavaScript Callback to the Rescue

The DT package provides a powerful escape hatch for situations like this: the ability to run custom JavaScript code after the table has been initialized. We'll use the initComplete callback within the options argument of datatable() to inject a script that fixes our dropdown.

Our script will not replace the HTML. Instead, it will augment the existing <div>-based dropdown with the necessary ARIA (Accessible Rich Internet Applications) attributes and keyboard event listeners to make it behave like a real dropdown.

The JavaScript Code

This script targets the typical structure generated by DT when using Bootstrap styling. It makes the dropdown focusable, adds ARIA roles, and handles keyboard navigation.

// Save this as 'dt-accessibility-fix.js' in your app's 'www' folder
function makeDtLengthAccessible(tableId) {
  const lengthContainer = document.querySelector(`#${tableId}_length`);
  if (!lengthContainer) return;

  // Find the visible dropdown trigger and the hidden select element
  const dropdownTrigger = lengthContainer.querySelector('.dropdown-toggle');
  const nativeSelect = lengthContainer.querySelector('select');
  const dropdownMenu = lengthContainer.querySelector('.dropdown-menu');

  if (!dropdownTrigger || !nativeSelect || !dropdownMenu) return;

  // 1. Make the trigger focusable and add ARIA attributes
  dropdownTrigger.setAttribute('tabindex', '0');
  dropdownTrigger.setAttribute('role', 'combobox');
  dropdownTrigger.setAttribute('aria-haspopup', 'listbox');
  dropdownTrigger.setAttribute('aria-expanded', 'false');
  dropdownTrigger.setAttribute('aria-label', `Show ${nativeSelect.value} entries per page. Press space to change.`);

  // 2. Add roles to the menu and its items
  dropdownMenu.setAttribute('role', 'listbox');
  const menuItems = dropdownMenu.querySelectorAll('a');
  menuItems.forEach(item => {
    item.setAttribute('role', 'option');
  });

  // 3. Handle keyboard events on the trigger
  dropdownTrigger.addEventListener('keydown', (e) => {
    if (e.code === 'Space' || e.code === 'Enter') {
      e.preventDefault();
      // Toggle the dropdown
      dropdownTrigger.click(); 
    }
  });

  // 4. Update ARIA state when dropdown is opened/closed
  // DT's Bootstrap integration uses jQuery events, so we can listen for them.
  $(dropdownTrigger.parentElement).on('show.bs.dropdown', () => {
    dropdownTrigger.setAttribute('aria-expanded', 'true');
  });

  $(dropdownTrigger.parentElement).on('hide.bs.dropdown', () => {
    dropdownTrigger.setAttribute('aria-expanded', 'false');
  });

  // 5. Ensure selection updates the label for screen readers
  // DT already handles changing the select value when a menu item is clicked.
  // We can tap into the table's draw event to update our label.
  $(`#${tableId}`).on('draw.dt', function () {
    const newCount = nativeSelect.value;
    dropdownTrigger.setAttribute('aria-label', `Show ${newCount} entries per page. Press space to change.`);
    // You could also update the visible text if needed, e.g.:
    // dropdownTrigger.querySelector('.something').textContent = newCount;
  });
}

Integrating with Shiny and DT

Now, let's call this script from our R code. First, make sure you've saved the JavaScript file as dt-accessibility-fix.js inside a folder named www in your Shiny app's directory.

Next, in your ui.R or server.R, modify your DT::datatable() call to include the script and the initComplete callback.

library(shiny)
library(DT)

ui <- fluidPage(
  # Include our custom JS file
  tags$head(
    tags$script(src = "dt-accessibility-fix.js")
  ),
  titlePanel("Accessible DT Example"),
  DT::dataTableOutput("myTable")
)

server <- function(input, output, session) {
  output$myTable <- DT::renderDataTable({
    DT::datatable(
      iris,
      # Important: This assumes you're using Bootstrap styling which causes the issue.
      # For this example, we'll explicitly use the Bootstrap 4 theme.
      class = 'table-striped table-bordered',
      options = list(
        # The magic happens here!
        initComplete = JS(
          "function(settings, json) {",
          # 'this.api().table().node().id' gives us the table's ID
          "  makeDtLengthAccessible(this.api().table().node().id);",
          "}"
        ),
        # This is needed to replicate the inaccessible dropdown structure
        dom = 'fltip' 
      ),
      # Use filter = 'top' to see how it coexists
      filter = 'top',
      # Using an extension that ensures Bootstrap JS is loaded
      extensions = 'Buttons'
    )
  })
}

shinyApp(ui, server)

This code tells DataTables to run our makeDtLengthAccessible function as soon as the table is fully loaded, passing it the unique ID of the table so our selectors work correctly.

Step 3: Verify Your Fix Like a Pro

You've implemented the code, but the job isn't done until you've verified the fix. Don't just trust that it works—test it!

Your Accessibility Verification Checklist:

1. Keyboard Navigation:
   • Can you use the Tab key to navigate to the dropdown? It should get a visible focus outline.
   • Can you press Space or Enter to open the dropdown menu?
   • Can you press Escape to close it?
   • Can you use arrow keys to navigate the options? (Note: Our simple script relies on the default click behavior, but full arrow key navigation would be the next level of enhancement).
2. Screen Reader Testing:
   • Fire up a screen reader (NVDA for Windows, VoiceOver for macOS).
   • Navigate to the dropdown. Does it now announce something like: "Show 10 entries per page. Press space to change. Combo box"?
   • When you open it, does it announce that the list is expanded and read the options?
3. Browser DevTools Check:
   • Go back to the Accessibility tab in your DevTools.
   • Inspect the dropdown again. Does it now have the combobox role?
   • Check its properties. Does it have an accessible name (from aria-label)? Does the aria-expanded state change from false to true when you open it?

If you can check off these boxes, congratulations! You've successfully transformed an inaccessible component into one that works for a much wider audience.

Conclusion: Building More Inclusive Dashboards

Accessibility isn't just about compliance checklists; it's about empathy and building better products for everyone. The "Show entries" dropdown in DT is a small component, but fixing it represents a significant step toward creating truly usable and inclusive data applications.

By following these three steps—Diagnose, Fix, and Verify—you've not only solved a specific problem but also learned a repeatable pattern for identifying and resolving other accessibility issues in your Shiny apps. As you build and innovate in 2025, keep accessibility at the forefront of your design process. Your users will thank you for it.