accesibilidad web · la accesibilidad web no se centra sólo en las personas con discapacidad, en...
TRANSCRIPT
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