[Django] #35874: The console directive is not accessible for screenreaders.

Django

unread,

Oct 29, 2024, 4:28:14 AM10/29/24

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.
-----------------------------+-----------------------------------------
Reporter: Sarah Boyce | Type: Uncategorized
Status: new | Component: Documentation
Version: dev | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------------+-----------------------------------------
`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">...\></span>
git clone https://github.com/YourGitHubName/django.git
</pre></div>
</section>
</div>
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35874>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

Django

unread,

Oct 29, 2024, 5:00:56 AM10/29/24

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.

-------------------------------+--------------------------------------
Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: Documentation | Version: dev
Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* type: Uncategorized => Bug

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:1>

Django

unread,

Oct 29, 2024, 12:45:45 PM10/29/24

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.
-------------------------------+------------------------------------

Reporter: Sarah Boyce | Owner: (none)
Type: Bug | Status: new
Component: Documentation | Version: dev
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------+------------------------------------

Changes (by Tom Carrick):

* keywords: => accessibility
* stage: Unreviewed => Accepted

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:2>

Django

unread,

Oct 30, 2024, 10:31:15 AM10/30/24

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.

-------------------------------------+-------------------------------------
Reporter: Sarah Boyce | Owner: Johanan
| Oppong Amoateng
Type: Bug | Status: assigned

-------------------------------------+-------------------------------------
Changes (by Johanan Oppong Amoateng):

* owner: (none) => Johanan Oppong Amoateng
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:3>

Django

unread,

Apr 28, 2025, 9:48:43 AM4/28/25

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.

-------------------------------+----------------------------------------
Reporter: Sarah Boyce | Owner: Ahmed Nassar

-------------------------------+----------------------------------------
Changes (by Ahmed Nassar):

* owner: Johanan Oppong Amoateng => Ahmed Nassar

Comment:

Due to the owner's inactivity. I will be happy to work on this ticket.
--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:4>

Django

unread,

May 31, 2026, 2:43:39 AM (9 days ago) May 31

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.
-------------------------------+---------------------------------------

Reporter: Sarah Boyce | Owner: James Beard

Changes (by James Beard):

* owner: Ahmed Nassar => James Beard

Old description:

New description:

`docs._ext.djangodocs.visit_console_html` generates the HTML for the

console directive in docs and has buttons for Linux/MacOS and Windows

Comment:

Will make some improvements. Brief game plan:

1. make the tabs look much more tab like
1. make the generated HTML more screen reader friendly
1. change the hover cursor to provide some visual feedback that tabs are
clickable
1. leave tabs as form inputs to retain css only presentation of the active
block
1. tidy up the layout of the block to match plain python pre-formatted
code (padding on all sides, etc)

R.e. item 4, am going to assume if moving to something more semantic like
`<button>` for the tabs required Javascript (think it might) we'd prefer
not to do that.
--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:5>

Django

unread,

Jun 8, 2026, 3:15:48 PM (22 hours ago) Jun 8

to django-...@googlegroups.com

#35874: The console directive is not accessible for screenreaders.

-------------------------------------+-------------------------------------

Keywords: accessibility, | Triage Stage: Accepted
sphinx, sphinx-theme |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

-------------------------------------+-------------------------------------
Changes (by Mike Edmunds):

* keywords: accessibility => accessibility, sphinx, sphinx-theme

Comment:

If any CSS changes are needed, note that docs.djangoproject.com uses its
own
[https://github.com/django/djangoproject.com/blob/main/djangoproject/scss
/_console-tabs.scss _console-tabs.scss], not the CSS from
django/docs/_theme/djangodocs/static. (In #37138 I'm creating an updated
"djangoproject" Sphinx theme that shares the scss from djangoproject.)
--
Ticket URL: <https://code.djangoproject.com/ticket/35874#comment:6>

Reply all

Reply to author

Forward