{"id":9923,"date":"2025-07-02T06:20:48","date_gmt":"2025-07-02T06:20:48","guid":{"rendered":"https:\/\/www.tuwebaccesible.es\/lector-de-pantalla-funcion-ejemplos-web\/"},"modified":"2025-08-22T09:52:44","modified_gmt":"2025-08-22T09:52:44","slug":"screen-reader-function-web-examples","status":"publish","type":"post","link":"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/","title":{"rendered":"Screen Reader: What It Is, How It Works, and Practical Examples"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text uncode_shortcode_id=&#8221;138474&#8243; el_class=&#8221;summary&#8221;]In the world of digital accessibility, screen readers are a fundamental tool for people with visual impairments to navigate the internet. But how does it actually work? What do they read? And, above all, how can a web developer or designer ensure their site is accessible?[\/vc_column_text][vc_single_image media=&#8221;9679&#8243; dynamic=&#8221;yes&#8221; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;110306&#8243;][vc_column_text uncode_shortcode_id=&#8221;492357&#8243;]<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#What-is-a-screen-reader\" >What is a screen reader?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#What-is-it-for\" >What is it for?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#How-does-work-on-the-web\" >How does work on the web?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#What-do-these-tools-read\" >What do these tools read?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#Examples-of-popular-screen-readers\" >Examples of popular screen readers<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#NVDA-NonVisual-Desktop-Access\" >NVDA (NonVisual Desktop Access)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#JAWS-Job-Access-With-Speech\" >JAWS (Job Access With Speech)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#VoiceOver\" >VoiceOver<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#Windows-Narrator\" >Windows Narrator<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#Screen-readers-and-web-accessibility\" >Screen readers and web accessibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#How-does-a-blind-person-navigate-the-Internet\" >How does a blind person navigate the Internet?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#Best-practices-for-designing-sites-compatible-with-these-tools\" >Best practices for designing sites compatible with these tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.tuwebaccesible.es\/en\/screen-reader-function-web-examples\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;1&#8243; bottom_padding=&#8221;2&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; uncode_shortcode_id=&#8221;186720&#8243;][vc_column width=&#8221;1\/1&#8243;][vc_column_text uncode_shortcode_id=&#8221;572124&#8243;]<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-is-a-screen-reader\"><\/span>What is a screen reader?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A screen reader is software that interprets visual information displayed on a device&#8217;s screen and converts it into speech or digital braille output. This type of technology enables people who are blind or have low vision to navigate digital interfaces, read content, fill out forms, and use applications fluently.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-is-it-for\"><\/span>What is it for?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Its main objective is to make digital information accessible, eliminating visual barriers through an auditory or tactile interface. It&#8217;s used not only on websites but also in emails, documents, mobile apps, and more.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-does-work-on-the-web\"><\/span>How does work on the web?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Screen readers don&#8217;t read the screen itself, but rather the underlying code, especially the semantic structure of HTML. They interpret tags like &lt;h1&gt;, &lt;p&gt;, &lt;nav&gt;, and attributes like aria-label or role to provide the user with a navigable and logical experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-do-these-tools-read\"><\/span>What do these tools read?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Analyzes elements such as:<\/p>\n<ul>\n<li><strong>Hierarchical headings<\/strong> (&lt;h1&gt; to &lt;h6&gt;)<\/li>\n<li><strong>Lists<\/strong> (&lt;ul&gt;, &lt;ol&gt;)<\/li>\n<li><strong>Links and buttons<\/strong><\/li>\n<li><strong>Form labels<\/strong> (&lt;label&gt;)<\/li>\n<li><strong>Images with alt attributes<\/strong><\/li>\n<li><strong>Tables with<\/strong> &lt;th&gt;, &lt;caption&gt; <strong>tags<\/strong><\/li>\n<li><strong>ARIA roles and states<\/strong> (e.g., aria-expanded, role=&#8221;button&#8221;)<\/li>\n<\/ul>\n<p>A page with a good semantic structure radically improves the user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Examples-of-popular-screen-readers\"><\/span>Examples of popular screen readers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are several tools, each with specific features. Below are the most commonly used ones:<\/p>\n<ol>\n<li>\n<h3><strong><a href=\"https:\/\/nvda.es\/\" target=\"_blank\" rel=\"noopener\"> NVDA<\/a> (NonVisual Desktop Access)<\/strong><\/h3>\n<\/li>\n<\/ol>\n<ul>\n<li>Free and open source.<\/li>\n<li>Widely used by developers for accessibility testing.<\/li>\n<li>Compatible with Windows.<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>\n<h3><strong><a href=\"https:\/\/www.freedomscientific.com\/products\/software\/jaws\/\" target=\"_blank\" rel=\"noopener\"> JAWS<\/a> (Job Access With Speech)<\/strong><\/h3>\n<\/li>\n<\/ol>\n<ul>\n<li>Paid, but with extensive professional features.<\/li>\n<li>Excellent technical support and customization.<\/li>\n<li>Widely used in corporate environments.<\/li>\n<\/ul>\n<ol start=\"3\">\n<li>\n<h3><a href=\"https:\/\/webaim.org\/articles\/voiceover\/\" target=\"_blank\" rel=\"noopener\"><strong> VoiceOver<\/strong><\/a><\/h3>\n<\/li>\n<\/ol>\n<ul>\n<li>Integrated into Apple devices (macOS, iOS).<\/li>\n<li>Fluid and efficient.<\/li>\n<li>Compatible with touch navigation on iPhone\/iPad.<\/li>\n<\/ul>\n<ol start=\"4\">\n<li>\n<h3><span class=\"ez-toc-section\" id=\"Windows-Narrator\"><\/span>Windows Narrator<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/li>\n<\/ol>\n<ul>\n<li>Native to Windows, although with more basic functionalities.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Screen-readers-and-web-accessibility\"><\/span>Screen readers and web accessibility<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Screen readers are closely tied to compliance with standards such as <strong>WCAG 2.1 (Web Content Accessibility Guidelines)<\/strong> and the<strong> <a href=\"https:\/\/www.tuwebaccesible.es\/en\/european-accessibility-act-of-2025\/\">EAA (European Accessibility Act)<\/a><\/strong>. These standards recommend:<\/p>\n<ul>\n<li>Use headings and lists correctly.<\/li>\n<li>Ensure all interactive elements (buttons, links) have accessible labels.<\/li>\n<li>Include descriptive alt text for images.<\/li>\n<li>Avoid content that relies solely on color or visual elements.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How-does-a-blind-person-navigate-the-Internet\"><\/span>How does a blind person navigate the Internet?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Blind people use keyboard shortcuts to jump through headings, lists, links, or regions of a page. For example, in NVDA, the &#8220;H&#8221; key jumps from one heading to another. This requires that the content be properly structured.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Best-practices-for-designing-sites-compatible-with-these-tools\"><\/span>Best practices for designing sites compatible with these tools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Use semantic HTML.<\/li>\n<li>Add ARIA roles and attributes only when necessary.<\/li>\n<li>Label forms correctly.<\/li>\n<li>Avoid inaccessible elements such as uncontrollable automatic sliders.<\/li>\n<li>Test your site with real screen readers.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Screen readers are not only an inclusion tool, but also an indicator of good website quality. An accessible site not only improves the experience for people with visual impairments, but is also clearer, more navigable, and more useful for all users, including the AIs that process digital content.<\/p>\n<p>Is your site truly accessible? It&#8217;s time to check it.[\/vc_column_text][\/vc_column][\/vc_row][vc_section overlay_alpha=&#8221;50&#8243; content_parallax=&#8221;0&#8243; uncode_shortcode_id=&#8221;177483&#8243;][vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;1&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; content_parallax=&#8221;0&#8243; uncode_shortcode_id=&#8221;221572&#8243; el_id=&#8221;accordion-preguntas-frecuentes&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_custom_heading text_font=&#8221;font-179873&#8243; text_height=&#8221;fontheight-50&#8243; uncode_shortcode_id=&#8221;109936&#8243;]Frequently Asked Questions (FAQs)[\/vc_custom_heading][vc_accordion sign=&#8221;plus&#8221; sign_size=&#8221;md&#8221; gutter_simple=&#8221;0&#8243; uncode_shortcode_id=&#8221;479743&#8243; el_class=&#8221;secondary-accordion-ADA&#8221; active_tab=&#8221;0&#8243;][vc_accordion_tab gutter_size=&#8221;2&#8243; column_padding=&#8221;2&#8243; title=&#8221;What is the best for beginners?&#8221; tab_id=&#8221;1730199680-1-7809ac-f5f9&#8243;][vc_column_text uncode_shortcode_id=&#8221;122187&#8243;]NVDA is an excellent choice for beginners: it&#8217;s free, easy to install, and has good documentation in Spanish.[\/vc_column_text][\/vc_accordion_tab][vc_accordion_tab gutter_size=&#8221;2&#8243; column_padding=&#8221;2&#8243; title=&#8221;How do readers interpret HTML elements?&#8221; tab_id=&#8221;1730199680-2-9809ac-f5f9&#8243;][vc_column_text uncode_shortcode_id=&#8221;900133&#8243;]Readers analyze the structure of the code, recognizing tags such as headings, lists, buttons, and links, allowing them to build a &#8220;logical view&#8221; for the user.[\/vc_column_text][\/vc_accordion_tab][vc_accordion_tab gutter_size=&#8221;2&#8243; column_padding=&#8221;2&#8243; title=&#8221;What are the differences between NVDA and JAWS?&#8221; tab_id=&#8221;1730200849428-2-309ac-f5f9&#8243;][vc_column_text uncode_shortcode_id=&#8221;206913&#8243;]JAWS is more comprehensive in advanced features, but it requires a paid license. NVDA is free and widely used by the developer community for testing and training.[\/vc_column_text][\/vc_accordion_tab][vc_accordion_tab gutter_size=&#8221;2&#8243; column_padding=&#8221;2&#8243; title=&#8221;Do they work on mobile devices?&#8221; tab_id=&#8221;1730200849428-2-3909ac-f5f9&#8243;][vc_column_text uncode_shortcode_id=&#8221;123084&#8243;]Yes. VoiceOver is used on iOS, and TalkBack is used on Android. Both allow for accessible touch navigation.[\/vc_column_text][\/vc_accordion_tab][vc_accordion_tab gutter_size=&#8221;2&#8243; column_padding=&#8221;2&#8243; title=&#8221;What happens if an image doesn&#8217;t have an alt?&#8221; tab_id=&#8221;1730200849428-2-3309ac-f5f9&#8243;][vc_column_text uncode_shortcode_id=&#8221;476238&#8243;]The reader can ignore it, read the file name (if visible), or leave it blank. That&#8217;s why it&#8217;s crucial to use descriptive alt text.[\/vc_column_text][\/vc_accordion_tab][\/vc_accordion][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/1&#8243;][uncode_block id=&#8221;5789&#8243;][\/vc_column][\/vc_row][\/vc_section]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text uncode_shortcode_id=&#8221;138474&#8243; el_class=&#8221;summary&#8221;]In the world of digital accessibility, screen readers are a fundamental tool for people with visual impairments to [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":10461,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[136],"tags":[],"class_list":["post-9923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hot-news"],"acf":[],"_form":null,"_mail":null,"_mail_2":null,"_messages":null,"_additional_settings":null,"_locale":null,"migrate_from_cf7_redirect":null,"_hash":null,"_links":{"self":[{"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/posts\/9923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/comments?post=9923"}],"version-history":[{"count":4,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/posts\/9923\/revisions"}],"predecessor-version":[{"id":10465,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/posts\/9923\/revisions\/10465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/media\/10461"}],"wp:attachment":[{"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/media?parent=9923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/categories?post=9923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tuwebaccesible.es\/en\/wp-json\/wp\/v2\/tags?post=9923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}