ACCESIBILIDADWEBADOLFOSANZDEDIEGO

SEPTIEMBRE2014

1ELAUTOR

1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación

FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails

1.2ALGUNOSPROYECTOSFundadory/ocreador:HackathonLovers:TweetsSentiment:MarkdownSlides:

Co-fundadory/oco-creador:PeliTweets:PasswordManagerGenerator:

http://hackathonlovers.comhttp://tweetssentiment.com

https://github.com/asanzdiego/markdownslides

http://pelitweets.com

http://pasmangen.github.io

1.3¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:

http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego

http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego

http://plus.google.com/+AdolfoSanzDeDiego

2INTRODUCCIÓN

2.1OBJETIVOSLaaccesibilidadwebnosecentrasóloenlaspersonascondiscapacidad,enrealidadtienecomoobjetivolograrquelaspáginaswebseanutilizablesporelmáximonúmerodepersonas,independientementedesusconocimientosocapacidadespersonaleseindependientementedelascaracterísticastécnicasdelequipoutilizadoparaaccederalaWeb.

2.2OPORTUNIDADESOfreceoportunidadessinprecedentesparalosdiscapacitados:Losciegospuedenleerperiódicosgraciasaloslectoresdepantallas.Lossordospuedenvervídeossubtitulados.Laspersonascondiscapacidadmotorapuedenutilizarprogramasde"eye-tracking"

2.3DIFICULTADESApesardeello,todavíaquedancosasporhacer:Haysitioswebquesólosepuedenusarconelratón.Muchosvídeosnoestánsubtituladosparasordos.Hayinterfacesendondenohaysubstitutoalainteracciónconimágenes.

2.4DESTINATARIOSLamayoríadelosestudiosestimanqueun20%delapoblacióntienealgúntipodediscapacidad,notodastienendiscapacidadesquedificultansuaccesoaInternet,perosiguesiendounaparteimportantedelapoblación.Cadadiscapacidadrequieredeciertostiposdeadaptaciones,quelamayoríadelasveces,beneficiaránacasitodos,nosóloalaspersonascondiscapacidad.

2.5DESARROLLADORESLamayoríadeloserroresdeaccesibilidadwebsonporfaltadeconocimientosdeldesarrollador.

2.6LENGUAJECORRECTOPersonacondiscapacidadPersonacondiscapacidadmotrizPersonacondiscapacidadauditivaPersonacondiscapacidadvisualPersonacondiscapacidadintelectualPersonacondiscapacidadpsicosocial

2.7LENGUAJEINCORRECTODiscapacitado,inválido,disminuidoMinusválido,incapaz,impedidoSordomudo,sordito(todoslosdiminutivos)Invidente,cieguito(todoslosdiminutivos)Retrasadomental,mongol,tontootarado,deficienteLoco,loquito,demente

2.8W3CElW3Cesungrupointernacionaleindependientequedefinelosprotocolosyestándaresparalaweb,comoHTML,CSS,etc.

2.9WAIUnadelasprincipalesiniciativasdelW3CeslaWAI(WebAccessibilityInitiative)queseencargadeldesarrollodenormasdeaccesibilidad.

2.10WCAGLasWCAG(WebContentAccessibilityGuidelines)oPautasdeAccesibilidadalContenidoenlaWebsonlasprincipalesnormasdeaccesibilidadweb.

2.11WCAG1.0Finalizadasen1999,fueronunavanceimportante.Proporcionaban14directricesynumerosospuntosdecontrol.Proporcionabantresprioridades:NivelArequisitosbásico,NivelAAmejoraccesibilidadylaeliminacióndeimportantesbarreras,NivelAAAproporcionabamejorasalaaccesibilidad.

2.12WCAG2.0SefundamentanenWCAG1.0,perointroducenalgunoscambiossignificativos.Laspautasestáncentradasenprincipiosmásqueentécnicas,paraquesigansiendorelevantesinclusocuandolatecnologíacambie.Sitúaúnicamente4principiosenelnivelsuperior,las4directricesPOUR(Servir).

3DIRECTRICESPOUR

3.1PERCEPTIBLE(I)Disponibleparalossentidos(visiónyaudiciónprincipalmente),bienatravésdelnavegadoropormediodeayudastécnicas(porejemplo,lectoresdepantalla,ampliadoresdepantalla,etc.)

3.2PERCEPTIBLE(II)Directriz1.1:Textoalternativo:Proporcionatextoalternativoparaelcontenidoquenoseatextual,asípodrásertransformadoenotrosformatosquelagentenecesite,comocaracteresgrandes,lenguajebraille(brailenoescorrecto),lenguajeoral,símbolosolenguajemássimple.Directriz1.2:Contenidomultimediadependientedeltiempo:Proporcionealternativassincronizadasparacontenidosmultimediasincronizadosdependientesdeltiempo.

3.3PERCEPTIBLE(III)Directriz1.3:Adaptable:Crearcontenidoquepuedaserpresentadodediferentesformassinperderniinformaciónniestructura.Directriz1.4:Distinguible:Facilitaralosusuariosveryescucharelcontenidoincluyendoladistinciónentrelomásymenosimportante.

3.4OPERABLE(I)Losusuariospuedeninteractuarcontodosloscontrolesyelementosinteractivosusandoelratón,untecladooundispositivodeayuda.

3.5OPERABLE(II)Directriz2.1:Tecladoaccesible:Podercontrolartodaslasfuncionesdesdeelteclado.Directriz2.2:Tiemposuficiente:Proporcionatiemposuficientealosusuariosparaleeryutilizarelcontenido.

3.6OPERABLE(III)Directriz2.3:Ataquesepilépticos:Nodiseñarcontenidoquepuedacausarataquesepilépticos.Directriz2.4:Navegación:Proporcionaformasparaayudaralosusuariosanavegar,abuscarcontenidoyadeterminardondeestánestos.

3.7COMPRENSIBLE(I)Elcontenidoesclaroyselimitalaconfusiónylaambigüedad.

3.8COMPRENSIBLE(II)Directriz3.1:Legible:Hacercontenidodetextolegibleycomprensible.Directriz3.2:Previsible:Hacerlaaparienciaylaformadeutilizarlaspáginaswebprevisibles.Directriz3.3:Asistenciaalaentradadedatos:Ofrecerayudaalosusuariosparaevitarycorregirerrores.

3.9ROBUSTO(I)Unaampliagamadedispositivosytecnologíaspuedeaccederalcontenido.

3.10ROBUSTO(II)Directriz4.1:Compatible:Maximizalacompatibilidadconlosagentesdeusuarioactualesyfuturos,incluyendotecnologíasdeasistencia.

4MITOS

4.1LASPÁGINASWEBACCESIBLESSONFEASFALSO.Dehecholamayoríadelosprincipiosdeaccesibilidadwebnoafectanalacabadofinal(lookandfeel)deunsitioweb.

4.2LASPERSONASCONDISCAPACIDADNOUTILIZANLAWEB

FALSO.Másbientodolocontrario,yaquelasnuevastecnologíaseInternethapermitidoaungrannúmerodepersonascondiscapacidadllevarunavidaautónomaeindependiente.

4.3LASPÁGINASWEBCONSÓLOTEXTOSONACCESIBLES

FALSO.Laspáginaswebquesólocontienentextopuedenserdifícilesdeentenderporpersonascondiscapacidadcognitivaocondificultadesconellenguajecomolaspersonassordomudas.

4.4LAACCESIBILIDADESCARAYCOSTOSAFALSO.Evidentemente,elprocesodeaprendizajeylaposterioradaptaciónalossitioswebyaexistentessuponenuncoste,peroigualqueaprenderunanuevatecnología(porejemplo,AJAX)yadaptarlossitioswebalanuevatecnología.

4.5LAACCESIBILIDADESSÓLOPARACIEGOSFALSO.Existenusuarioscondiferentestiposdediscapacidadquepuedenexperimentardistintosproblemasdeaccesoyusodelcontenidodelaspáginasweb.

4.6LAACCESIBILIDADESSÓLOPARALASPERSONASCONDISCAPACIDAD

FALSO.Aunquelaspersonascondiscapacidadpuedenserlosusuariosquemássebeneficienalaplicarlaaccesibilidadweb,enrealidadsebeneficiatodoelmundo,yaquetambiénayudaacualquierusuarioqueseencuentreencircunstanciasespecialescomopuedeserentornosconbajailuminación,ambientesruidosos,accesoaInternetconconexionesyequiposconcapacidadeslimitadas,etc.

5BENEFICIOS

5.1MEJORAELPOSICIONAMIENTOENBUSCADORES

Elcumplimientodelaspautas,tantoencódigocomoencontenidossemánticos(porejemplo,vínculosconsentido)permitealosbuscadoresunamejoridentificacióndeloscontenidos,yenconsecuencia,mayoresposibilidadesdeposicionamientoenlosmotoresdebúsqueda.

5.2SEINCREMENTAELNÚMERODEPOTENCIALESVISITANTES

Laeliminacióndebarrerasdeentradaaunawebpermitesuperarlaslimitacionesdelusuario,captandonuevosusuarios.

5.3AUMENTALAUSABILIDADDELAPÁGINASiseconsigueunapáginaaccesible,seaumentaconsiderablementelausabilidaddelamisma,nosóloalosdiscapacitadossinoatodos.

5.4SECUMPLENLOSESTÁNDARESWEBEstoimplicaquenuestrapáginawebserávisionadacorrectamentedesdecualquiernavegador.

5.5REDUCEELTIEMPODECARGADELASPÁGINASWEB

AlsepararelcontenidodelapresentaciónmedianteCSSselograreducireltamañodelaspáginasweb.

5.6REDUCIMOSELCOSTEDEMANTENIMIENTOSeparareldiseñoycontenido,normalmentegeneramenoscódigomáslimpio,loquefavoreceráfuturasmodificacionesdelaweb.

5.7DEMUESTRARESPONSABILIDADSOCIALLaeliminacióndebarrerasquedificultenelaccesoanuestrawebdemuestraunapreocupaciónyatenciónhaciatodoslosclientes,loqueayudaamejorarlaimagendenuestraempresa.

5.8CUMPLIRLALEYEsunderechociudadanolaparticipaciónylanodiscriminaciónporrazóndediscapacidad.

6PROBLEMASDISCAPACIDAD

6.1VISUALImágenesoelementosmultimediasintextoalternativoTamañodeltextomuyreducidoInformaciónbasadaexclusivamenteenelcolorCombinacionesdecoloresconpococontraste

6.2AUDITIVAAusenciadetranscripcionesdelaudioAusenciadesubtítulosenvídeosTextoslargosycomplejosAusenciadeimágenesquecomplementenlainformacióntextual

6.3FÍSICAInterfacesdeusuarioquesólosepuedenutilizarconratónEnlacesycontrolesdeformulariomuypequeñosInterfacesdeusuarioquerequierenuncontrolmuyprecisoInterfacesdeusuariocontiemposderespuestaporpartedelusuariomuypequeños

6.4COGNITIVAYNEUROLÓGICATextoslargosycomplejosAusenciadeimágenesquecomplementenlainformacióntextualAusenciadeunmapadelsitiowebAusenciadedescripcionesyayudasparainterpretarloscontrolesdeunformularioInconsistenciasentredistintaspáginasdeunmismositioweb

6.5RELACIONADASCONELENVEJECIMIENTONormalmente,problemasrelacionadoscon:ladiscapacidadvisual,ladiscapacidadauditivayladiscapacidadfísica.

6.6TECNOLÓGICASistemasoperativosantiguosNavegadoresalternativosAnchodebandadecomunicaciónporInternetbajoAusenciadeunpluginparareproducirciertoscontenidosDispositivodevisualizacióndepequeñotamaño.

7¿CÓMONAVEGANLOSUSUARIOS?

7.1CONCEGUERATOTALOVISIÓNMUYREDUCIDA

Utilizanlectoresdepantallaquelespermitenlautilizacióndelsistemaoperativoydelasdistintasaplicacionesdeunordenadormedianteelempleodeunsintetizadordevozque"leeyexplica"loquesevisualizaenlapantalladelordenador.

7.2CONDEFICIENCIAVISUALOVISIÓNPARCIALRecurrenalaumentodeltamañodeltexto,empleancombinacionesdecoloresconunaltocontrasteoempleanmagnificadoresdepantallaquelespermitenvisualizarlapantallaconunconsiderableaumentoensutamaño.

7.3CONCEGUERAALCOLOR(DALTONISMO)Nosuelenemplearningúntipodetecnologíadeapoyo.

7.4CONSORDERATOTALODEFICIENCIAAUDITIVA

Nosuelenemplearningúntipodetecnologíadeapoyo.

7.5CONDISCAPACIDADFÍSICAEmpleandiferentestiposdedispositivosadaptadossegúnelgradodemovilidadqueconserven:tecladosespeciales,conmutadores,sistemasdereconocimientodevoz,sistemasdereconocimientofacial,etc.

7.6CONDISCAPACIDADCOGNITIVASuelenemplearnavegadoresaccesiblesquesimplificanlanavegación.

8HARDWARE

8.1APUNTADORCascoconunavarillametálica.Indicadoparapersonaspérdidademovilidadenlasextremidadessuperiores,peroconunbuencontroldelmovimientodelacabeza.

Apuntador.Fuente:accesibilidadweb.dlsi.ua.es

8.2CONMUTADORESActivadosporpresión.Enlaimagenseapreciaparalaboca,peroloshayparaelpuño.

Conmutadorporsoplido.Fuente:ability-world.com

8.3TECLADOSLoshayconteclasgrandes,conprotectoresparaimpedirlapulsaciónerrónea,conreguladoresderepetición,inclusodiseñadosparaunasolamano.

Teclado.Fuente:accesibilidadweb.dlsi.ua.es

8.4WEBCAMSPermitenreconocerlosmovimientosdelacara.

Webcam.Fuente:accesibilidadweb.dlsi.ua.es

8.5LÍNEASBRAILLEPermitenleerellenguajebraille.

Líneabraille.Fuente:accesibilidadweb.dlsi.ua.es

8.6TECLADOSBRAILLEPermitenescribirellenguajebraille.

Tecladosbraille.Fuente:accesibilidadweb.dlsi.ua.es

8.7LÍNEA+TECLADOPermitenleeryescribirellenguajebraille.

Líneabraillecontecladobraille.Fuente:accesibilidadweb.dlsi.ua.es

8.8PDASBRAILLEPermitenescucharyescribir,puessontecladosbrailleconunlectordepantallas(envezdelalíneabraille)

PDAbraille.Fuente:accesibilidadweb.dlsi.ua.es

9SOFTWARE

9.1LECTORESDEPANTALLA(I)NVDA:GratuitoySoftwareLibre.ParaWindows.

ORCA:GratuitoySoftwareLibre.ParaLinux.

VoiceOver:VieneenlossistemasdeiOSyOSx.

http://www.nvda-project.org

https://wiki.gnome.org/action/show/Projects/Orca

https://www.apple.com/es/accessibility/ios/voiceoverhttps://www.apple.com/es/accessibility/osx/voiceover

9.2LECTORESDEPANTALLA(II)Sedeberíaprobarlawebconalmenosestos3lectoresdepantalla.Elproblemaesquehayqueaprenderausarloslectoresdepantalla,yademáslosvidentesnolosusandelamismaformaquelosnovidentes.Aúnasíesunabuenapráctica.

9.3MAGNIFICADORESDEPANTALLAVirtualMagnifyingGlass:GratuitoySoftwareLibre.Multiplataforma(Windows,Linux,FreeBSDandOSX)http://magnifier.sourceforge.net

9.4TECLADOSVIRTUALESCasitodoslossistemasoperativosvienenhoyendíaequipadosconunsoftwaredeestetipo.

Onboardon-screenkeyboard.Fuente:asandiego

10DESAFÍOSYSOLUCIONES

10.1CEGUERA(I)Imágenes,fotos,gráficosinserviblesProveerdedescripcionesdetextoenelatributoalt,sifuesennecesariasexplicacionesmáslargas(tantoenlamismapáginacomoconunenlaceexterno).

10.2CEGUERA(II)AlgunosusuariosavecesescuchanlawebCreaenlacesquepermitanalosusuariossaltarlosmenúsdenavegación,listasdeitems,arteASCIIyotroselementosquepuedandificultarohacertediosalaescucha.

10.3CEGUERA(III)LosusuariosamenudosaltandeenlaceaenlaceconeltabuladorAsegúratequelosenlacestienensentido("clickea/pulsaaquí"esproblemático).

10.4CEGUERA(IV)LosusuariosgeneralmentenoutilizanelratónNoescribasscriptsquenecesitenelusodelratón.Proveededealternativasporteclado(porejemplo,utilizaonFocusenvezdeonMouseover).

10.5CEGUERA(V)PuedeserdifícilparalosusuariossaberdondeestáncuandoescuchanelcontenidodeunatablaProveedeencabezadosenlascolumnasylasfilasparalosdatosdelatabla(<th>).Evite,siesposible,filasocolumnasexpandidas.

10.6CEGUERA(VI)LosgráficosylastablasdedatoscomplejasquesoninterpretadosvisualmentesoninserviblesRealiceresúmenesy/odescripcionesdetexto,preferiblementeenlamismapágina,oenlaceconotrapáginacomoalternativa.

10.7CEGUERA(VII)Losmarcosnopuedenservistos.Debemosaccederaellosporseparado,porloqueconllevadesorientaciónNousesmarcosanoserqueseainevitable.Silousas,utilicetítulosenelmarcoparareflejarsuproposito.(Porejemplo,"marcodenavegación","contenidoprincipal").

10.8CEGUERA(VIII)LoscoloressoninútilesNoutiliceselcolorpararepresentarunsignificado.

10.9CEGUERA(IX)LosusuariosesperanqueloslinkslesllevenaalgúnsitioNoescribasscriptsenlinksquenotenganundestinoverdaderoasociado(porejemplohref="javascript:function(this)").

10.10CEGUERA(X)LoslectoresdepantallaleenelcontenidoenelordenqueapareceenelcódigoAsegúratequelosCSScomplejosolosdiseñosmaquetadoscontablasseleencorrectamente,tantovisualmentecomoenelcódigo.

10.11CEGUERA(XI)HayquiennopuedevervideosDispongadedescripcionesauditivasdeloshechosdelvideoquenopuedanserinterpretadosporelaudiodeeste.(porejemploqueunnarradordescribalasaccionesenlosvideos,enlosquenohayadiálogo).

10.12CEGUERACROMÁTICAColoresconuncontrastesimilaramenudosonindistinguiblesAsegúratequetienenuncontrastesuficiente.Noutilicessoloelcolorpararepresentarunsignificado.

10.13PROBLEMASVISUALES(I)AmenudolosusuariosutilizanampliadoresdepantallaParareducireltotaldeldesplazamientohorizontal,utilizaunidadesrelativasenvezdeabsolutas(porejemplo,usaporcentajesparaelanchodelastablas,envezdepíxeles).

10.14PROBLEMASVISUALES(II)Eltextoengráficosnoseamplíasinunsoftwareespecial,ysevepixeladocuandoseamplíaLímitaoeliminaeltextodentrodegráficos.Usaanti-aliasingparaconseguiruntextoclaroylegible.

10.15SORDERAElaudioesinútilProveedetranscripcionesparaelaudio.Proveedesubtítulossincronizadosparalosvídeos.

10.16DISCAPACIDADESMOTORAS(I)LosusuariospuedequenoseancapacesdeutilizarelratónAsegúratequetodaslasfuncionesestándisponiblesdesdeelteclado(intentaqueconeltabuladorsaltedeenlaceaenlace).Asegúratequeelordeneslógico.

10.17DISCAPACIDADESMOTORAS(II)Losusuariosqueutilizantecnologíasdesopladoyaspirado,osimilarespuedenfatigarseProporcionaunmétodoparasaltarlistaslargasoenlacesredundantesuotroscontenidostediosos.

10.18DISCAPACIDADESMOTORAS(III)LosusuariosutilizansoftwareactivadoporvozElsoftwaredereconocimientodevozgeneralmentenopuedereplicarelmovimientodelratóndeunamaneratanefectivacomoconelusodelteclado,asíqueasegúratequetodaslasfuncionesestándisponiblesdesdeelteclado.

10.19DISCAPACIDADESCOGNITIVAS(I)LosusuariospuedenconfundirsecondiseñosconfusososistemasdenavegacióninconsistentesSimplificaeldiseñotantocomoseaposible.Manténlossistemasdenavegacióntanconsistentescomopuedas.

10.20DISCAPACIDADESCOGNITIVAS(II)LosusuariospuedentenerdificultadesdeconcentraciónocomprensiónconpárrafoslargosDondeseaapropiado,agrupalainformacióndebajodeencabezadoslógicos.Organizalainformaciónen"trozos"manejables.

10.21DISCAPACIDADESCOGNITIVAS(III)UnsolométodopuedenosersuficienteDondeseanecesario,agregailustracionesuotromedioaltexto,yviceversa.

11PRINCIPIOSCLAVES

11.1PROPORCIONAUNTEXTOALTERNATIVOADECUADO

Eltextoalternativoproporcionaunaalternativatextualaloscontenidosquenosontextoenlaspáginasweb.Esespecialmenteútilparalaspersonasquesonciegasydependendeunlectordepantallaparaaccederalcontenidodeunsitioweb.

11.2PROPORCIONAENCABEZADOSPARALASTABLASDEDATOS

Lastablasqueseutilizanparaorganizardatostabuladosdebentenerencabezadosadecuados(elelemento<th>).Lasceldasdedatosdebenestarasociadasconsuscabecerasadecuadas,loquehacequeseamásfácilparalosusuariosdelectoresdepantallanavegaryentenderlastablasdedatos.

11.3GARANTIZAQUELOSUSUARIOSPUEDENCOMPLETARYENVIARTODOSLOSFORMULARIOSAsegúratedequecadaelementodeunformulariotieneasociadaunaetiqueta<label>.Además,asegúratedequepuedeenviarelformularioyrecuperarsedecualquiererror.

11.4ASEGURAQUELOSENLACESTENGANSENTIDOFUERADECONTEXTO

Cadaenlacedebetenersentidosieltextodelenlaceesleídodeformaaislada.Losusuariosdelectoresdepantallapuedenoptarporleersólolosenlacesdeunapáginaweb.Ciertasfrases,como"hagaclicaquí"y"más",debenserevitadas.

11.5SUBTITULAY/OPROPORCIONATRANSCRIPCIONES

Losvídeosdebentenersubtítulosyelaudiotranscripción.Estoesespecialmenteútilparapersonascondiscapacidadauditiva,peronosóloparaaellas,puesacualquierpersonalepuedeinteresartenerlossubtítulosdeunvídeoolatranscripcióndeunaudio,comoporejemploparapodertraducirloaotroidioma.

11.6GARANTIZALAACCESIBILIDADDELCONTENIDOQUENOSEAHTML

LosdocumentosPDFyotroscontenidosquenosonHTMLdebenserlomásaccesibleposible.Sinopuedeshacerloaccesible,consideraelusodeHTMLensulugaro,almenos,ofreceunaalternativaaccesible.

11.7PERMITEALOSUSUARIOSSALTARLOSELEMENTOSREPETITIVOS

Proporcionaunmétodo(porejemplounenlace"Saltaralcontenido"enlapartesuperiordelapágina)quepermitasaltarselanavegaciónuotroselementosqueserepitenencadapágina.Suelesermolestocuandosenavegaconunlectordepantallaquecadavezqueserecargaunapáginavuelvearepetirdenuevolacabeceraquesueleseridéntica.

11.8NOCONFÍESÚNICAMENTEENELCOLORPARATRANSMITIRELSIGNIFICADO

Elusodelcolorpuedemejorarlacomprensión,peronousessóloelcolorparatransmitirinformación.Esainformaciónpuedenoestardisponibleparaunapersonaqueesdaltónicaynoestarádisponibleparausuariosdelectoresdepantalla.

11.9ASEGÚRATEDEQUEELCONTENIDOESTÁCLARAMENTEESCRITOYESFÁCILDELEER

Escribeconclaridad,utilizatiposdeletrasevidentes,yemplealosencabezadosylaslistasadecuadamente.

11.10HAZACCESIBLEELJAVASCRIPTAsegúratedequeloscontroladoresdeeventosdeJavaScriptsonindependientesdeldispositivo(porejemplo,quenorequierenelusodeunratón).

11.11DISEÑASEGÚNLASNORMASElHTMLválidoylaspáginasaccesiblessonmásrobustasyproporcionanunmejorposicionamientoenlosmotoresdebúsqueda.ElCascadingStyleSheets(CSS)permitesepararelcontenidodelapresentación.

12IMÁGENESYANIMACIONES

12.1USEELATRIBUTOALTParadescribirlafuncióndecadaelementovisual(IMG,AREA,APPLETeINPUT).

12.2AUDAALOSUSUARIOSEltextoalternativoayudaalosusuarios:quenotenganterminalesgráficas,cuyosnavegadoresnosoportenformularios,condiscapacidadesvisuales,queutilicensintetizadoresdevoz,quehayanconfiguradosusagentesdeusuarioparanomostrarimágenes,etc.

12.3NOESPECIFICARTEXTOALTERNATIVO(I)cuandolasimágenessólosirvenparadarformatoaunapágina,porejemplo,alt="bolaroja"paraunaimagenqueañadeunabolarojaparadecoraruntítuloounpárrafo;entalescasos,eltextoalternativodeberíaserlacadenavacía("").

12.4NOESPECIFICARTEXTOALTERNATIVO(II)cuandoeltextocarezcadesignificado(p.ej.,"rellenoquequedabonito"),puesestonosolamentefrustraráalosusuarios,sinoqueralentizaráalosagentesdeusuarioquedebanconvertirtextoasalidaporvozoBraille.

12.5EJEMPLODEPÁGINACONIMÁGENES

Ejemplodepáginaconimágenes.

12.6MALUSODEALT(I)Malusodealtcuandodescribeimagenenvezdesufunción<ahref="anterior.html"><imgsrc="./img/flecha-izq.gif"alt="Flecharojaizquierda"></a><ahref="indice.html">Índice</a><ahref="siguiente.html"><imgsrc="./img/flecha-der.gif"alt="Flecharojaderecha"></a>

12.7MALUSODEALT(II)Malusodealtcuandoseusaenimágenesdecorativas<ahref="unete.html"><imgsrc="./img/logo.png"alt="Únete"/>Únete</a>

12.8MALUSODEALT(III)Malusodealtcuandonoaportanadaútil

<p>Teléfonodecontacto:<imgsrc="./img/telefono.gif"alt="Teléfonodecontacto"/></p>

12.9FANGSMALEnFangsnosevisionacorrectamente

ResultadodeFangsmal.

12.10PROBLEMASEnestapáginaexistenvariosproblemas:Eltextoalternativoquetienenlasflechasdescribelasimágenes,peronoindicasufunción.Lasimágenesdecorativasdelaslistasrepitenladescripcióndelenlace.Laimagenquecontieneunnúmerodeteléfonotieneuntextoalternativoquenoesnadaútil.

12.11SOLUCIONESParaqueestápáginaseaaccesibleexistenlassiguientessoluciones:Eltextoalternativodelasflechaspasaaindicarsufunción:"Anterior"y"Siguiente".Eltextoalternativodelasimágenesdecorativasdelaslistaslodejamosvacío.Eltextoalternativodelaimagenconunnúmerodeteléfonolohacemosútilindicandoelnúmerodeteléfono.

12.12BUENUSODEALT(I)Buenusodealtcuandodescribelafuncióndeunaimagen<ahref="anterior.html"><imgsrc="./img/flecha-izq.gif"alt="Anterior"></a><ahref="indice.html">Índice</a><ahref="siguiente.html"><imgsrc="./img/flecha-der.gif"alt="Siguiente"></a>

12.13BUENUSODEALT(II)Buenusodealtcuandoestávacíoenimágenesdecorativas<ahref="unete.html"><imgsrc="./img/logo.png"alt=""/>Únete</a>

12.14BUENUSODEALT(III)Buenusodealtcuandoeltextoesútil

<p>Teléfonodecontacto:<imgsrc="./img/telefono.gif"alt="999123456"/></p>

12.15FANGSMEJORYahoraenFangssevisionamejor...

ResultadodeFangsbien.

12.16PROBLEMASMENORESEnFangsapareceunproblemanuevo:cuandounaimagennotienetextoalternativomuestraelvalordelatributosrc.Enlamayoríadeloscasos,estevalornoesmuyútil,yaquesueleincluirnombresdedirectoriosyelnombredelfichero.

12.17IMÁGENESDECORATIVAS(I)LomejoresnoincluirlasimágenesdecorativasenelHTML<ul><li><ahref="unete.html">Únete</a></li>

12.18IMÁGENESDECORATIVAS(II)LomejoresemplearCSSparasuinclusión.

ul{list-style-image:url(./img/logo.png);}

12.19IMÁGENESCONTEXTO(I)Lomejoresnousarimágenesparamostrartextossinousartextosdirectamente.Teléfonodecontacto:<strong>999123456</strong>

12.20IMÁGENESCONTEXTO(II)LomejoresdecorareltextoconCSS.

strong{font-size:2em}

12.21FANGSMEJORYahoraenFangssevisionamuchomejor...

ResultadodeFangsrebien.

13MAPASDEIMAGEN

13.1¿QUÉSON?Losmapasdeimágenespermitenalosautoresespecificarregionesenunaimagenuobjetoyasignarunaacciónespecíficaacadaregión.

13.2TEXTOALTERNATIVOParaqueseaaccesible,setienequeproporcionaruntextoalternativoconaltparacadaetiqueta<area>.Comocadazonaactivarealizalamismafunciónqueunenlace,eltextoalternativotienequesereficaz,ytienequetenersentidocuandoseleafueradecontexto.

13.3EJEMPLOREGULARNoutilizalaetiqueta<object>

<imgsrc="img.png"usemap="#map1"><mapname="map1"id="map1"><areahref="index.html"alt="Inicio">

13.4VISUALIZACIÓNMALAsíFangsnomuestranada.

ResultadodeFangsmal.

13.5EJEMPLOBIENUutilizalaetiqueta<object>

<objectdata="img.png"type="image/jpg"usemap="#map1"><mapname="map1"id="map1"><p>Navegarporestesitio:<ahref="index.html">Inicio</a>

13.6VISUALIZACIÓNBIENEnFangsahorasevecorrectamente:

ResultadodeFangbien.

14MULTIMEDIA

14.1POCOACCESIBLESLoselementosmultimediapuedenocasionarproblemasdeaccesibilidad,yanosóloalaspersonasconalgúntipodediscapacidad,sinoatodoelmundoengeneral,pues,aunquecadavemenos,enmuchoscasos,requierenlainstalacióndeplug-in.

14.2TRANSCRIPCIÓNYSUBTÍTULOSSetienequeproporcionarunatranscripcióndelosdiálogosyunadescripcióndelossonidos.Enelcasodelosvídeostambiénsetienequeproporcionarunadescripcióndelvídeoensí(delaimagen).

14.3YOUTUBE(I)Aprincipiosde2010,YouTubeempezóaofrecerunsistemaparalainclusióndesubtítulosdeformaautomática.Además,cualquierapuedecrearunficherodesubtítulosysubirloaYouTubeparaqueseaempleado.

14.4YOUTUBE(II)EnYouTube,sepuedeemplear"Filtros"debúsquedaparaindicarquesequierebuscarvídeosquetengansubtítulos.

OpcionesdebúsquedaenYouTube.

14.5YOUTUBE(III)Losvídeosquetienensubtítulosaparecenenlosresultadosdeunabúsquedaconelmarcador"CC"(deltérminoinglés"ClosedCaptions"quesignifica"SubtítulosCerrados")

14.6YOUTUBE(IV)Lossubtítulosaparecensobreimpresossobreelvídeo.

EjemplodevisualizacióndesubtítulosenYouTube.

14.7YOUTUBE(V)Pinchandoeneliconodesubtítulospodemosactivarlosydesactivarlos.Además,nospermiteconfiguraralgunosparámetrosdevisualizacióndelossubtítulos,comoeltipodeletra,eltamañodeletrayelmásimportante,elidiomadelossubtítulos.

14.8YOUTUBE(VI)YouTubepermiteañadirsubtítulosendiferentesidiomas,ytambiénpermiteemplearunserviciodetraducciónautomáticadelossubtítulos.

Subtítulostraducidosdeformaautomáticaen

15ENLACES

15.1FUERADECONTEXTOAlgunosnavegadoresyalgunosprogramasdeayudapermitenmostrarlalistadeenlacesdeunapáginaweb.Paraqueelenlacetengasentidoenesalistadeenlaces,eltextodelenlacetienequetenersentidofueradesucontexto.

15.2EVITAR"PINCHAAQUÍ"Intentaevitarlosenlacestipo"Pinchaaquí":

Evitarlosenlacestipo"Pinchaaquí"

15.3EJEMPLOMAL<p>Estabamosdesayunandocuandoderepentesucedió.<ahref="noticia-hija-mayor.html">Másinformación.</a></p>

15.4EJEMPLOBIEN(HTML)<p>Estabamosdesayunandocuandoderepentesucedió.<ahref="noticia-hija-mayor.html">Másinformación<span>sobrelanoticiatitulada"Amihijamayorselehacaídosuprimerdiente"</span>.</a></p>

15.5EJEMPLOBIEN(CSS)span{position:absolute;left:-9999em;width:1px;overflow:hidden;}

15.6EJEMPLOREBIEN

Enlacestipo"Pinchaaquí"accesibles

15.7EJEMPLOREBIEN(HTML)<p>Estabamosdesayunandocuandoderepentesucedió.<ahref="noticia-hija-mayor.html">Másinformación<span>sobrelanoticiatitulada"Amihijamayorselehacaídosuprimerdiente"</span>.</a></p>

15.8EJEMPLOREBIEN(CSS)a:hover,a:focus,a:active{position:relative;}a:hoverspan,a:focusspan,a:activespan{left:20px;top:20px;width:100px;}a:hoverspan:before,a:focusspan:before,a:activespan:before{content:"Masinformacion";}

15.9TAMAÑOAsegúratequelosenlacessonlosuficientegrandesparaqueseafácilhacerclickenellos.

15.10IMPORTANCIAPRIMERENLACEElprimerenlacevaallevarselamayorpartedelaatencióndellectoryelmayorporcentajedeclicks.Eligetuprimerenlacecuidadosamente.Empiezaporloimportanteynolomalgastesenunatrivialidad.

15.11NOENLACESTODOUsardemasiadosenlaceshaceeltextodifícildeleeryademásdevalúaelvalordelosenlacesimportantes.Dedicaalgodetiempoapensarquéeslomásimportantequeestásescribiendoyquépuedetenersentidoenlazar.

15.12NOREPITASLOSENLACESSiutilizasporprimeravezalgúntérminooconceptonuevopuedesenlazaraalgunaenciclopediaodiccionarioparaqueellectorencuentremásinformaciónsinosabedequéhablas,perohazlosólolaprimeravez,nocadavezqueseencuentreeltérminoenlapágina.

15.13MISMOIDIOMAPÁGINAIntentaenlazarenelmismoidiomadelapágina,ysitienesquehacerlo,ynoesobvio,indicaelidiomadelenlaceentreparéntesis.

15.14COMPORTAMIENTOESTÁNDARNoaltereselcomportamientodelosenlaces,comoporejemploponerprevisualizacionesdelapáginaqueenlazacuandosepasaelratónporencima.

15.15COPIARYPEGARNoenlacescosasqueelusuariopuedequererseleccionarycopiar,puesesbastantedifícilhacerlo,inclusoparaunapersonaexpertaysindiscapacidad.

15.16CONTENIDOINDEPENDIENTENohagaselcontenidodependientedelosenlacesparafuncionar.Esimportanteofrecerelcontextonecesarioparahacerelcontenidoentendiblesinlanecesidaddevisitartodoloqueestádetrásdelosenlaces.

15.17LOSENLACESSONENLACESDalesunestilodistintivoquenopuedaserconfundidoconningúnotroelementootextodelapágina.Usauncolorúniconousadoenningunaotrapartedelapáginayconsiderausarlaconvencióndeunenlacesubrayado.Usaelmismodiseñoparatodoslosenlacesdelsite.

15.18NOOFUSQUESTUSURLSLosusuariospuedenquererverpreviamentedóndevanaserenviadoscontuenlaceponiendoelratónencimayviendolaURLenlabarradeestado.EvitautilizarredireccionesyserviciosacortadoresdeURLsquehacenlaURLtotalmenteopaca.

15.19COMPRUEBALOSENLACESVisítalosantesdeenlazar,copiacorrectamentelaURLyunavezpublicadorecuerdapulsarlosparacomprobarquefuncionancorrectamente.NohaynadamásfrustranteenlaRedqueunenlacemalpuestooestropeado.

16ORGANIZACIÓNDELASPÁGINAS

16.1ELEMENTOSESTRUCTURALESLaspáginaswebtienenqueestarcorrectamenteestructuradas.Paraello,setienenqueemplearlasetiquetasdeHTMLquedefinenlaestructuradeunapágina,comoson:<title>,<h1>,<h2>,...,<ul>,<ol>,<p>,<blockquote>.

16.2TITLE(I)Todapáginawebdebeteneruntítulodescriptivoperoalavezbrevedefinidoconlaetiqueta<title>queresumaelcontenidoolafuncióndelapágina.Esconvenienteincluirelnombredelsitiowebparadefinirelcontextodelapágina.

16.3TITLE(II)Eltítulodelapáginaseemplea:enlosmarcadoresdelosnavegadores,enlosresultadosquemuestranlosbuscadores,ysuelesereltextoquesecomparteenlasredessociales.

16.4TITLE(III)Eltítulodelapáginaesloprimeroqueleenloslectoresdepantalla.Comoseleeentodaslaspáginas,debesercortoynodebeserelmismoentodaslaspáginas.

16.5ENCABEZADOS(I)Elcontenidodelaspáginassetienequeestructurarconlasetiquetasdeencabezado<h1>,<h2>,...

16.6ENCABEZADOS(II)Lamayoríadeloslectoresdepantallayalgunosnavegadorespermitenalusuariodesplazarsedentrodeunapáginaweb"saltando"deunencabezadoaotroencabezado,lopermitellegardeunaformamásrápidaalainformaciónquesebusca.

16.7ENCABEZADOS(III)Utilizaunúnicoencabezado<h1>paraeltítuloprincipaldelapáginaweb.Utilizadiferentesencabezados<h2>paracadaapartadoprincipaldelapágina.Empleaelrestodeencabezados(<h3>...<6>)paraañadirmayorniveldedetalleenlaestructuradelapágina.

16.8ENCABEZADOS(IV)Seconsistenteenelusodelosencabezados:porejemplo,nopasesde<h2>a<h4>sinutilizar<h3>.

16.9ENCABEZADOS(V)Sinoquieresqueseveanlosencabezadosenunnavegadorvisual,utilizaCSSparaesconderlos.Paraello,noutilicesdisplay:none;sinodesplazaelencabezadofueradeláreadevisualizaciónconposicionamientoabsoluto,porejemplo,position:absolute;top:-500px;.

16.10MAQUETACIÓN(I)Muchosdesarrolladoresdepáginaswebempleanlasetiquetas<div>y<span>paradefinirencabezadosdesecciónyestructurarelcontenido,sinembargo,estasetiquetas<div>y<span>noproporcionancontenidosemántico,porloquesedebeevitarsuuso.

16.11MAQUETACIÓN(II)Enunapáginawebnuncasedebenutilizarlastablasparamaquetar,yaquesuponenungraveproblemadeaccesibilidad.

16.12HTML5Sinperderdevistatodolomencionadoanteriormente,sepuedenempezarausarlasnuevasetiquetassemánticasyestructuralesdeHTML5:<header>,<hgroup>,<nav>,<article>,<aside>o<footer>.

16.13HEADER(I)Laetiqueta<header>seusaparamarcarungrupodeelementosdeintroducciónodenavegacióndentrodeunasecciónodocumento.

16.14HEADER(II)Elusodelaetiqueta<header>noestárestringidoaunapordocumento:<header><h1>Títulodeldocumento</h1><p>Másinformación</p></header><article><header><h2>Títulodelartículo</h2><p>Autordelartículo</p></header><p>Textodelartículo</p></article>

16.15HEADER(III)Sisólotenemosunelementonoesnecesariousarestaetiqueta:<article><header><h1>Títulodelartículo</h1></header><p>Textodelartículo</p></article>

16.16HEADER(IV)Seríamáscorrectodeestaforma:

<article><h1>Títulodelartículo</h1><p>Textodelartículo</p></article>

16.17HGROUP(I)Laetiqueta<hgroup>seusaparaagruparunconjuntodeelementosdeencabezado(<h1>–<h6>).Elusomástípicodeestaetiquetaesparaagrupareltítulodelapáginaconsueslogan.

16.18HGROUP(II)AntesdeHTML5lomástípicoeraqueestetipodeestructurasemarcaseasí:<divid="header"><h1>Nombredelaempresa</h1><p>Eslogandelaempresa</p></div><divid="content"><h2>Noticia1</h2><p>Desarrollodelanoticia1</p><h2>Noticia2</h2><p>Desarrollodelanoticia2</p></div>

16.19HGROUP(III)Estetipodeestructuradejabaelesloganalniveldecualquierotrotextodelaweb,cuandoesevidentequeesuntextomásimportante.Marcarloconun<h2>noeracorrectoyaquecrearíaunanuevasecciónqueenrealidadnoexiste.

16.20HGROUP(IV)ConHTML5podemosusar<hgroup>paradarlelaimportanciaquerealmentetiene,asociándoloaltítulo:<hgroup><h1>Nombredelaempresa</h1><h2>Eslogandelaempresa</h2></hgroup><article><h2>Noticia1</h2><p>Textodelartículo</p></article>

16.21NAVLaetiqueta<nav>seusaparamarcarlanavegacióndelapáginaweb.Estaetiquetanodebeserusadaparamarcartodoslosgruposdeenlaces,únicamentelosbloquesprincipalesdenavegaciónporlapágina.

16.22ARTICLELaetiqueta<article>seusaparamarcarcontenidoindependientequetendríasentidofueradelcontextodelapáginaactualyquepodríasindicarse,porejemplo:unanoticia,unartículoenunblogouncomentario.Normalmenteun<article>podráademástenerdesupropiocontenido,tambiénunacabecera(<header>)yposiblementeunpie(<footer>).

16.23SECTIONLaetiqueta<section>seusaparamarcarunaseccióngenéricadeundocumentooaplicación,típicamenteconunencabezado(<header>).Sólosedeberíausar<section>paracontenidoindependientealquesepodríaponerunencabezadoyquenoseasusceptibledeirmarcadocon<article>,<aside>o<nav>.

16.24ARTICLEVSSECTIONEjemplotípicodelusode<section>y<article>:<h1>Nombredelaempresa</h1><sectionid="news-list"><h2>Noticias</h2><article><h3>Noticia1</h3><p>Desarrollodelanoticia1</p></article><article><h3>Noticia2</h3><p>Desarrollodelanoticia2</p></article></section>

16.25ASIDELaetiqueta<aside>seusaparamarcaruntrozodecontenidoqueestárelacionadoconelcontenidodelapáginaweb,peroquenoespartedelmismo.Ejemplosdeusoserían:glosariodetérminos,gruposdeenlacesapáginasrelacionadas,barraslaterales,...

16.26FOOTERLaetiqueta<footer>seusaparamarcarelpiedeunasecciónodocumentoyquecontieneinformaciónsobreelmismocomoelautor,licencia,términosdeuso,...

17FIGURASYDIAGRAMAS

17.1LONGDESC(I)Cuandoseutilizanimágenesenunaweblaprácticahabitualesdarlesuntextoalternativomedianteelatributoalt,odejarvacíodichoatributoenelcasodequelafuncióndelaimagenseameramentedecorativa.Peronospodemosencontrarconelcasodetenerunaimagenalaquehayaqueasociarleuntextoalternativo,perodichotextoseaexcesivamentelargo,paraesasocasionesestáelatributolongdesc.

17.2LONGDESC(II)ElatributolongdeschadesersiempreunaURLquelleveaunadescripcióndelaimagen,enlamismaoenotrapágina.SepuededarunaURLexternao,comoenelejemploexpuestomásadelante,unmarcadordepágina.

17.3LONGDESC(III)SinosequieremostrarladescripciónlargasepuedeesconderconCSS,peroparaello,nousardisplay:none;sinodesplazarelelementofueradeláreadevisualizaciónconposicionamientoabsoluto,porejemplo,position:absolute;left:-9999em;.

17.4EJEMPLOMAL<imgsrc="./img/disenio-centrado-usuario.png"alt="DiagramadeDiseñoCentradoenelUsuario">

17.5EJEMPLOBIEN(HTML)<imgsrc="./img/disenio-centrado-usuario.png"alt="DiagramadeDiseñoCentradoenelUsuario"longdesc="#descripcion1"><spanid="descripcion1">ElDiseñoCentradoenelusuariotienevariasfases:planificación,diseño,prototipado,evaluación,implementaciónylanzamiento,mantenimientoyseguimiento</span>

17.6EJEMPLOBIEN(CSS)span{position:absolute;left:-9999em;width:1px;overflow:hidden;}

18SCRIPTS

18.1POCOACCESIBLES(I)AlgunosdelosnavegadoresqueempleanlaspersonasdiscapacitadasnosoncapacesdeinterpretarelcódigodeJavaScriptoalgunoselementosmultimediacomoappletsuobjetosquerequierendeunplug-in.

18.2POCOACCESIBLES(II)Porreglageneral,elHTMLDinámiconofuncionaráconunnavegadornovisualynoseráaccesible.LasolucióneslograrqueunapáginawebfuncionecorrectamentesinnecesidaddetenerqueejecutarelcódigoJavaScript.

18.3GRACEFULDEGRADATIONSecreaunapáginawebparalosúltimosnavegadores,conlaposibilidaddequefuncioneennavegadoresantiguos.

Gracefuldegradation

18.4PROGRESSIVEENHANCEMENTSepartedeunaversiónbásicacompletamenteoperativa,conlaposibilidaddeirañadiendomejorasparalosúltimosnavegadores.Eslaopciónmásutilizadahoyendía.

Progressiveenhancement

18.5CAPAS(I)Unapáginawebsepuedeconstruirmediantecapas:Capadecontenido:laestructurayelcontenidoconetiquetasdeXHTML.Capadepresentación:lapresentacióndelcontenidodefinidaconCSS.Capadecomportamiento:elcomportamientodelcontenido(porejemplo,larespuestaanteunaaccióndelusuario)definidoconJavaScript.

18.6CAPAS(II)Separarcontenido(HTML),depresentación(CSS),decomportamiento(Javascript)

Separacióndecontenido,presentaciónycomportamiento

18.7CAPAS(III)Conundiseñobasadoencapaslogramos:reducirelacomplamientoentrelosdistintoscomponentes(contenido,presentaciónycomportamiento),disminuimosloserrores,reducciónenloscostesdemantenimiento,etc.

18.8EVENTOSJSAsignarcódigoJavaScriptaunmanejadordeeventosconelsiguientecódigo:elemento.evento=acccion;

18.9SELECCIÓNJSSeleccionarelementosdelapáginawebmedianteJavaScript:getElementById(id):seleccionaelelementoindicadoporelid.getElementsByTagName(etiqueta):seleccionaloselementosportipodeetiquetasquerySelector(selectors):seleccionaelprimerelementoseleccionadoquerySelectorAll(selectors):seleccionaloselementosseleccionadosgetAttribute(atributo):paraseleccionarlosatributodeunelemento

18.10EJEMPLOMAL<ahref=""onclick="alert('HolaMundo')">Pinchaparaverun"HolaMundo"enJavascript</a>

18.11EJEMPLOBIEN(HTML)<ahref="">Pinchaparaverun"HolaMundo"enJavascript</a>

18.12EJEMPLOBIEN(JS)window.onload=function(){varlink=document.querySelector("a");link.onclick=function(){alert("HolaMundo");}}

19FRAMES

19.1POCOACCESIBLESLosframessonunelementodelHTMLquesiemprehancausadoproblemas.nosepuedeenlazaraunacombinaciónparticulardemarcos,nosellevanbienconlosbuscadores,sepuedellegaraunasituacióndemúltiplesmarcosanidados,etc.

19.2EVITARUSODecaraalograrlamáximaaccesibilidadposible,esmejorevitarelusodemarcos.Hoyendía,existendiferentestécnicasparaincluirautomáticamenteunelemento,comounmenúdenavegaciónounpiedepáginaenunlugardeterminadodetodaslaspáginas,conloqueseconsiguelamismafunciónqueconelusodemarcosperosinsusinconvenientes.

20TABLAS

20.1DIFÍCILESDEENTENDERUnatabladedatosesmuydifícildeentendersisólosepuedeverundatoaisladocadavez,queeselproblemaquesufrenlosusuariosqueempleannavegadoresnovisuales.Paraevitaresteproblema,setienenqueetiquetarcorrectamentelastablas.

20.2CAPTIONPoneruntítuloqueproporcioneunadescripciónbreveenlaetiqueta<caption>,justodespuésdelaetiqueta<table>.

20.3SUMMARYPonerunresumenquecomplementealtítuloenelatributosummarydelaetiqueta<table>:conlaestructuradelatabla(númerodefílas,númerodecolumnas)conladescripcióndelosencabezamientosconlarelaciónqueguardalatablaconelrestodelapágina,etc.

20.4THDefinirlosencabezadostantoverticalescomohorizontalesconlaetiqueta<th>.

20.5EJEMPLOMAL<table><tr><td></td><td><strong>Lunes</strong></td><td><strong>Martes</strong></td></tr><tr><td><strong>10:00</strong></td><td>Matemáticas</td><td>Matemáticas</td></tr><tr><td><strong>11:00</strong></td><td>Lengua</td><td>Lengua</td></tr></table>

20.6EJEMPLOBIEN<tablesummary="5columnas(díasdelasemana)y4filas(horas)"><caption>Horariodeclase</caption><tr><th></th><thid="columnaLunes">Lunes</th></tr><tr><thid="filaHora10">10:00</th><tdheaders="columnaLunesfilaHora10">Matemáticas</td></tr></table>

21FORMULARIOS

21.1LABELAsegúratedequecadaelementodeunformulariotieneasociadaunaetiqueta<label>.

21.2EJEMPLOMAL<formmethod="post"action="#"><p><strong>Informaciónpersonal</strong></p>Nombre:<inputtype="text"required><br>

21.3EJEMPLOBIEN<formname="contacto"method="post"action="#"><fieldset><legend>Informaciónpersonal</legend><labelfor="nombre"tabindex="1">Nombre:</label><inputtype="text"id="nombre"name="nombre"autofocusrequired><br>

22ELEMENTOSREPETITIVOS

22.1PROBLEMASuelesermolestocuandosenavegaconunlectordepantallaquecadavezqueserecargaunapáginavuelvearepetirdenuevolacabeceraquesueleseridéntica.

22.2SOLUCIÓNProporcionaunmétodo(porejemplounenlace"Saltaralcontenido"enlapartesuperiordelapágina)quepermitasaltarselanavegaciónuotroselementosqueserepitenencadapágina.

23VALIDADORES

23.1DEHTMLW3CMarkupValidationService

WDGHTMLValidatorhttp://validator.w3.org

http://www.htmlhelp.com/tools/validator

23.2DECSSW3CCSSValidationService

WDGCSSCheckhttp://jigsaw.w3.org/css-validator

http://www.htmlhelp.com/tools/csscheck

23.3DEENLACESW3CLinkChecker

WDGLinkValet

LinkChecker

http://validator.w3.org/checklink

http://www.htmlhelp.com/tools/valet

http://wummel.github.io/linkchecker

23.4OTROSVALIDADORESW3CmobileOKChecker

W3CFeedValidationService

W3CSemanticDataExtractor

http://validator.w3.org/mobile

http://validator.w3.org/feed

http://www.w3.org/2003/12/semantic-extractor.html

23.5UNIFICADOSW3CUnicornhttp://validator.w3.org/unicorn

23.6ACCESIBILIDAD(I)WAVEWebAccessibilityTool

WAVEWebAccessibilityToolbarforFirefox

CynthiaSays

http://wave.webaim.org

http://wave.webaim.org/toolbar

http://www.cynthiasays.com

23.7ACCESIBILIDAD(II)eXaminator

AChecker

Nibbler

http://examinator.ws

http://achecker.ca/checker

http://nibbler.silktide.com

23.8ACCESIBILIDAD(III)TingtunChecker

FunctionalAccessibilityEvaluator

SortSite-AccessibilityCheckerandValidator

http://accessibility.tingtun.no/en/pagecheck2.0

http://fae20.cita.illinois.edu

http://www.powermapper.com/products/sortsite/checks/accessibility-checks.htmlhelp

24OTRASHERRAMIENTAS

24.1PLUGINSWebDeveloper,noofrecemuchísimainformaciónútilparacomprobarqueunapáginawebesaccesible.

Verexplicación:

FangsScreenReaderEmulator,emulaelcomportamientoquetendríaunlectordepantallas.

https://addons.mozilla.org/es/firefox/addon/web-developer/

http://accesibilidadweb.dlsi.ua.es/?menu=hr-webdevelopertoolbar

https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator

24.2COLORESAccessibilityColorWheel

ColorblindWebPageFilter

CheckMyColours

http://gmazzocato.altervista.org/colorwheel/wheel.php

http://colorfilter.wickline.org

http://www.checkmycolours.com

24.3PALETASDECOLORESPaletton

ColorPaletteGeneratorhttp://paletton.com

http://www.degraeve.com/color-palette

24.4TIEMPODECARGALoadImpact

PingdomWebsiteSpeedTest

SiteSpeed

WebPageAnalyzer

http://loadimpact.com

http://tools.pingdom.com/fpt

http://sitespeed.me

http://www.webpageanalyzer.com

25ACERCADE

25.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:

EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:

https://github.com/asanzdiego/markdownslides

http://creativecommons.org/licenses/by-sa/3.0/es

25.2FUENTESTransparencias:

Código:

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/02-accesibilidad/slides

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/02-accesibilidad/src

25.3BIBLIOGRAFÍA(I)PáginadeAccesibilidadWebdelaUniversidaddeAlicante

Traducción:PautasdeAccesibilidadparaelContenidoWeb(WCAG)2.0

http://accesibilidadweb.dlsi.ua.es

http://www.sidar.org/traducciones/wcag20/es

25.4BIBLIOGRAFÍA(II)Enlazaresimportante

Enlacespara“leermás”queseansimplesyaccesibles

Javascriptnoobstructivo,Manualdebuenasmaneras

http://www.microsiervos.com/archivo/weblogs/enlazar-es-importante-3.html

http://www.torresburriel.com/weblog/2005/10/22/enlaces-para-leer-mas-que-sean-simples-y-accesibles

http://www.anieto2k.com/2006/10/15/javascript-no-obstructivo-manual-de-buenas-maneras

25.5BIBLIOGRAFÍA(III)HTML5:Nuevasetiquetassemánticasyestructurales

HTMLyAccesibilidad:elatributolongdescenimágenes

NuevostiposdeinputenHTML5

http://www.arumeinformatica.es/blog/html5-nuevas-etiquetas-semanticas-y-estructurales

http://blog.outbook.es/desarrollo-web/html-y-accesibilidad-el-atributo-longdesc-en-imagenes

http://www.htmlcinco.com/nuevos-tipos-de-input-en-html5

25.6BIBLIOGRAFÍA(IV)Lectoresdepantalla

Validadoresyherramientasdeaccesibilidadyusabilidad

WebAccessibilityEvaluationTools:Overview

http://es.wikipedia.org/wiki/Lector_de_pantalla

http://www.usableyaccesible.com/recurso_misvalidadores.php

http://www.w3.org/WAI/ER/tools/Overview.html