Categories
Whiteboard viernes

SEO y accesibilidad: SEO técnico [Serie Parte 3]

Esperamos que haya disfrutado esta serie en SEO y accesibilidad. En la cuota final, Cooper le muestra cómo las estrategias técnicas de SEO que implemente en todo el sitio pueden ayudarlo a hacerlo más perceptible, operable, comprensible y robusto.

Photo of the whiteboard with handwritten notes on how technical SEOs can focus on accessibility.
Haga clic en la imagen de la pizarra de arriba para abrir una versión más grande en una nueva pestaña!

Transcripción de video

Hey, Moz Fans. Bienvenido a la última edición de la pizarra del viernes. Soy Cooper Hollmaier. He estado haciendo SEO desde 2016, y hoy trabajo para un gran minorista al aire libre que ayuda a nuestra estrategia técnica de SEO, cobra vida. Muchas gracias por asistir a esta serie sobre SEO y accesibilidad.

Espero que haya obtenido una amplia perspectiva y nuevos consejos y trucos para crear contenido que noNly está resonando con su audiencia, se desempeña bien en la búsqueda, pero también es accesible para más personas. Hoy vamos a hablar sobre el SEO técnico y la accesibilidad.

SEO técnico y accesibilidad

Dividas. La última vez que hablamos de

directrices de accesibilidad de contenido web

, y Puede recordar que los cuatro principios de WCAG son perceptibles, operables, comprensibles y robustos.

Perceptible

Como SEO técnico, es probable que esté más preocupado por perceptible porque sus operaciones diarias, su flujo diario de trabajo implica asegurarse de que las páginas, El contenido, las experiencias que está creando son accesibles para los motores de búsqueda y los motores perceptibles para buscar.

Muchas veces cuando pasamos por recomendaciones de SEO o SEOAuditorías, escucho muchos temas comunes, como la etiqueta de encabezado se hornea en la imagen y por lo tanto, un motor de búsqueda no puede verlo, o el contenido que estoy produciendo es visible para los bots, pero no es visible para las personas. Estos son problemas con la percepción del nivel base. Quiero que tomes la mentalidad y consideres que también lo solicitas a toda tu audiencia. Entonces, ¿puede todos sus personas que esperan participar con su servicio o producto o experiencia, son capaces de percibir todas las cosas que tiene para ofrecer a nivel de base?

1. Estilos Image of handwritten list of style changes including native text, no keyword stuffing, and color contrast.

Algunas cosas que podría estar pensando sería similar a lo que estaría viendo en esta auditoría, como: ¿Es visible todo mi texto en la página? ¿Es el texto activo? ¿Es nativo de la página, por lo que puedo seleccionarlo y copiarlo y pegarlo, o está cocido into La imagen e inalcanzable por tecnología de asistencia o navegadores o ¿qué tienes? También puede estar pensando: ¿Es el contraste de color con mi fondo y mi texto, es el contraste correcto?

¿Hay suficiente claridad y crujidez entre mis elementos de diseño? Si las cosas parecen un poco borroso o no está del todo claro, se puede acceder a algo a un motor de búsqueda y un usuario, regrese a la placa de dibujo y averigüe cómo hacer que ambas cosas funcionen bien.

Image of handwritten list of rich media improvements. 2. Medios ricos

También nos gusta agregar imágenes, texto, video y audio a las páginas que estamos construyendo para nuestros clientes. Es importante que estos elementos ricos, ahora que estamos más allá del texto básico y los elementos de estilo, los elementos ricos que estamos poniendo en la página son perceptibles por todos.de tus usuarios también. Hay un par de cosas que podemos hacer para que eso suceda. Para las imágenes, dándoles una alternativa de texto y proporcionar algo que además de esa imagen lo ayudará a ver a ser visto por un lector de pantalla y comprendido por alguien que tiene una discapacidad visual.

También nombrar cosas con nombres amigables con los hombres en comparación con “DSC1352.JPEG”, va a ayudar a los motores de búsqueda, así como la tecnología de asistencia, ver esa imagen y entender qué es. Contexto en la página, también es importante que ponga imágenes en las páginas que agreguen valor. Desea ilustrar un usuario con un contenido adicional para darles un poco más de un sentimiento o darles un poco más de contexto sobre lo que está hablando. Agregar imágenes para valor, no solo para aparecer en la búsqueda de imágenes de Google.

¿Qué hay del video?Así que el video es un poco diferente. El video tiene una serie de imágenes en movimiento. Entonces, cada vez que pienso en el movimiento, me creo: “¿Cómo puedo asegurarme de que si un usuario quiere detener este movimiento, pueden?”

Tener controles de reproducción claros es crucial cuando estamos hablando de accesibilidad, además de tener una excelente experiencia de reproductor de video para cualquier usuario. Además, los equivalentes síncronos para esas alternativas de texto. Hablamos de imágenes que tienen alternativas de texto. Los videos también deben tener alternativas de texto, pero deben sincronizarse con el tiempo con ese video. De lo contrario, no tendrán sentido en el contexto.

luego asegurándose de que sean distinguibles. Esto es lo mismo entre video y audio. Queremos asegurarnos de que el primer plano y el fondo se distingan fácilmente.Guishable entre sí. Si su video se siente embarrado, si su audio se siente embarrado y me lleva esforzándome o tense los ojos para poder ver ese contenido y entender lo que está sucediendo, necesitas ser un poco más crujiente, un poco más claro en Esas dos distinciones.

Luego, luego en las transcripciones de texto. Al igual que necesita subtítulos cerrados para videos, para audio, desea tener una transcripción de texto, por lo que si quizás en un lugar ruidosa y no puedo escuchar el audio o no tengo los auriculares conectados o necesité Para usar la tecnología de asistencia, puedo acceder a ese audio.

Estas son todas las cosas que verás, ya que estás revisando el código como un SEO técnico y debes tener en cuenta.

Si no tiene estas cosas, en su sitio web, le permitiríaPara hacer esas preguntas, las preguntas difíciles como: Oye, ¿hay una alternativa de texto a esta imagen? ¿Cómo será una persona con una discapacidad visual, cómo una persona con una discapacidad auditiva accederá a estas cosas? Photo of hand drawn images comparing different page structures.

3. Estructura de la página

Tres y cuatro son sobre la estructura de la página y el HTML semántico. Así que esto es un poco menos sobre esto es esto perceptible y es comprensible.

Es una especie de pastoreo de los comprensibles, pero también debería ser un poco sobre la percepción. Tener un montón de H1 en una página, como puede imaginar, un motor de búsqueda podría percibirlo como muy confundido, ¿verdad? Son como, está bien, hay un montón de H1 en esta página. No estoy realmente seguro de qué se trata esta página. Agregar estructura y encabezados en cascada para indicar las relaciones entre padres y hijosVa a ayudar a que su contenido sea un poco más perceptible. Va a ser más fácil de entender lo que está sucediendo.

4. HTML semántico

Lo mismo con HTML semántico. Tendemos a poner muchas diveces y abrevianos y elementos no identificables en nuestro HTML. Pero al marcarlos de manera más apropiada, para que entendemos cuál es su significado, comprenda cuáles tienen esas etiquetas contienen, ya sea que sea la navegación o formularios o tablas, siempre que la capa adicional de información y la comprensión permitirán los motores de búsqueda y la tecnología de asistencia. Para poder analizar esas cosas, para permitirles percibir las cosas que está poniendo en su página que son diferentes entre sí y brindan una experiencia más rica.

Operable

Está bien, así que podemos percibir lacontenido. Pero, ¿cómo nos aseguramos de que sea operable? Photo of hand drawn HTML sitemap example.

1. HTML SITEMAPS

Un par de recomendaciones de SEO que a menudo veo que la fabricación de personas se construye un sitio Mapa del sitio HTML y ponga en su página. Muchas veces, podrías obtener un poco de devolución de eso. El mapa del sitio HTML es super importante que conocemos para SEO, para la detección de esas páginas en lo profundo de la jerarquía de nuestro sitio web. Photo of hand drawn breadcrumbs example.

Sabemos que las migas de pan también son bastante importantes para la descubribilidad. Ambos elementos ayudan a los usuarios con la tecnología de asistencia mejor navegar por el sitio web. El mapa del sitio HTML permite si su menú no incluye todas las páginas de su sitio web o si es confuso o está utilizando Javascript o alguna otra tecnología que no es accesible a mi pila de tecnología.

2. Un panmigas

Photo of hand drawn computer and keyboard.

Luego, las migas de pan nos permiten analizar la página arriba y abajo, digamos que es una página de búsqueda de productos en un sitio web de comercio electrónico sin tener que regresar al menú y luego analice nuevamente cada elemento del menú. Por lo tanto, estos dos son súper importantes para la navegación, pero también especialmente para las personas que navegan con un teclado y usan tecnología de asistencia.

3. Desarrolle el teclado: primero

Photo of handwritten HTML code specifying LANG=

Luego, una cosa no seo, pero es importante, sin embargo y sea relatable, desarrolle su sitio web y su experiencia en el teclado primero. No todos tienen un ratón o la capacidad de usar un mouse debido a una discapacidad de movimiento o debido a un deterioro o por falta de tecnología o hardware. Así que asegúrate de desarrollar primero el teclado, y vas a amablesde encapsular más de aquellas personas que buscan encapsular con su audiencia.

Comprensible

Photo of hand drawn web page examples. 1. Idioma

Comprensible. Así que hablamos en el SEO internacional, cuando estamos tratando con diferentes países y diferentes idiomas, lo importante que es usar el HTML en nuestra página para significar cuál es el idioma de la página. Ayuda a los motores de búsqueda, brindar los resultados correctos en el derecho, tal vez el contexto nacional o internacional. También ayuda a los lectores de pantalla a leer su contenido en voz alta en el idioma correcto.

Photo of hand drawn page with an 2. Diseño de navegación

Luego, el diseño de la navegación y la intersticial, creo que son bastante comunes, pero a nadie le gusta una navegación o un diseño de un sitio web que es confuso. Cuanto más fácil lo hagas, más fácil esPara que las personas conversen o hagan lo que está buscando para que hagan con este sitio web, ya sea que se aprenda, ya sea que esté comprando, ya sea que participe en un servicio. Eso es más fácil cuando la navegación y el diseño se optimizan y no estamos usando palabras diferentes en diferentes lugares para significar lo mismo. Es aún más importante para las personas con tecnología de asistencia.

3. InterSTICIALES

Photo of hand drawn example of JSON+LD validation.

InterSTICIALES, a nadie le gustan los pop-ups en nuestra cara, que no nos permiten navegar por el resto del sitio web. Google tampoco los ama. Pero especialmente a las personas con tecnología de asistencia, si no estamos tratando esos emergentes de la manera correcta, vamos a terminar en un escenario donde los usuarios pueden estar en una trampa de teclado y no pueden salir de la intersticial , o no entienden queIncluso se coloca una intersticial en la página. Por lo tanto, es importante ser muy consciente cuando se usan intersticiales.

Robusto

Photo of hand drawn image of web pages resizing for mobile, medium screens, and large screens. Por último, pero no menos importante es robusto. ¿Cómo nos aseguramos de que el contenido que estamos poniendo en la página sea compatible con una gran variedad de dispositivos y escenarios?

1. Validación

Photo of hand drawn web page with arrows to indicate different interactions available.

El uso de HTML adecuado es una gran manera de hacerlo. Puede usar un validador y puede ver su HTML, su CSS y su JSON-LD. Creación del código correcto y, especialmente, cuando está utilizando HTML semántico, así que proporciona un significado a ese código, tendrá mucha mejor experiencia y todo lo que su edificio es más digestible.

2. Responsivo

¿Su sitio web es responsable? Ya deberías estar haciendo esto. Pero si no lo eres, makE Claro que está operando en un dispositivo móvil y un escritorio y un dispositivo de tableta y el diseño permanece igual, tal vez se reduzca o se vuelva a imaginar de una manera diferente. 3. Interactible

Asegúrese de que sea interactuable. Si un usuario quiere poder acercarse porque tienen una discapacidad visual o quieren poder cambiar los colores, ¿su tecnología en su sitio web les permite hacer eso? Debería. Si haces estas tres cosas en la parte inferior, creo que va a hacer un montón de levantamiento pesado y tendrás que hacer mucho menos trabajo porque has incorporado en el marco, la fundación para ser accesible . Esso técnico y accesibilidad. Si tiene más preguntas o desea algunas herramientas de validación, hay algunas en el lado derecho aquí, oR Puede pegarme en Twitter @cooperhollmaier para obtener algunos consejos más. Pero muchas gracias por escuchar la pizarra del viernes y la accesibilidad junto con SEO. Espero que tomes esto y te vuelves más e inclusivo en la forma en que estás haciendo SEO en el futuro. Transcripción de video por SpeechPad.com Recursos HTML Sitemaps WCAG Validación de marcado Pruebas de resultados enriquecidos Asociación Internacional de Profesionales de Accesibilidad

Leave a Reply

Your email address will not be published. Required fields are marked *