(Música)
Hola a tots, gràcies per vindre
Avui tenim una xerradamolt, molt interessant,
que crec que tindria que estarsempre present a totes les WordCamps
Avui l'accessibilitat és untema dels grans desconeguts
i poc usat
Avui tenim aquí a Vicent,que és un expert consultor
d'accessibilitat digital, a mésés expert en ciències de la visió
A més, també és una espècied'evangelitzador per totes
les WordCamps, que, "bueno",innombrables les que ha estat
i ha anat exposant elseu missatge, insisteixo
Tindria que ser una xerrada obligatòria
en totes les WordCamps
Ell també fa esdeveniments gratuïtscom el “WP Accessibility Day”
I "bueno", són coses més a partque jo he estat aquests dies
abans de conèixer-lo i he anatmirant els seus vídeos, he anat
mirant la seva web i m'hasemblat un món “superapassionant”
Avui ens vindrà a parlar de"10+2 Bàsics d'Accessibilitat"
i bueno, jo almenys “superemocionat”que estigui aquí a Barcelona
Gràcies per vindre. Un fort aplaudiment
(Aplaudiments)
Gràcies Jordi per la presentació
Gràcies a tots per vindre
I bé, estic molt contentde vindre avui aquí a
Barcelona i poder feruna xerrada en valència
És la primera vegada que parleen valència en una WordCamp
(Aplaudiments)
Em presente. Jo sóc Vicent Sanchis,consultor d'accessibilitat,
tinc un doctorat enoptometria i ciències de la visió
i quan jo em dedicava aciència era un "tio" seriós,
amb ansietat, síndrome del'impostor i totes aquestes històries
Ara, tinc el monyo, un poquet mésllarg, un poquet més desenfadat
A fer punyetes!
Sóc ambaixador de Raiola Networks,
a qui vull agrair el recolzamentper a poder vindre
a la WordCamp idonar-vos aquesta xerrada
Sense la seva ajuda seria difícil
I vull aclarir una cosa
No sóc director de TV3
(Aplaudiments)
El dijous mateix em van mencionar a untuit amb una coneguda periodista de TV3
No sóc jo, no sóc família, no el conec
(Aplaudiments)
Però jo he vist moltTV3 i m'ha influït molt
Per això, aquesta xerrada,veureu algunes de les coses
que se m'han quedat gravades en lament i algunes de les meues passions
Hem podeu trobar avicentsanchis.com, a la meva
comunitat d'accessibilitat,accessihub.es,
i al meu canal de YouTubeconjunt, de terroristes d'accessibilitat
digital, equipoDobleA.digitalamb José Humanes
Anem cap avant
Accessibilitat
L'accessibilitat és molt important
No cal que insistiscatotes les vegades que parle
Però vos ho explicaré amb un poema
Aquest poema té dues paraules
Tu, tu, tu...
Tothom
L'accessibilitat és bona per a tothom
He posat sempre, desprésd'estos títols, una cita
En aquest cas, el creadorde la Web, Tim Berners-Lee,
té claríssimament clarque l'accés a la informació
de totes les persones,independentment de la seva discapacitat,
és una qüestió fonamental per a la Web
I, quan parlem d'accessibilitat,hi ha moltíssima gent
que considera que és unaqüestió o bé de codi i de disseny
Per a mi això és massa simplista
Em recorda una mica aquestafrase de Carmen de Mairena,
"Jo sóc elegant per darrere,el codi, i per davant, el disseny"
Aprofite també per a reivindicarla figura d'aquesta dona
que va viure una dictadura i,amb el canvi de la democràcia,
no va poder viuredignament la seua identitat
I damunt veïna d'aquí de Barcelona
Doncs bé, realment,l'accessibilitat depèn del codi,
del disseny i del contingut
No he trobat millor “emoji”
Però més o menys se m'entén
Doncs, comencem la xerrada
Qui coneix 10+2?
Val, com no vull abusar del copyright,ho farem així, amb colorets
Punt número 1
Idioma
No existeix idioma queno pugui ser mal interpretat
Afegisc jo, sobretot sil'idioma del text no correspon
a l'idioma en què pronunciael lector de pantalla
I tingueu aquí una demo de com llig laweb de la WordCamp un lector de pantalla
La web està en català, però ellector no sé si llegirà bé del tot
Tira-li
No
(Lector de pantalla) Aprendre dosdais per a aprende i per descobrir
nous ains. Nus cancepts,altres formes d'utilitzar
WordPress. Compartir, dos days percompartir coneicsements
Experiencies, anecdotesi també per a
aportar el teu granet de sorraper a WordPress
Gaudir dos days plensde abracades i d'encaicsades
Una trobada entre companis i col·leguesde professió que enriqueix a totum
(Vicent) Totuuuuuummmmm
Eixa em va encantar
M'ha arribat a la patata
Doncs bé, ens quedem com"No entiendo nada"
No s'entén res
És important definir l'idioma en el quèestà redactat el contingut del web
I, molt poquet de codi
S'indica ahí dalt
html lang="ca"El llenguatge del contingut és català
Cal trastocar el codi per indicarel llenguatge de la pàgina en general?
Afortunadament no, perquè a Wordpress,opcions, idioma del lloc, català
Ja ho posarà a totes les pàgines
Però, fixeu-vos un momenteten la cinta de l'acreditació
Què diu? "Code is poetry"
Si a la pàgina de la WordCamp volem afegiraquesta frase, deuríem de dir-li,
això si que s'ha de feramb codi, que aquest
paràgraf, el llenguatge,està en anglès
Si ho volem localitzar unpoquet més, "Code is Petri"
Podem, fins i tot, indicarl'idioma d'una paraula en concret
I si algú no recorda el Petri. El Petritenia el petri-monopatí i el petri-fax
Vos recordeu, veritat, no sóc jo el més"vellanco" de la sala amb aquestes coses
Segon punt. Estructura
Per a Aristòtil, el de veritat.El de la sèrie, no el de 10+2, no
A força de construir bé,s'arriba a bon arquitecte
Barcelona, arquitecte...
(Fotògraf) El cabrón posa
(Vicent) Jajaja, tic, tic, tic.És que sóc molt fan de la Chanel
Barcelona, arquitecte, Gaudí
Enteneu per què no pucfer la xerrada a València?
L'originalitat consisteixen el retorn a l'origen;
així doncs, original és allò que torna ala simplicitat de les primeres solucions
Simplicitat, solucions
Parlem d'estructura.Què millor que aquesta imatge?
Esperàveu la Sagrada Família, però no
Què és això? Una maquetad'estudi de distribució de pesos
que li servia a Gaudí per a dissenyarles seves estructures i els seus edificis
Això, a mi, em recorda un "wireframe"
D'alguna manera
Imaginem que això és unwireframe d'un web normal
i corrent a dia de hui
Diferents seccions,diferents columnes, etc.
Si volem veure en mòbil,queda un poquet xicotet
La lletra serà xicoteta,serà difícil de llegir
Si ampliem, tindrem poccamp de visió per anar llegint
Hauríem de fer scrollen horitzontal i en vertical
“Red flag” total
Scroll només en una direcciói a poder ser en vertical
Si li demanem que s'ajuste, què passa?
Que sí, s'ajusta, però eltext va a ser difícil de llegir
Què ens deia Gaudí?
Retorn als orígens
orígens en arquitectura
“Griegos, romanos, son todos humanos”
“Mientras vivieron, pues bueno",(Cantant) “dórica, dórica, jónica, jònica”
(Cantant) “coríntia,coríntia, coríntia, coríntia”
Coneixeu a Les Bistecs?Per favor, digueu-me que sí
(Rialles)
(Aplaudiments)
Per a qui no conega Les Bistecs
és, va ser, un grup “d'electrodisgusting”d'aquí de Barcelona
Molt divertides
Doncs bé, disseny en columna
disseny en columna
Si aquest “wireframe” canvia laseva disposició a una columna,
El contingut s'adapta al dispositiu
Per tant, vull que vos quedeuamb tres conceptes
referents d'alguna manera a l'estructura
"Mobile first", pensat primeren els mòbils,
"Responsive Design",que el contingut s'adapte
al tamany de lafinestra o del dispositiu,
i "Accessibility Ready",
(Castellà) Consultoria rápida igratuita sobre Kit Digital
Estoy un poquito hasta las naricesy por eso lo digo en castellano
para que así todo el mundo loentienda y se quede grabado
Consejo gratis
En el repositorio de WordPresstenemos un filtro de características
y podemos marcar la primera opción,
preparado para accessibilidad,llest per a accessibilitat
Esos temas los ha revisado un equipo, y
la revisión es para confirmarque cumplen con
cierto estándar que he prometidoque no iba a mencionar en la charla
Tanquem el parèntesi
Seguim
Capçaleres
Ací normalment dic encapçalamentsperò, són capçaleres
Si el periodisme és encara una força cega,
la culpa és del periodistaEugenio María de Hostos
No sé qui és, jo vaig fer una busca,una lectura en diagonal,
perquè tots sabeuque ningú llig les webs
Mirem en diagonal.És una cosa molt moderna, molt actual
"Pues no señores ni señoras"
Una fulla de periòdic de 1929
Hi ha capçaleres
Les capçaleres servien per a indicar
en quin lloc de la pàginacomençava cada notícia
I és el que ens serveix com aestratègia visual per anar buscant
Al web fem exactament el mateix, buscar lainformació que ens està interessant
I sobre les capçaleres cal tindreen compte un parell de consells
Deuen organitzar el contingut
A la Wikipedia, per exemple,a la Viquipèdia sobre Barcelona
tenim una capçalera ahí dalt, Barcelona,
La següent està ací,geografia, localització
i aquesta taula de contingutsen realitat són els capçaleres
Les capçaleres també hande descriure el tòpic o propòsit
Si tenim una capçalera "història", dinsd'aquesta capçalera trobarem subcapçaleres
que segueixen eixa temàtica d'història
I per últim, cal respectar la jerarquia
Tots, tothom o "totum" em diuen:
"Sí, jo respecte la jerarquia"
Com diria Palomino, “¡mentira!”
(Rialles)
“¡Mentira!”
I què és respectar la jerarquia?Fem un repàs
Tenim sis nivells de capçaleres
La jerarquia no significaque hem de gastar l'H1,
després l'H2, l'H3,l'H4, successivament,
sinó que, per simplicitat,assumirem que només tenim un H1
L'estàndard HTML diu una altra cosa,però per simplicitat només n'hi ha un H1
La següent capçalera ha de ser un H2
Després d'aquesta capçalera, si necessitemuna altra capçalera, podria ser un H2,
però, aquí al mig deu haver-hi contingut
Si no hi ha contingut, no podem repetir
capçaleres del mateix nivell
L'alternativa seria posarimmediatament un H3
A aquest H3 li podria succeir un H4 si fera falta
o podríem tornar a pujar a un H2
Val? Més o menys això és lajerarquia de capçaleres
Text
Quan em pregunte: Com escriure?Sempre responc: una paraula alhora
Com caminar."Una pata, la otra, la otra, la otra"
Cal evitar les imatges de text
Què és una imatge de text?
Açò
Per què és una imatge de text?Perquè si amplie
es veuen els píxels
Ahí no hi ha text
No hi ha una informació textual
Nosaltres, amb la visió,interpretem que hi ha un text
Però, el contingut és imatge
Abans, quan no teníem lapossibilitat d'incrustar fonts,
es recorria a aquesta tècnica. Fer GIFsamb el text, amb la teva font diferent
Avui dia no cal
Això és un text real
Es busca la font i no calrecórrer a aquestes tècniques
A més, el text ha d'estaralineat a l'esquerre
Per què? Perquè és elsentit d'escriptura occidental
Els ulls estan acostumatsa què la informació
comença a “l'esquina”superior, ehhh
A "l'esquina" no, al racó superior esquerre
I això, si abans havíemvist "griegos, romanos"
resulta que els egipcis
ja ho tenien clar
Ells alineaven a la dreta perquè el seu
sentit d'escriptura erael contrari que el nostre
Si al 1100, abans de Crist, ja ho feien bé,per què gònades hui dia ho fem mal?
Per favor. "Un poquito de por favor"
I assegureu-vos quequan feu zoom fins al 200%,
no desapareix informacióo no se superposa
i que no deu aparèixer un scrollhoritzontal, scroll vertical només
Ací, he incrementat tot, més d'un 200%
Fixeu-vos que ahí dalt,
"Archivo", hi ha una superposició,
allà dalt, "Diseño",
se superposa la icona per davant
Confirmeu què passaquan amplieu massa
Quint, Enllaços
Ací, la cita m'ha costat trobar
És perillós anar sol!
Pren açò
Algú ha jugat al Zelda?
Pilleu l'acudit?El personatge es diu Link,
i li diuen "Toma esto, clic aquí"
A vegades les meues neuronessón un poquet especials
Doncs bé
respecte als enllaçoscal tindre en compte
que s'han de poderidentificar a colp d'ull
En aquest text, que l'he extretdel web de la WordCamp
"Associació Noa" és l'enllaç
Sí, hi ha un canvi de color
però depenent, no es veu
Si el subratlleu sempre es veu
i és la convenció bàsica de la Web
No és obligatòria al 100%,però és la millor pràctica
per als enllaços rodejats de text
A més, és convenient queaquest text siga descriptiu
Feu clic ací
Una persona que navega ambun lector de pantalla pot anar
saltant d'enllaç a enllaç,i escoltarà només el text de l'enllaç
Si només escolta, feu clic ací
no entén què va a passar quan faça clic
Si escrivim, com està la webde la WordCamp "Associació Noa", val
podríem millorar-hocom a "protectora Associació Noa"
Sis, imatges
Mai llig, veig les imatgesAndy Warhol
Si no puc veure, hauré de poder llegir
I què he de poder llegir?El text alternatiu
Una foto de l'últim viatge a Barcelona
Açò és en honor a laWordCamp Espanya Online
Si ho busqueu, ho entendreu
WordPress fa molt fàcil queafegim text alternatiu a les imatges
I si necessiteu orientaciósobre com ha de ser eixe text
teniu aquest enllaç on hi ha una guia
Set, multimèdia
Sempre ens quedarà WordPress TV
Eixa és la meua frase favoritaperquè m'agrada molt el "pasilleo"
Bàsicament, el multimèdiarequereix una alternativa textual
Si parlem només d'àudio, un podcast
deuria d'anar acompanyatd'una transcripció del diàleg
amb identificació de qui estàparlant i la informació sonora
Si parlem d'un vídeosense so, una animació
caldria, o bé, una alternativatextual, o àudio-descripció
Quina és més senzilla d'afegir?L'alternativa textual
Si parlem de vídeo,subtítols, àudio descripció,
alternativa textual i,a poder ser, llengua de signes
Tècnicament quinessón les més senzilles d'afegir?
Subtítols i alternativa textual
El Tomàtic està un poquet “pocho”,però us recordeu dels vídeos?
(Es tapa el nas) "Hola, Tomàtic,sóc el número de súper 8600 blablabla..."
No s'entenia res
Què feien a la tele?Apareixia el text
Hi havia una transcripció del queestaven dient per a què entengueres
D'això es tracta
Vuit, colors
El color comunica, jutja i jerarquitza
Al web de la WordCamp.Dos dies
cinc de maig, Cotxeres de Santssis de maig, Campus Ciutadella
Al text et diu ben clar on és cada cosa
Per a reforçar eixa comunicacióhan modificat el color
Per a indicar-te: Ei, són coses diferents,estan relacionades però són diferents
Tota la informació no textualha de tindre un equivalent textual
Un botó de color verd. Què significa això?
Una cosa bona o una cosa roín?
(Assitents) Bona
A Shinchan no li agradava el pebrot
per a ell és roín
Però si ha de ser una cosa bona,afegiu text, "Acceptar"
el color que reforce el missatge
Aquestes etiquetes, pegatines
que alguns de vosaltres heu trobat,
hi ha comunicació en forma decolor, però també s'ha afegit forma
És una alternativa per a les persones queno veuen bé o distingeixen bé els colors
Nou, contrast
Cada any es fa un estudi dels errors
que hi ha al "Top 1 million"de pàgines web d'eixe any
Sempre, sempre, sempre elprincipal error és el contrast
Ací la cita és fàcil
Catalunya... contrast mal...# malamente, tra, tra #
La Rosalia!
(Rialles)
Que està mal
Al web de la WordCampho han fet fenomenal
Blanc sobre negre, contrast màxim, es llig
Si ho hagueren fet en negre,no es veu un pebrot
No és necessari posar blances poden posar colors
sempre i quan hi hajaun contrast adequat
Si comparem els tres, aquest ésel que millor es veu i el que pitjor
I tenim tota una gamade colors per a jugar
WordPress, si definiu un color de text
que no contrasta bé amb el color del fons,
vos donarà un avís
No cal que vos compliqueumés amb les calculadores
(Rialles)
Si voleu saber més sobre contrast
Vos recomane la meua xarrada del'any passat a WordCamp Europe
Deu, navegació per teclat
Ací hi ha tela marineraper a trobar una cita
Camela
(Rialles)
O era Camela o era Perales
(Rialles)
"Cuando zarpa el amor", "pos bueno"
El ratolí no és l'única formade navegar per una web
Hi ha molta gent que utilitza el teclat
Tecla tabulador, principalment
Ací teniu una demo
Intente comprar una entrada al webde la WordCamp només utilitzant el teclat
Això que veieu ahí daltés el focus del teclat que
t'indica sobre quin elementactivaries ara el control
Vaig emplenant tots els camps
"Spoiler", que se m'acaba el temps
Conseguisc comprar l'entrada
Per cert, eixe correu no és meuno sé de qui és, l'he inventat
Espere, no clavar-me en un embolic
Continue
Deu més u.Açò ja és el bonus
Text: tamany
TV3. Quin "meme"?
Uhh doncs no me dut les ulleres del prop
S'enrecordeu d'aquesta senyora?
(Rialles)
No hi ha cap normasobre el tamany del text
És una llegenda urbana
Si no hi ha cap normasobre el tamany del text...
Matise, hi ha una normaque ens diu el contrast
Que depén del tamany i del pes, però
ja he explicat que això, en una altraxarrada, que no era massa significatiu
Si recorrem a les ciències de la visió,de quan jo duia els cabells curts
A 40 cm els tamanys òptims de leslletres minúscules estan entre 1,4 i 14 mm
Després vos done la referència
I deu més dos
Tipografia
I si posem la Comic Sans?
(Rialles)
I què feu tots per dins?
Nyiiiiiiii
(Rialles)
Tampoc hi ha normes sobre tipografia
Oh, "surprise"
Hi ha recomanacions
Triar una tipografia llegible
Què és llegible? No ho sé ni jo
I tinc un doctorat
Resum d'estudis. Als anys 30,
la gent llegia més ràpiden estudis que es feien
text amb serifes. Als anys60, no hi havia diferència
Però si li preguntaven a la gent,preferia llegir fonts amb serifes
Als anys 2000, no hi hadiferència, la preferència és sans
És allò al que estem acostumats
O siga que uns consells
per a triar correctament tipografies
Trieu fonts amb dissenys convencionals
Arial, Times New Roman, Verdana, Garamond,
Calibri, la de Google, lad'Android, Ubuntu, Fira Sans,
Aquestes no
Aquelles són més fàcils
Caràcters diferenciables
Proveu conjunts de caràcters quede vegades són difícils de diferenciar
Si veieu això de formaaïllada, no queda clar quins són
I, per últim,
que els detalls siguen grans
La E ha de tindre un ull proporcionat,una obertura proporcionada. La A també
Aquesta és molt difícil.Damunt és una forma que s'ha girat
Hi ha moltes fonts que la P, laB, la D i la Q són molt similars
I ara que mire, EA, EA...
"Lagrimitas del Nilonoches en vela"
(Rialles)
És que també m'agrada Eurovisió
i com és la setmanaque ve estic amb "hype"
Els dos últims punts
estan explicats a aquesta xarradaque vaig donar a WordCamp Saragossa
Per últim, treballeu amb pantalles
"Que si el color de la lente,que si el brillo, no sé cuántos..."
Xiquets i xiquetes, llagrimetes
Hidratació dels ulls,eixe és el meu consell com a sanitari
I així acabe.Moltíssimes gràcies
Un momentet
Alguna pregunta més?
(Aplaudiments)
(Presentador) Alguna pregunteta?
Tothom és tímid ohi ha preguntes per fer?
Si no, te'n llanço jo una
que jo tinc unes ganes depreguntar-te coses impressionant
(Vicent) Llança, llança.M'arreplegue el monyo que tinc calor
Què opines del dimoni Elementor,
Divi Builder i tots aquestsa nivell d'accessibilitat?
Això dona per a una xerrada,dues... vàries...
(Presentador) A val, doncs quan la dónes?
A Cartagena parlaré d'Elementor
Són ferramentes. Les ferramentesno són massa responsables per si
Sí, hi ha una part de codi queés responsabilitat de la ferramenta,
però després n'hi ha unapart que és responsabilitat
de qui està utilitzant la ferramenta
Les pistoles són bones o són dolentes?
Depèn de com les gastes, no?
(Presentador) Gràcies
Alguna pregunta?
(Assistent) Has dit que l'scrollhoritzontal és dolent per l'accessibilitat?
(Vicent) Perdó?
He entès que l'scroll horitzontalés dolent per l'accessibilitat?
(Vicent) L'scroll horitzontalés inconvenient per a llegir
per a qualsevol tipus de persona
Perquè la forma que té el cervellde llegir segueix uns patrons
Uns patrons en els qualstu tens una amplada de text
El teu ull vafent parades de fixació
Captura la informació,la processa, salta
Si tens una línia que no acabamai, que has d'anar fent scroll
estàs entrant en conflicteamb el mecanisme de lectura
Hi ha persones quetenen dificultats inherents
a l'hora de controlarels moviments oculars
Per tant, seria convenient noabusar de l'scroll horitzontal
(Assistent) Però hi podriahaver excepcions, tu creus?
(parlen els dos a l'hora)
No hi ha receptes universals al 100%
Poden haver excepcions però,si et done a llegir "El Quijote"
en una única línia en scrollhoritzontal, "¡mátame camión!"
(Rialles)
(Inintel·ligible)
Per exemple
(Assistent) Molt interessant la ponència- Gràcies
Deies que l'scroll horitzontal no és bo,
però en cas de mòbil, quan faszoom, sí que hi ha scroll horitzontal
És correcte això?
Perquè quan fas zoom a un web un 200%,
per nassos hi ha scroll horitzontal
(Vicent) Passa, ok
(Assistent) En versió d'escriptorisí que no ha d'haver-ne
(Vicent) En escriptori és més difíciljustificar que puga ser acceptable
En mòbil es pot entendre
(Assistenta) Hola, bones.Jo tenia una pregunta
Una mica encarat a la gent quanutilitza una web amb discapacitat
Hi ha sistemes que s'utilitza el movimentocular perquè tenen discapacitat física
Llavors, quan tens una web programadaque es pugui accedir mitjançant el teclat
fa que aquests sistemes que permeten
utilitzar-la amb el movimentocular sigui més fàcil?
(Vicent) Depén de comfunciona aquest sistema
En general, les ajudes tècniquesd'aquest tipus simulen un teclat
Per tant, si aquest sistema vamovent el focus, sí, estaria bé
Però és molt relatiu
De totes formes, "l'eye-tracking"també és tot un món
És un món en sí mateix
El resum és, si tu fas les cosesde la millor forma possible
aconseguiràs una compatibilitat màxima
amb totes aquelles ferramenteshardware i principalment software
que esperen complir un estàndards
(Assistenta) Gràcies- De res
(Presentador) Alguna més?
(Presentador) Tenim una altra pregunta.No m'ho puc creure
Això està clar,
però com que és untema tan "desconocido"...
Si voleu, tanquem aquí. Que sapigueuque el teniu a la vostra disponibilitat
Per si algú ara surt d'aquestasala i es troba que té deu preguntes
el teniu a la sala de ponentsa la vostra disposició una estoneta
Moltes gràcies, a mi m'ha encantat
Gràcies(Aplaudiments)
(Música)