How can I improve keyboard navigation and screen‑reader support in a DRF browsable API form workflow?

To improve keyboard navigation and screen-reader support in the Django REST Framework (DRF) browsable API without replacing the entire layout, you must override the specific template fragments responsible for rendering form fields. DRF does not provide a dedicated "Accessibility Mixin," so the extension point is the Django template system.

Implementing Accessibility Enhancements

The most effective way to inject labels and ARIA attributes while maintaining the default look and feel is to override rest_framework/templates/api/form.html. By creating a local version of this template, you can wrap inputs in semantic labels and link validation errors to fields.

1. Associating Labels and ARIA Attributes

Modify your overridden form.html to ensure every input has a corresponding <label>. Use the for attribute to link the label to the input's id. To handle validation messages, use aria-describedby to programmatically link the error text to the input field.

<!-- Example conceptual override for a form field -->
<div class="form-field">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {{ field }}
    {% if field.errors %}
        <div id="{{ field.id_for_label }}-error" aria-live="polite">
            {{ field.errors }}
        </div>
    {% endif %}
</div>

2. Fixing Keyboard Focus and Tab Order

Focus traps in the browsable API often occur due to nested div elements with tabindex attributes or non-semantic layouts. To resolve this:

• Remove redundant tab-stops: Ensure only interactive elements (inputs, buttons, links) are reachable via Tab.
• Visual Indicators: Add a high-contrast focus ring in your custom CSS to help keyboard users track their position.
• Landmarks: Wrap the form section in a <section> or <main> tag to allow screen-reader users to jump directly to the form.

Verification and Testing

Because accessibility is behavioral, automated tools should be paired with manual verification:

1. Automated Audit: Use axe-core or the Lighthouse accessibility audit to identify missing labels or insufficient color contrast.
2. Keyboard Walkthrough: Navigate the entire create/update flow using only Tab, Shift+Tab, and Enter. Verify that focus never disappears or becomes trapped in a loop.
3. Screen Reader Validation: Use NVDA (Windows) or VoiceOver (macOS) to confirm that the aria-live regions announce validation errors immediately upon form submission.

Assumptions and Constraints

This approach assumes you are using the default DRF template engine. Note that overriding templates creates a maintenance dependency; if a future DRF update changes the internal structure of form.html, your overrides may need manual synchronization to avoid breaking the UI.

Diagnostic Detail Needed: Are you using a custom REST_FRAMEWORK template directory in your settings.py, or are you relying on the default package-provided templates?