1 of 80

En un contenido web perfecto manda la semántica y no el aspecto

#WCCT24

2 of 80

Consultor de accesibilidad web

Vicent Sanchis Jurado

vicentsanchis.com/redes

#WCCT24

3 of 80

#WCCT24

4 of 80

#WCCT24

5 of 80

CC BY SA 4.0 Sikander

#WCCT24

6 of 80

CC BY SA 4.0 Sikander

#WCCT24

7 of 80

CC BY SA 4.0 Sikander

#WCCT24

8 of 80

CC BY-NC 2.0 Alex Foster

#WCCT24

9 of 80

#WCCT24

10 of 80

CC BY-NC 2.0 AdamChandler

#WCCT24

11 of 80

Algo falla

#WCCT24

12 of 80

#WCCT24

13 of 80

Algo falla

#WCCT24

14 of 80

Algo falla

#WCCT24

15 of 80

Falla la SEMÁNTICA

#WCCT24

16 of 80

Semántica

¿Qué es la semántica?

#WCCT24

17 of 80

Semántica

User UI and Controls

The Accessibility Quest^TM is a first-person game where you don’t move a character but interact with the environment displayed before your eyes.

Your tool for navigating in search of freedom is called ‘web browser’.

Through the web browser, you will travel from dungeon to dungeon, facing enemies, traps, and puzzles.

The Accessibility Quest^TM and the web browser support different official peripherals for your personal infotainment system:

Keyboard
Mouse
Joystick

All are valid to complete your adventure.

Check with your local distributor for the availability and pricing of each of these peripherals.

IMPORTANT: The Accessibility Quest^TM can be played with any control peripheral. The difficulty of the game may vary depending on the player and the control peripheral.

User UI and Controls

The Accessibility QuestTM is a first-person game where you don’t move a character but interact with the environment displayed before your eyes.

Your tool for navigating in search of freedom is called ‘web browser’.

Through the web browser, you will travel from dungeon to dungeon, facing enemies, traps, and puzzles.

The Accessibility QuestTM and the web browser support different official peripherals for your personal infotainment system:

- Keyboard

- Mouse

- Joystick

All are valid to complete your adventure.

Check with your local distributor for the availability and pricing of each of these peripherals.

IMPORTANT: The Accessibility QuestTM can be played with any control peripheral. The difficulty of the game may vary depending on the player and the control peripheral.

#WCCT24

18 of 80

Semántica

El HTML transmite significado en lugar de aspecto

#WCCT24

19 of 80

Semántica

HTML es un lenguaje de marcado

El contenido se rodea de <etiquetas> que describen su significado/propósito

#WCCT24

20 of 80

Semántica

HTML es un lenguaje de marcado

El contenido se rodea de <etiquetas> que describen su significado/propósito

#WCCT24

21 of 80

Semántica

Los procesadores de HTML interpretan el código para exponer el contenido a

Diferentes navegadores
Diferentes dispositivos
Motores de búsqueda
Herramientas de asistencia

#WCCT24

22 of 80

Semántica

#WCCT24

23 of 80

Semántica

#WCCT24

24 of 80

Semántica

#WCCT24

25 of 80

Veamos la semántica de los bloques de texto

#WCCT24

26 of 80

Párrafo

#WCCT24

27 of 80

Párrafo

<p>

Secuencia de contenido de frases que forma un bloque de texto con una o más oraciones que tratan un tema particular.

También se puede usar para agrupaciones temáticas más generales.

#WCCT24

28 of 80

Párrafo

#WCCT24

29 of 80

Encabezado

#WCCT24

30 of 80

Encabezado

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

#WCCT24

31 of 80

Encabezado

#WCCT24

32 of 80

Encabezado

#WCCT24

33 of 80

Encabezado

#WCCT24

34 of 80

Lista

#WCCT24

35 of 80

Lista

Desordenadas

<ul>

Ordenadas

<ol>

#WCCT24

36 of 80

Lista

Desordenadas

<ul>

Ordenadas

<ol>

#WCCT24

37 of 80

Lista

#WCCT24

38 of 80

Lista

#WCCT24

39 of 80

Lista

#WCCT24

40 of 80

Cita

#WCCT24

41 of 80

Cita

Sección de contenido que se extrae de otra fuente

#WCCT24

42 of 80

Cita

<cite>

El nombre de la obra de la cual se extrae el fragmento de contenido

#WCCT24

43 of 80

Cita

#WCCT24

44 of 80

Código

#WCCT24

45 of 80

Código

<pre>

Representa el texto exactamente como se ha escrito

#WCCT24

46 of 80

Código

:-=+****+=-.

:*%%%%%%%%%%%%%%%%%#+:

-%%%%%@%%%%%%@%%%%%%%%%%*=.

:+%%@%@%%%%@%@%@%%%%%%%@%%*-

.*%@%@%%%%@%%%%%%%%%%@%%%%*:

=%@%@%%%@%@%@%%%%%%@%%@%%#:

.##**+++=+++**#%%%%@%%%@%@%#.

**========+**#*==*%@@%@%%%=.

=%#**********+===+**+#@%%%%*

=**============++++**=***%%%%*.

:*%%*******+===========+****%%%#:

:=**+**======+********+======*%%%%#=::::.

+*+===#**********++===*########%@@@@@@@@@%-

=%#**##%*=:::=%*::-+#%%%##@@@%%########%@@%-

.*@%=-:::---::--++*%@%%**#@*=*@@@%*+==+#@@@%=

:*@@*=%*-*@@@#**************@#*===+#@@@@@@@%=.

=#%@@@@#*#%%#*#**************%%=:+%+===*@%%#-:

:%@%#%%#*****#%##%%%%%%%%*#%%%%***==*##**%@%*.

-#@@@@%###%%%**#%-+#%%*%%#%+####*####@%**%#.

=%+:=#*==-:--%*:::+#+#%%*%+*%*##%*%+*%*#%#%:

*@*==**=:-=***#*====%*++%#%*++******+*%%#*##=

:%#+**=--:-=**+: :--==*#%%*%*#%%*%*%**%*#%%#.

:*#-:.:--. =*+=-. : :---=%%@%++*#**++#*+*%%%%=

+%=: :===: :====: :: ----=%*+*#*+%@#**##*%%%@#:

:*#=:.:====. :----. :- :---==%*%%###%*##***%#%*

-#*==. =++=: ::-:..::.::::==+%#*#*+%%%%*+*#***

-#*=+: :+*=-: .::: ::: ::::====**+=+%*#*%%###*=

::=%#=++: =*-==. ::.:::..::::========+%%%%**%%%#=

-#@@@@%==*=. =:==-. :.=#%*=-::====++****##%%**%%%*-

:%+:::+%+=*=. :===-. *%-:-%@=-==%@*=:::=*@@%%#%%%#:

-%%=::::=%*--=..====:..%+::::=@#%#-:::::::::=**%#***.

:*@*:::::=##+=:.::::..:%#-::::=@*:::::::::::-**%*%#=

:*@#=::::-#*++========*@-:::::*%:::::::::::-**%**-

.=%%*-:::=%*=========+@*:::::=@-:::::::::-*%##%*=

:*@@*=::*@@#+=======@*:::::*@::::::::=*@@###%*+

.+%@@@@%=*%%#*++==@*:::::%#:::-=+#%%@@*:##%#*.

::: .-%@@@@@#-:::%@@@@@@@%=+@@%*.+*%#*=

:*%@@%=: +*%#%@@@@@@@@%%#@@*=+@@@#*.:#*##+

-%@#**#@@#: =*#%#%#%#%%%#@@@#==*@@%%#*:.**##*:

+@#=====*@%=:*#*#%##=#%@@@#+=*%@*=##**+ :++*#+

-%@*=====*%@%%%%++%@@@@#*==*%@%- .=+=-- ..

-%@%*=====+*%%%%%%#*===*#@@*-

.=%@@#*===========+*%@@%+.

:+%@@@%%#**#%@@@@%=.

.:=*%%%#*-.

#WCCT24

47 of 80

Código

:-=+****+=-.

:*%%%%%%%%%%%%%%%%%#+:

-%%%%%@%%%%%%@%%%%%%%%%%*=.

:+%%@%@%%%%@%@%@%%%%%%%@%%*-

.*%@%@%%%%@%%%%%%%%%%@%%%%*:

=%@%@%%%@%@%@%%%%%%@%%@%%#:

.##**+++=+++**#%%%%@%%%@%@%#.

**========+**#*==*%@@%@%%%=

=%#**********+===+**+#@%%%%*

=**============++++**=***%%%%*.

:*%%*******+===========+****%%%#:

:=**+**======+********+======*%%%%#=::::.

+*+===#**********++===*########%@@@@@@@@@%-

=%#**##%*=:::=%*::-+#%%%##@@@%%########%@@%-

.*@%=-:::---::--++*%@%%**#@*=*@@@%*+==+#@@@%=

:*@@*=%*-*@@@#**************@#*===+#@@@@@@@%=.

=#%@@@@#*#%%#*#**************%%=:+%+===*@%%#-:

:%@%#%%#*****#%##%%%%%%%%*#%%%%***==*##**%@%*.

-#@@@@%###%%%**#%*-+#%%*%%#%+####*####@%**%#.

=%%+:=#*==-:--%*:::+#+#%%*%+*%*##%*%+*%*#%#%:

*@*==**=:-=***#*====%*++%#%*++******+*%%#*##=

:%#+**=--:-=**+: :--==*#%%*%*#%%*%*%**%*%*#%%#.

:*#-:.:--. =*+=-. : :---=%%@%++*#**++#*+*%%%%=

+%=: :===: :====: :: ----=%*+*#*+%@#**##*%%%@#:

:*#=:.:====. :----. :- :---==%*%%###%*##***%#%*

-#*==. =++=: ::-:..::.::::==+%#*#*+%%%%*+*#***

-#*=+: :+*=-: .::: ::: ::::====**+=+%*#*%%###*=

::=%#=++: =*-==. ::.:::..::::========+%%%%**%%%#=

-#@@@@%==*=. =:==-. :.=#%*=-::====++****##%%**%%%*-

:%%+:::+%+=*=. :===-. *%-:-%@=-==%@*=:::=*@@%%#%%%#:

-%%=::::=%*--=..====:..%+::::=@#%#-:::::::::=**%#***.

:*@*:::::=##+=:.::::..:%#-::::=@*:::::::::::-**%*%#=

:*@#=::::-#*++========*@-:::::*%:::::::::::-**%**-

.=%%*-:::=%*=========+@*:::::=@-:::::::::-*%##%*=

:*@@*=::*@@#+=======@*:::::*@::::::::=*@@###%*+

.+%@@@@%=*%%#*++==@*:::::%#:::-=+#%%@@*:##%#*.

::: .-%@@@@@#-:::%@@@@@@@%=+@@%*.+*%#*=

:*%@@%=: +*%#%@@@@@@@@%%#@@*=+@@@#*.:#*##+

-%@#**#@@#: =*#%#%#%#%%%#@@@#==*@@%%#*:.**##*:

+@#=====*@%=:*#*#%##=#%@@@#+=*%@*=##**+ :++*#+

-%@*=====*%@%%%%++%@@@@#*==*%@%- .=+=-- ..

-%@%*=====+*%%%%%%#*===*#@@*-

.=%@@#*===========+*%@@%+.

:+%@@@%%#**#%@@@@%=.

.:=*%%%#*-.

#WCCT24

48 of 80

Código

<code>

Representa cualquier cadena de texto que un ordenador pueda reconocer

#WCCT24

49 of 80

Código

"<ol>

<li>Elemento 1</li>

<li>Elemento 2

<ol>

<li>Elemento 2.1</li>

<li>Elemento 2.2</li>

</ol>

</li>

</ol>"</code></pre>

#WCCT24

50 of 80

Código

"<ol>

<li>Elemento 1</li>

<li>Elemento 2

<ol>

<li>Elemento 2.1</li>

<li>Elemento 2.2</li>

</ol>

</li>

</ol>"</code></pre>

#WCCT24

51 of 80

Código

"<ol>

<li>Elemento 1</li>

<li>Elemento 2

<ol>

<li>Elemento 2.1</li>

<li>Elemento 2.2</li>

</ol>

</li>

</ol>"</code></pre>

#WCCT24

52 of 80

Código

#WCCT24

53 of 80

Detalles

#WCCT24

54 of 80

Detalles

<p>

Acordeón

#WCCT24

55 of 80

Detalles

<p>

Texto visible (resumen del contenido oculto)

#WCCT24

56 of 80

Detalles

<p>

#WCCT24

57 of 80

Detalles

#WCCT24

58 of 80

Detalles

#WCCT24

59 of 80

Detalles

#WCCT24

60 of 80

Preformateado

#WCCT24

61 of 80

Preformateado

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

#WCCT24

62 of 80

Párrafo de cita

#WCCT24

63 of 80

Párrafo de cita

Sección de contenido que se extrae de otra fuente

#WCCT24

64 of 80

Párrafo de cita

Sección autocontenida, contenido autónomo pero relacionado con el contenido de la página

#WCCT24

65 of 80

Párrafo de cita

#WCCT24

66 of 80

Párrafo de cita

#WCCT24

67 of 80

Tabla

#WCCT24

68 of 80

Tabla

<table>

Representa datos tabulados

#WCCT24

69 of 80

Tabla

WordPress solo permite hacer tablas simples con una fila como cabecera

#WCCT24

70 of 80

Tabla

#WCCT24

71 of 80

Verso

#WCCT24

72 of 80

Verso

#WCCT24

73 of 80

Entonces,�¿la amáis o la vendéis?

Subtítulo

#WCCT24

74 of 80

La respetáis

Subtítulo

#WCCT24

75 of 80

Bonus

Subtítulo

#WCCT24

76 of 80

Imagen

#WCCT24

77 of 80

Imágen

#WCCT24

78 of 80

Imágen

#WCCT24

79 of 80

Cita

#WCCT24

80 of 80

Cita

Contiene información sobre la autoría de la sección y los derechos o enlaces a otros documentos

#WCCT24