2014-07-21 29 views
6

Assumendo una tabella HTML statico, come ad esempio:Utilizzando aria-ordinamento in convalidato HTML5

<table> 
    <thead> 
     <tr> 
      <th scope="col" aria-sort="none"><a href="...">Name&#xA0;<span title="Sort">&#9650;</span></a></th> 
      <th scope="col" aria-sort="ascending"><a href="...">Score&#xA0;<span title="Ascending">&#9650;</span></a></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>C</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td>A</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

Sarebbe l'uso di aria-sort essere appropriato (per quando UA di che lo supportano)?

http://www.w3.org/TR/wai-aria/states_and_properties#aria-sort

ritengo questo potrebbe essere utile, ma il validatore W3C attualmente richiede una role="columnheader" sul <th scope="col">, che è di tipo ridondante, poiché implica già un th[scope="col"]:

http://www.w3.org/TR/wai-aria/roles#columnheader

E quando inizi a specificarlo, devi anche impostare un ruolo per tutto fino allo <table role="grid"> ... che va bene se non usi i tag appropriati.

+0

01 direi questo è un uso appropriato di 'aria-sort', e 2 sono d'accordo con la tua affermazione e dire che questo sarebbe un bug nel validatore –

+1

Sembra che questo potrebbe essere già un problema noto: http://lists.w3.org/Archives/Public/www-validator-cvs/2014May/0000.html –

risposta

11

Il validatore è corretto. Questo può sembrare strano, ma il problema è nelle specifiche, non nel validatore.

Come commenti @CraigFrancis, questo problema è stato sollevato nella mailing list del validatore, dove un messaggio fa riferimento a un bug report. Il bug è stato closed per il fatto che il comportamento del validatore è corretto, come da specifiche. Ciò significa che se si utilizza aria-sort, è necessario impostare in modo esplicito role su columnheader o rowheader, anche se si dispone dell'attributo scope.

Come la questione degli Stati, ciò significa che ulteriori role attributi sono poi necessari più in alto nell'albero del documento, in modo che sia minimamente finisce con il seguente:

<!doctype html> 
<title>aria-sort issue</title> 
<table role="grid"> 
    <thead> 
     <tr role="row"> 
      <th scope="col" role="columnheader" aria-sort="none"><a href="...">Name&#xA0;<span title="Sort">&#9650;</span></a></th> 
      <th scope="col" role="columnheader" aria-sort="ascending"><a href="...">Score&#xA0;<span title="Ascending">&#9650;</span></a></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>C</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td>A</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

Questo sembra piuttosto ridondante, tanto più che la definizione di role=columnheader dice che è "l'equivalente strutturale di un elemento HTML th con un ambito di colonna". Tuttavia, HTML5 LC definitions related to WAI-ARIA non specifica alcuna semantica ARIA implicita per th (o tr o table). Ciò potrebbe riflettere l'uso di tabelle per il layout, che è stato diffuso, così che non è realistico assumere in generale che un elemento table rappresenti una griglia (matrice, matrice) nel senso strutturale (o "semantico"). Pertanto, quando la "tabularity" di un elemento table è rilevante per ARIA, deve essere espressamente espressa con gli attributi role a diversi livelli di nidificazione.

Si noti che l'attributo aria-sort è puramente informativo, dichiarativo. Lo descrive che gli elementi di una tabella (griglia) sono in ordine crescente o decrescente (o altro). Non chiede al browser di ordinarli o di creare strumenti di interfaccia utente per l'ordinamento. In pratica, è pensato per essere utilizzato quando l'autore si è occupato di ordinare la tabella, nella pagina generationg lato server o con JavaScript sul lato client. I programmi utente possono utilizzare queste informazioni in vari modi, ad es. annunciando l'utente sull'ordine.

La specifica ARIA aggiunge che "Per ogni tabella o griglia, gli autori DEVONO applicare aria-sort a una sola intestazione alla volta". L'esempio di codice viola questa raccomandazione. (Tuttavia, il validatore non emette alcun messaggio di errore, questo è DOVREBBE, non un MAIUSCOLO.) In questo caso, è necessario rimuovere aria-sort="none".L'attributo aria-sort, quando impostato su un'intestazione di colonna, specifica che le righe della tabella sono ordinate in base a tale colonna, quindi per ovvi motivi dovrebbe essere impostato su una sola colonna.

+2

Grazie Jukka, questa è un'informazione molto utile ... quindi avremo bisogno di infastidire il gruppo di lavoro HTML, come credo un

dovrebbe contenere dati tabulari per impostazione predefinita (ereditando il ruolo di "griglia" per impostazione predefinita) e qualsiasi sito Web che utilizza le tabelle per il layout deve utilizzare effettivamente role = "presentation" come override (ben sapendo che è un pio desiderio). –