Opened 4 months ago

Last modified 4 months ago

#35874 assigned Bug

The console directive is not accessible for screenreaders.

Reported by: Sarah Boyce Owned by: Johanan Oppong Amoateng
Component: Documentation Version: dev
Severity: Normal Keywords: accessibility
Cc: accessibility Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no
Pull Requests:How to create a pull request

Description

docs._ext.djangodocs.visit_console_html generates the HTML for the console directive in docs and has buttons for Linux/MasOS and Windows

This is not very screen reader friendly.
The main issues are that the labels are not read out properly (it should read out the current title but is reading the content of &#xf17c/&#xf179).
That these are clickable and what happens when you click them are also not clear.

I think it might be better to turn this into tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

Some examples in docs: https://docs.djangoproject.com/en/5.1/intro/contributing/#getting-a-copy-of-django-s-development-version
Example html:

<div class="console-block" id="console-block-0">
<input class="c-tab-unix" id="c-tab-0-unix" type="radio" name="console-0" checked="">
<label for="c-tab-0-unix" title="Linux/macOS">/</label>
<input class="c-tab-win" id="c-tab-0-win" type="radio" name="console-0">
<label for="c-tab-0-win" title="Windows"></label>
<section class="c-content-unix" id="c-content-0-unix" style="display: block;">
<div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="gp">$ </span>git<span class="w"> </span>clone<span class="w"> </span>https://github.com/YourGitHubName/django.git
</pre></div>
</div>
</section>
<section class="c-content-win" id="c-content-0-win" style="display: none;">
<div class="highlight"><pre><span></span><span class="gp">...\&gt;</span> git clone https://github.com/YourGitHubName/django.git
</pre></div>
</section>
</div>

According to the ticket's flags, the next step(s) to move this issue forward are:

  • To provide a patch by sending a pull request. Claim the ticket when you start working so that someone else doesn't duplicate effort. Before sending a pull request, review your work against the patch review checklist. Check the "Has patch" flag on the ticket after sending a pull request and include a link to the pull request in the ticket comment when making that update. The usual format is: [https://github.com/django/django/pull/#### PR].

Change History (3)

comment:1 by Sarah Boyce, 4 months ago

Type: UncategorizedBug

comment:2 by Tom Carrick, 4 months ago

Keywords: accessibility added
Triage Stage: UnreviewedAccepted

comment:3 by Johanan Oppong Amoateng, 4 months ago

Owner: set to Johanan Oppong Amoateng
Status: newassigned
Note: See TracTickets for help on using tickets.
Back to Top