Dominar las bases de la accesibilidad

1

¿Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas automáticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

15

Usando HTML semántico en el contenido principal de nuestro sitio

16

Usando HTML semántico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios dinámicos

Conclusión

35

Siguientes pasos

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Usando HTML semántico en el contenido principal de nuestro sitio

15/35
Recursos

Aportes 17

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Obtuve 100%

Consejo: Para cambiar la etiqueta de apertura y cierre al mismo tiempo presiona F2 al lado del nombre de la etiqueta de apertura o cierre.

Codigo de la clase:
index.html

<main>
      <section>
        <h2 class="header">Acerca de</h2>
        <p class="intro">
          Hola! Soy Juliana 👋 Soy Colombo-Canadiense, amo los gatos y tambien
          crear cosas lindas para la web 😍 Después de estudiar comunicación
          social y ciencia política en la universidad, trabajé varios años en
          mercadeo digital hasta que aprendí a programar. Llevo un poco más de
          tres años enfocándome en front end, específicamente en JavaScript y
          accesibilidad. Sueño con una web donde todo el mundo pueda participar.
          Aquí puedes ver algunos de mis proyectos recientes y también puedes
          contactarme por si quieres hablar de tecnología, accesibilidad o
          gatos!
        </p>
        <ul class="social-media">
          <li>
            <a href="https://twitter.com/gmzjuliana" target="_blank">
              <img src="images/twitter.png" alt="Twitter" />
            </a>
          </li>
          <li>
            <a href="https://github.com/gmzjuliana" target="_blank">
              <img src="images/github-logo.png" alt="GitHub" />
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/in/gomezjuliana/" target="_blank">
              <img src="images/linkedin.png" alt="LinkedIn" />
            </a>
          </li>
        </ul>
      </section>
      <section>
        <h2 class="header">Mis proyectos</h2>
        <div class="carousel">
          <div class="arrow arrow-left"></div>
          <div class="window">
            <ul class="project-container">
              <li>
                <button>
                  <img
                    src="images/project1.png"
                    class="project project1"
                    alt="Mi primer proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project2.png"
                    class="project project2"
                    alt="Mi segundo proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project3.png"
                    class="project project3"
                    alt="Mi tercer proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project4.png"
                    class="project project4"
                    alt="Mi cuarto proyecto"
                  />
                </button>
              </li>
              <li>
                <button>
                  <img
                    src="images/project5.png"
                    class="project project5"
                    alt="Mi quinto proyecto"
                  />
                </button>
              </li>
            </ul>
          </div>
          <div class="arrow arrow-right"></div>
        </div>
      </section>
    </main>

styles.css

.intro {
  margin: 24px 196px 0;
  font-family: var(--secondary-font);
}

.project-container li {
  display: inline-block;
}

.project-container button {
  background: none;
  border: none;
}

.project {
  border-radius: 5px;
  border: 2px solid #000;
  display: inline-block;
  height: 400px;
  margin: 0 8px;
  transition: all 0.2s ease-in-out;
  width: 250px;
  object-fit: cover;
}

Si solo pones twitter, el usuario puede preguntase a cual voy,mío,o otro

Solo con un buen HTML semántico, se resuelve mucho de accesibilidad! 🙌

Algo que me gusto de esta clase es que se esta utilizando el correcto orden semantico, el cual es

<header>
	@code
</header> 

<main>
	@code
</main>

<footer>
	@code
</footer>

Algunos maestros de Platzi ponen el header y el footer dentro del main

Este curso no tendría que estar en Arquitectura Frontend

<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Con todo respeto
Que sentido tiene agregar un botón de traducción en linea si
traduce todo mal.
en informática existen muchas palabras que no son del cotidiano por lo que es casi gracioso leer dicha traducción.

Porque se dejan los <img> con las clases project1, project2 … si despues se eliminan del css?

no encuentro la herramienta de accessibility tree

Pueden usar este snippet en VSCode para crear las listas en el carrusel. Solo borran el 5, lo vuelven a escribir y presionan tab.

(li.project.project$>button>img)*5

La importancia del HTML semántico 😃

Si bien es super util e importante las correcciones en frontend, muchas de estas correcciones se visualizan en diseño UX/UI.

¿No sería conveniente introducir la lista de enlaces a las redes sociales en un nav?

Me encanta la intención de refactorizar, todo está muy bien.
Pero tengo algunas aclaratorias respecto a usar:

<section></section>

Considero no es obligatoriamente recomendable para refactorizar esta Web con section, puede emplearse un div en su lugar.

Hablando en semántica, un <section> tiene una aplicación un poco más cerrada, hablando de accesibildad no existe tampoco una distinción acertada entre una section y un div en este caso en particular.

siempre he tenido dudas con el aside 😕