登录查看更多内容

Last updated on 2024年10月8日

How do you design web pages that are accessible for users with screen readers?

由人工智能和领英社区提供技术支持

Web pages that are accessible for users with screen readers are not only beneficial for people with visual impairments, but also for anyone who prefers to listen to content rather than read it. Screen readers are software applications that convert text and images into speech or braille, allowing users to navigate and interact with web pages using keyboard commands or gestures. However, not all web pages are designed with screen readers in mind, and some may create barriers or confusion for users who rely on them. In this article, you will learn how to design web pages that are accessible for users with screen readers, following some basic principles and best practices.

此文章中的业界达人

由社区从 8 条内容中精选。了解更多

Sviatlana Shushko

QA Engineer | ISTQB Certified Tester | Mentor | Resource Manager
Arifa Shaheen

Product Designer | UI/UX | Figma Expert | Mobile Apps | Websites | Web Apps
Siddharth ?

Cloud Engineer @Dot | Web3 | DevOps | Cloud Security |

1 Use semantic HTML

Semantic HTML is the use of HTML elements that describe the meaning and structure of the content, rather than just the appearance. For example, using <h1> for the main heading, <p> for paragraphs, <ul> for unordered lists, and <nav> for navigation. Semantic HTML helps screen readers understand the hierarchy and purpose of the content, and provide users with shortcuts and landmarks to navigate the page. It also improves the SEO and maintainability of your web pages.

添加您的观点

Sviatlana Shushko

QA Engineer | ISTQB Certified Tester | Mentor | Resource Manager
举报内容
Semantic elements = elements with a meaning. Semantic HTML provides the user with a convenient way to navigate and interact with a website. Semantic HTML makes it easier for screen readers and other assistive technologies to navigate and interpret a webpage, providing a better experience for users with disabilities.

已翻译

赞
Arifa Shaheen

Product Designer | UI/UX | Figma Expert | Mobile Apps | Websites | Web Apps
举报内容
To design web pages that are accessible for users with screen readers, I focus on using semantic HTML elements providing descriptive alt text for images ensuring proper heading hierarchy and labeling interactive elements like buttons and forms. I also make sure that the design follows the Web Content Accessibility Guidelines (WCAG) ensuring keyboard navigability and text-to-speech compatibility.

已翻译

赞
Siddharth ?

Cloud Engineer @Dot | Web3 | DevOps | Cloud Security |
举报内容
In my opinion, designing web pages with accessibility in mind is crucial for an inclusive online experience. To cater to users with screen readers, focus on clear and concise content, utilize descriptive alt text for images, and ensure proper heading structures. Incorporating ARIA landmarks and roles enhances navigation, while maintaining a keyboard-friendly interface is key. Regular testing with screen reader software is essential for identifying and addressing potential barriers. By prioritizing accessibility, we contribute to a more user-friendly and equitable web for everyone.

已翻译

赞
Silvia Maisonave

Especialista en accesibilidad universal | Evaluadora MUSA en accesibilidad universal en equipamientos culturales | Consultora en accesibilidad digital | Arquitecta | Creadora de Habitart
举报内容
HTML, significa HyperText Markup Language, que en castellano se traduce como Lenguaje de Marcas de HiperTexto, es el lenguaje de marcado estándar establecido por la W3C (World Wide Web Consortium), o el consorcio WWW; el cual es el organismo que se encarga de estandarizar la mayoría de las tecnologías relacionadas con la web. La semántica en cualquier lenguaje hace referencia al significado de las palabras y de las oraciones. Usar el lenguaje HTML de manera correcta es super importante para que el sitio web tenga coherencia y sea fácil de comprender para todas las personas, sobre todo para las que usan tecnologías asistivas como un lector de pantalla.

已翻译

赞
Shehla Abbas

Creative UI/UX Designer | Figma Expert | Expert in UX Research | Design Thinker
举报内容
Semantic HTML involves using HTML elements that convey the meaning and structure of content, rather than focusing on presentation. For example, using <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, and <nav> for navigation. This approach helps screen readers interpret the content's hierarchy and purpose, providing users with better navigation shortcuts. It also enhances SEO and makes your web pages easier to maintain.

已翻译

赞

2 Provide alternative text

Alternative text is a brief description of the images, icons, charts, or other non-text elements on your web pages, that screen readers can read aloud or display in braille. Alternative text should convey the meaning and function of the element, not just the appearance. For example, instead of "logo.png", use "Logo of XYZ company". You can provide alternative text using the alt attribute in the <img> tag, or using the aria-label attribute for other elements. Alternative text helps users with screen readers understand the context and relevance of the images, and also serves as a fallback in case the images fail to load.

添加您的观点

Silvia Maisonave

Especialista en accesibilidad universal | Evaluadora MUSA en accesibilidad universal en equipamientos culturales | Consultora en accesibilidad digital | Arquitecta | Creadora de Habitart
举报内容
Hay que analizar muy bien que imágenes, icónos, gráficos u otros elementos, realmente estan transmitiendo información. Y solo esos elementos tendrían que tener un texto alternativo. Los elementos decorativos, o que ya tienen la información en texto, no es necesario. En el primer caso, hay que indiciar que son imágenes decorativos y en el segundo, tiene que estar el atributo "alt" pero dejarlo vacío

已翻译

赞

3 Use clear and descriptive labels

Labels are the text that identify the purpose and name of the interactive elements on your web pages, such as buttons, links, forms, or menus. Labels should be clear and descriptive, so that users with screen readers can easily recognize and activate them. For example, instead of "Click here", use "Read more about our services". You can use the <label> tag or the aria-label attribute to provide labels for your elements. Labels help users with screen readers navigate and interact with your web pages, and also improve the usability and accessibility for all users.

添加您的观点

Almudena Moreno Ramirez

UX/UI Designer | Accessibility | Inclusivity, Usability & Diversity
举报内容
Para elementos complejos como formularios o controles dinámicos, no utilices solo etiquetas descriptivas, sino también instrucciones adicionales o mensajes de ayuda. Por ejemplo, en un formulario de registro, una etiqueta como "Contrase?a" puede ir acompa?ada de un mensaje adicional como "Debe tener al menos 8 caracteres, incluir una letra mayúscula y un número". Esto no solo mejora la accesibilidad, sino que también guía a los usuarios en su interacción con el sitio, reduciendo posibles errores y confusiones

已翻译

赞

4 Ensure sufficient color contrast

Color contrast is the difference in brightness and hue between the foreground and background colors on your web pages. Color contrast affects the visibility and readability of the text and images, especially for users with low vision or color blindness. You should ensure that your color contrast meets the minimum standards set by the Web Content Accessibility Guidelines (WCAG), which is 4.5:1 for normal text and 3:1 for large text. You can use online tools such as WebAIM's Color Contrast Checker to test and adjust your color contrast. Ensuring sufficient color contrast helps users with screen readers perceive and distinguish the content on your web pages, and also enhances the aesthetic and clarity of your design.

添加您的观点

5 Avoid auto-playing media and animations

Auto-playing media and animations are the audio, video, or moving elements on your web pages that start playing automatically without user input. Auto-playing media and animations can interfere with the screen reader's output, distract or annoy users, and consume bandwidth and battery. You should avoid using auto-playing media and animations on your web pages, or at least provide users with controls to pause, stop, or mute them. You should also provide captions, transcripts, or audio descriptions for your media and animations, to make them accessible for users with screen readers. Avoiding auto-playing media and animations helps users with screen readers focus and enjoy your web pages, and also improves the performance and user experience for all users.

添加您的观点

6 Test your web pages with screen readers

The best way to ensure that your web pages are accessible for users with screen readers is to test them with screen readers yourself. Testing your web pages with screen readers will help you identify and fix any issues or barriers that may affect the accessibility and usability of your web pages. You can use popular screen readers such as JAWS, NVDA, VoiceOver, or TalkBack, depending on your operating system and device. You can also use online tools such as WAVE or axe to check and evaluate your web pages for accessibility errors and warnings. Testing your web pages with screen readers will help you design web pages that are accessible for users with screen readers, and also improve the quality and user satisfaction of your web pages.

添加您的观点

Almudena Moreno Ramirez

UX/UI Designer | Accessibility | Inclusivity, Usability & Diversity
举报内容
Aunque probar con lectores de pantalla y herramientas automatizadas es imprescindible, complementarlo con retroalimentación directa de usuarios reales que utilicen lectores de pantalla a diario proporciona una perspectiva real. Estos usuarios pueden ofrecer insights sobre problemas específicos que las pruebas automáticas o usuario no familiarizados con las herramientas podrían pasar por alto y sugerir mejoras basadas en su experiencia práctica

已翻译

赞

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Web Testing

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you design web pages that are accessible for users with screen readers?

1

2

3

4

5

6

7

1 Use semantic HTML

2 Provide alternative text

3 Use clear and descriptive labels

4 Ensure sufficient color contrast

5 Avoid auto-playing media and animations

6 Test your web pages with screen readers

7 Here’s what else to consider

Web Testing

给文章评分

感谢您的反馈

更多Web Testing相关文章

更多相关阅读内容