Accessibilità - menù a tendina

Buongiorno a tutti!

Ho un menù a tendina contenente dati provenienti da un db...

$result = mysql_query("SELECT * FROM categoria");
while ($row = mysql_fetch_assoc($result)) { 
echo '<option value = ', $row['id_cat'], '>', $row['nome_cat'], '</option>';

la mia domanda è la seguente. un menù a tendina rispetta i requisiti di accessibilità? è possibile fare in modo che risulti accessibile?

Grazie mille

inviato 8 anni fa
sonny
X 0 X

Quello non è un menu a tendina ma una select box.

Si, gli elementi dei moduli sono accessibili, purché provvisti del markup di contorno adatto.

Usualmente ogni campo andrebbe accompagnato da un tag label affinché anche gli utenti non vedenti, attraverso la lettura della pagina da parte di uno screen reader, possano capire se quello è un testo "qualunque" o l'etichetta di un determinato campo.

<label for="mioMenu">Scegli una categoria</label>
<p>
    <select name="mioMenu" id="mioMenu">
         <?php while(list($id, $nome) = mysql_fetch_assoc($result)): ?>
         <option value="<?php echo $id ?>"><?php echo $nome ?></option>
         <?php endwhile ?>
    </select>
</p>

Eih, in xHTML gli attributi vanno sempre racchiusi tra virgolette.

risposto 8 anni fa
Andrea Turso
Andrea Turso
86
modificato 8 anni fa
X 0 X

quindi in teoria dovrei scrivere una cosa del genere?

<label for="mioMenu">Scegli una categoria</label>
<p>
    <select name="mioMenu" id="mioMenu">

$result = mysql_query("SELECT * FROM categoria");
while ($row = mysql_fetch_assoc($result)) { 
echo '<option value = ', $row['id_cat'], '>', $row['nome_cat'], '</option>';

    </select>
</p>

il problema che mi da il W3C è il seguente:

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

                <option value = 1>categoria1</option>

risposto 8 anni fa
sonny
X 0 X

Eppure trash ti aveva risposto, devi mettere le virgolette davanti ai valori, <option value="1">Valore 1</option> (non importa se singole o doppie ma devono esserci).

Per l'accessibilità è un discorso molto complesso, darlo in pillole non risolve ma insomma aiuta.

La <label> è importante ma più importante a mio parere è il tabindex dato che i non vedenti solitamente navigano la pagina con il tasto TAB della tastiera (è noto che gli accesskey non li usano quasi affatto e comunque <select> non li ha), quindi il tuo codice xhtml risultante dovrebbe essere:

<p>
<label for="mioMenu">Scegli una categoria</label>
    <select tabindex="<?= $index ?>" name="mioMenu" id="mioMenu">
         <?php while(list($id, $nome) = mysql_fetch_assoc($result)): ?>
         <option value="<?php echo $id ?>"><?php echo $nome ?></option>
         <?php endwhile ?>
    </select>
</p>

ovviamente gli indici del tasto TAB (tabindex) vanno in sequenza partendo da 0 che è il primo, e siccome sono attribuiti a qualsiasi elemento "cliccabile" (link, select, campi testo, bottoni, eccetera) in una pagina dinamica è un casino attribuirli, io ci ho messo una variabile $index magari presa da un loop, ma quale sia il valore $index di partenza dipende da quanti elementi "cliccabili" ci siano prima su tutta la pagina.

Tieni comunque presente che l'ometterli non inficia la possibilità di navigare la pagina con il tasto TAB, solo che i tabindex ti permettono di definire quale elemento deve essere visitato per prima, è importante in un form far sì che l'utente segua un percorso, che so, prima inserisce il nome, poi il cognome, poi va sulla select e infine preme il tasto invio.

Trash: Gli attributi con le virgolette ( " ), non con gli apici ( ' ) ;D

risposto 8 anni fa
Marco Grazia
modificato 8 anni fa
Andrea Turso
Andrea Turso
86
X 0 X

aggiungo, per quanto riguarda il w3c, che i tag xhtml che non hanno tag di chiusura, devon esser chiusi da se stessi. esempio: <br> diventa <br />; <img> diventa <img />, etc.

lo spazio che c'è prima della / serve solo per eventuali compatibilità fra i milioni di browser <.<

vorrei chiederti come inizi la pagina xhtml, perchè c'è una chicca del marzo 2003 (se non erro) che dà problemi di resa con IE con il css (io ne ho pianto pesantemente le conseguenze riscrivendo il css daccapo)...

ricapitolando il discorso accessibilità, indi, la label serve a descrivere sommariamente l'elemento, mentre il tabindex invece ne detta il "percorso" da fare fra i vari elementi della form. corretto?

sempre sul discorso accessibilità, ma i file audio che accompagnano la navigazione, come vengon realizzati? giust'una curiosità <.<

grazie

risposto 8 anni fa
larchitetto
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda