id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
35874	The console directive is not accessible for screenreaders.	Sarah Boyce	Ahmed Nassar	"`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>
}}}

"	Bug	assigned	Documentation	dev	Normal		accessibility	accessibility	Accepted	0	0	0	0	0	0