Instructor students page: accessibility issue for course summary headers

[weiquu]

Currently, the summary headers for the course in the instructor students page (To instructor pages -> Students tab) are being read separately by the screen reader. For example, the below headers would be read as "9" then "students", "2" then "sections", and "3" then "teams" by the screen reader:

This behaviour is confusing for those using screen readers. The expected behaviour should be for the screen reader to read the summary text together (e.g. "9 students", "2 sections", and "3 teams").

[athakaras]

Hello! I am a first time contributor and I would love to take on this issue. Can I please work on that?

[domlimm]

@athakaras Hello! Feel free to submit a PR for this issue 👍🏻

[athakaras]

do you know which file this issue is reffering to? because i'm having difficulty in finding it..

[rhyses-pieces]

@athakaras Hello! I took a look around the codebase and I was able to find the issue in the instructor-student-list-page component, located in src/web/app/pages-instructor/instructor-student-list-page.

The problem is that the number is in a separate heading tag than the rest of the text, like so:

<h3 class="card-title inline">{{courseTab.stats.numOfStudents}}</h3>
<h4 class="card-text inline"> students</h4>

This is probably the reason why the screen reader is reading the number separately from "students", "sections", and "teams".

[zhaojj2209]

@rhyses-pieces Thank you for looking into this issue. Yes, the different headings were used so as to increase the font size of the text level. However, headings should never be used for styling purposes, and this should be changed. In fact, I would argue that headings should not be used at all here as these cards are not headings semantically.

In my opinion, the difference in font size is minimal enough that we can do without it altogether, so the simple fix here would be to just combine the text into one tag.

[rk22277]

@domlimm Hello ! I am interested to work on this...

[EuniceSim142]

Hello @rk22277, thanks for your interest! However since @athakaras has already shown interest in working it, I would suggest you look for another issue to contribute to.

[rk22277]

@EuniceSim142, thank you