#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">...\&gt;</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.

-- 
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/01070192d763b3d0-84f0b01c-333c-46a0-8645-7727ebf3f7f0-000000%40eu-central-1.amazonses.com.

Reply via email to