#35874: The console directive is not accessible for screenreaders.
-------------------------------+---------------------------------------
Reporter: Sarah Boyce | Owner: James Beard
Type: Bug | Status: assigned
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 James Beard):
* owner: Ahmed Nassar => James Beard
Old 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
> `/`).
> 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>
> }}}
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
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
`/`).
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>
}}}
--
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 <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/0107019e7cc6091a-78d2dd98-d12f-4924-b0ed-786028df6090-000000%40eu-central-1.amazonses.com.
