Improving Accessibility in Django Admin Tooltips

Based on the Django documentation, the admin interface is intended to be compatible with a wide range of assistive technologies, including Dragon, JAWS, NVDA, Orca, TalkBack, Voice Control, VoiceOver, Windows Contrast Themes, ZoomText, and screen magnifiers. However, there are currently many accessibility blockers, as noted in the documentation.

Current Customization Options

The Django admin interface can be customized in several ways:

1. You can attach JavaScript modules to admin forms using the model's Admin js parameter
2. You can write custom views for the admin that hook into Django's authentication system
3. You can customize templates by overriding the default admin templates

Addressing the Tooltip Accessibility Issue

Your proposal to improve the accessibility of tooltips in the Django admin is well-aligned with Django's goal of supporting assistive technologies. The current use of HTML title attributes for tooltips is problematic for users of keyboards, voice recognition, and touch screens.

Recommended Approach

Of the solutions you've proposed, developing a new accessible tooltip component seems most appropriate because:

1. It maintains the familiar UI pattern while addressing accessibility issues
2. It aligns with Django's goal of supporting various assistive technologies
3. It can be implemented through Django's template customization system

Implementation Strategy

To implement an accessible tooltip component, you could:

1. Create custom templates that override the default admin templates
2. Add JavaScript functionality that enhances the tooltips to be keyboard accessible, touch-friendly, and compatible with screen readers
3. Use ARIA attributes to ensure proper accessibility semantics

For example, you might create a custom template that replaces the standard title attribute with a more robust solution:

HTMLCopied
{% block branding %}
<!-- Custom accessible tooltip implementation -->
<div class="tooltip-container">
  <button aria-describedby="tooltip-1" class="tooltip-trigger">Help</button>
  <div id="tooltip-1" role="tooltip" class="tooltip-content" hidden>
    This is the list of available groups. You may choose some by selecting them in the box below and then clicking the "Choose" arrow between the two boxes.
  </div>
</div>
{% endblock %}

With accompanying JavaScript to handle the showing/hiding of tooltips based on various user interactions (keyboard, mouse, touch).

This approach would require customizing the Django admin templates and adding custom JavaScript, but it would significantly improve accessibility for all users.