Accessibility for code

[Oscar Levin]

While trying to resolve the remaining accessibility errors in my book, I ran across a few that PreTeXt and Runestone should be handling but aren't.

1. In active code (and other code-highlighted contexts), the css appears to be using css from "codemirror-dark.less" (line 8) even when not in dark mode.  As such, the blue color for keywords does not have a strong enough contrast to pass tests. See for example https://discrete.openmathbooks.org/dmoi4/sec_seq_intro.html#subsec-seq-python
2. Again in active code, and probably elsewhere, we set a language attribute in a div as `lang="python"`.  WAVE complains that the language is invalid.  It appears that changing the attribute to `language="python"` works here.  But of course this needs to be set up to work with Runestone correctly.
3. The slider in active code contains an empty link: `<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>` which causes an error.  Why should this be a link?
4. The textarea element of the active code is being flagged for missing a form label.  This can probably be fixed with some aria-label element?  The html it issue is: <textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em;" tabindex="0"></textarea>
5. Lest you think I'm just picking on active code, I get the same missing label error for sage cells.  

Here is the reference from WAVE for the missing label issue: 

How to Fix It

If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

The Algorithm... in English

An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label. A properly associated label is:

• a non-hidden <label> element with a for attribute value that is equal to the id of a unique form control
• a <label> element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
• a non-empty title attribute, or
• a non-empty aria-labelledby attribute

[Brad Miller]

Thanks Oscar,

 

If you could make Issues on rs repo and add the accessibility tag that would be helpful.

 

2. We have used the @lang attribute for ages.  Changing to @language is doable but a bit scary given how long it has been like that.

 

3. The div and the a are required by the jQuery widget that creates the slider.  I'm not sure what the right solution is.  Turn it off for aria?  re-implement the slider with something else.

 

4. this one sounds the easiest to fix.

 

I would welcome any help (read PRs) from people who are willing to help with accessibility changes.  Its relatively easy to get started on this stuff as you don't need to run all the servers.  Just follow our instructions starting here (https://runestone-monorepo.readthedocs.io/en/latest/javascript_feature.html)

 

Brad

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy LTD
Blog: A Reputable Journal
Schedule a Meeting

I am sending this email at a time that suits my work schedule.
Please do not feel obliged to reply outside of your working hours.

--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/023aad46-f704-41c1-b658-15a90fcb7eeen%40googlegroups.com.
 

[Oscar Levin]

Issue created, although I don't have permissions to add labels.

Note that for 4, a `aria-label="activecode-textarea"` should be sufficient, but the textarea is generated by javascript, not pretext (the html has a different textarea, and even editing that to include the aria-label has no effect).

[Rob Beezer]

Prepared to merge any changes to the PreTeXt XSL where needed, especially if it
needs coorintation with Runestone.

And remember we have the pretext-a11y list if you need more advice about best
practices.

Rob

On 2/26/25 14:03, Oscar Levin wrote:
> While trying to resolve the remaining accessibility errors in my book, I ran
> across a few that PreTeXt and Runestone should be handling but aren't.
>

> 1. In active code (and other code-highlighted contexts), the css appears to be

> using css from "codemirror-dark.less" (line 8) even when not in dark mode.
> As such, the blue color for keywords does not have a strong enough contrast
> to pass tests. See for example https://discrete.openmathbooks.org/dmoi4/
> sec_seq_intro.html#subsec-seq-python

> 2. Again in active code, and probably elsewhere, we set a language attribute in

> a div as `lang="python"`.  WAVE complains that the language is invalid.  It
> appears that changing the attribute to `language="python"` works here.  But
> of course this needs to be set up to work with Runestone correctly.

> 3. The slider in active code contains an empty link: `<a class="ui-slider-

> handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>`
> which causes an error.  Why should this be a link?

> 4. The textarea element of the active code is being flagged for missing a form

> label.  This can probably be fixed with some aria-label element?  The html
> it issue is:
> <textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em;" tabindex="0"></textarea>

> 5. Lest you think I'm just picking on active code, I get the same missing label

> error for sage cells.
>
> Here is the reference from WAVE for the missing label issue:
> How to Fix It
> If a text label for a form control is visible, use the <label> element to
> associate it with its respective form control. If there is no visible label,
> either provide an associated label, add a descriptive title attribute to the
> form control, or reference the label(s) using aria-labelledby. Labels are not
> required for image, submit, reset, button, or hidden form controls.
> The Algorithm... in English
> An <input> (except types of image, submit, reset, button, or hidden), <select>,
> or <textarea> does not have a properly associated label. A properly associated
> label is:
>

> * a non-hidden <label> element with a for attribute value that is equal to the

> id of a unique form control

> * a <label> element that surrounds the form control, does not surround any

> other form controls, and does not reference another element with its for
> attribute

> * a non-empty title attribute, or
> * a non-empty aria-labelledby attribute

>
>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email

> to pretext-dev...@googlegroups.com <mailto:pretext-
> dev+uns...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-

> dev/023aad46-f704-41c1-b658-15a90fcb7eeen%40googlegroups.com <https://
> groups.google.com/d/msgid/pretext-dev/023aad46-f704-41c1-
> b658-15a90fcb7eeen%40googlegroups.com?utm_medium=email&utm_source=footer>.