Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve accessibility for question display #450

Open
mchurchward opened this issue Dec 23, 2022 · 3 comments
Open

Improve accessibility for question display #450

mchurchward opened this issue Dec 23, 2022 · 3 comments

Comments

@mchurchward
Copy link
Contributor

Created the https://github.com/PoetOS/moodle-mod_questionnaire/tree/accessibilityimprovements branch to work on this.

@mchurchward
Copy link
Contributor Author

mchurchward commented Dec 23, 2022

Checkbox should use a structure like:
<fieldset class="c-group">
<legend>What's your favorite meal?</legend>

<div class="c-group__item">
    <input id="m1" type="checkbox">
	<label for="m1">Meal 1</label>
</div>

<div class="c-group__item">
    <input id="m2" type="checkbox">
	<label for="m2">Meal 2</label>
</div>

<div class="c-group__item">
	<input id="m3" type="checkbox">
	<label for="m3">Meal 3</label>
</div>

</fieldset>

@mchurchward
Copy link
Contributor Author

Checkbox question is currently rendered as:

<fieldset id="qn-1054" class="qn-container">
    
    <legend class="accesshide">Question #1</legend>
    <div class="qn-legend">
        <div class="qn-info">
            <h2 class="qn-number">1</h2>
        </div>
        
    </div>
    <div class="qn-content">
        <div class="qn-question ">
            <label for="q1054">
            <div class="no-overflow"><p>Check all that apply</p></div>
            </label>
        </div>
        <div class="qn-answer">
            <!-- Begin HTML generated from question_check template. -->
<input id="checkbox_1170" value="1170" name="q1054[1170]" type="checkbox">
<label for="checkbox_1170">Mom</label>

<br>
<input id="checkbox_1171" value="1171" name="q1054[1171]" type="checkbox">
<label for="checkbox_1171">Dad</label>

<br>
<input id="checkbox_1172" value="1172" name="q1054[1172]" type="checkbox">
<label for="checkbox_1172">Son</label>

<br>
<input id="checkbox_1173" value="1173" name="q1054[1173]" type="checkbox">
<label for="checkbox_1173">Daughter</label>

<br>
<input id="checkbox_1191" value="1191" name="q1054[1191]" type="checkbox">
<label for="checkbox_1191">Other kinship</label>
<input size="25" name="q1054[o1191]" onclick="other_check(name)" value="" type="text">
<br>
<!-- End HTML generated from question_check template. -->
        </div>
    </div>
</fieldset>

@mchurchward
Copy link
Contributor Author

Ick. I think each question type needs to define its own container so that fieldsets and legends are only used where they should be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant