# The A11Y Project

A community-driven effort to make digital accessibility easier.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Automated tools can ensure full accessibility compliance

DevFeed: [Automated tools can ensure full accessibility compliance](<https://devfeed.tech/articles/automated-tools-can-ensure-full-accessibility-compliance-9375.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/automated-tools-can-ensure-full-accessibility-compliance/>)

Author: Melwyn Joseph

Published: 2025-03-10T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Automation](<https://devfeed.tech/topics/automation.md>), [axe DevTools](<https://devfeed.tech/topics/axe-devtools.md>), [Usability](<https://devfeed.tech/topics/usability.md>), [alt text](<https://devfeed.tech/topics/alt-text.md>), [Forms](<https://devfeed.tech/topics/forms.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-compliance](<https://devfeed.tech/tags/accessibility-compliance.md>), [accessibility-tools](<https://devfeed.tech/tags/accessibility-tools.md>), [audits](<https://devfeed.tech/tags/audits.md>), [automation](<https://devfeed.tech/tags/automation.md>), [axe-devtools](<https://devfeed.tech/tags/axe-devtools.md>), [efficiency](<https://devfeed.tech/tags/efficiency.md>), [standards](<https://devfeed.tech/tags/standards.md>), [testing](<https://devfeed.tech/tags/testing.md>), [usability](<https://devfeed.tech/tags/usability.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

Automated accessibility tools can quickly detect straightforward issues such as missing alt text, poor color contrast, and incorrect heading structures, making them useful for initial audits. However, they cannot reliably assess matters requiring human judgment, including meaningful alternative text, keyboard-navigation usability, and the clarity of form instructions or error messages. Full accessibility compliance requires automated scans combined with manual reviews, usability testing, user feedback, and ongoing training.

### Source excerpt

Can automated tools guarantee full compliance with accessibility standards like WCAG? The short answer is no. While automated accessibility tools are often marketed as comprehensive solutions, they are only part of the equation. What automated tools can do Automated tools are good at detecting straightforward accessibility issues, such as missing alt text, poor color contrast, and incorrect heading structures. Tools like WebYes and axe DevTools are examples of automated tools that efficiently flag these issues. The speed and efficiency of automated accessibility tools make them ideal for initial audits. They can scan hundreds of web pages in minutes, pinpointing the most straightforward problems--what we often call "low-hanging fruit." The results of the initial audit provide a strong foundation, allowing teams to prioritize critical fixes and plan for deeper manual testing to address more complex accessibility issues. What automated tools miss While automated tools are excellent for identifying straightforward issues, they cannot evaluate issues that require human judgment, such as: Whether alternative text for images is meaningful. The logical flow and usability of keyboard navigation. The clarity of instructions or error messages for forms. When human judgment is missing, important accessibility issues can go unnoticed, making the experience difficult and frustrating for users with disabilities. This can prevent them from fully accessing or using the website as intended. Studies highlight this gap. A Government Digital Service (GDS audit revealed that even the best automated tools detect only 30-40% of known accessibility issues. Accessibility expert Karl Groves notes that only 25 to 33% of WCAG guidelines can be reliably tested with automation. Striking the right balance The most effective approach combines automation with manual efforts. Automated scans identify technical issues, while manual reviews and usability tests uncover the subtle barriers tools miss. By

## What is Semantic HTML?

DevFeed: [What is Semantic HTML?](<https://devfeed.tech/articles/what-is-semantic-html-9425.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/what-is-semantic-html/>)

Author: David A Kennedy

Published: 2023-04-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [code](<https://devfeed.tech/tags/code.md>), [developer](<https://devfeed.tech/tags/developer.md>), [html](<https://devfeed.tech/tags/html.md>), [web](<https://devfeed.tech/tags/web.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

### AI overview

This article explains semantic HTML as choosing elements that accurately convey a page's structure and meaning. It describes how semantic elements provide implicit roles for browsers and assistive technologies, along with built-in keyboard behavior, state communication, default styling, improved search indexing, and better parsing by RSS readers and Reader mode.

### Source excerpt

A common refrain comes up often in the accessibility field. "Use semantic HTML," people say. But what does that mean and why does it matter? More importantly, what do you get with semantic HTML? What is Semantic HTML? The word "semantic" has a few meanings. In computer science, semantics provides the rules for interpreting expressions of code. In this case, semantics lays out the rules for how HTML (the code) gets interpreted. Those rules govern structure and meaning. Structure HTML stands for Hypertext Markup Language. Invented by Tim Berners-Lee as a way to link together important research documents, HTML has evolved to do much more than that. Early versions had heading elements (h1, h2, etc.), but not the structural elements like <header>, <main> and <footer>. Those came later. Each of these elements gives structure to the document, the web page. Creating semantic code means picking the right element for the job, giving your page structure. Meaning The elements also have a meaning underneath. Every element has an implicit role. For example, the <header> element has the implicit role of "banner." That means that a screen reader will read that role as a landmark. People who use screen readers can navigate by those landmarks, granting an easier way to skim the content of a page. If a developer used a <div> instead of a <header>, the implicit role would be absent, unless provided with extra code. That means the HTML won't be as useful to the machines that interpret it. What you get with Semantic HTML When you select the right element for the content you have, you get some things for free. Free as in the web platform gives it to you without any other effort. We talked about one already: Structure and meaning gets conveyed to browsers and assistive technologies. Some elements come with built in keyboard functionality, for example, the <form> element. Other elements may communicate state to the browser and assistive technology. Radio buttons and checkboxes do this. The

## The power of ChatGPT as a cognitive accessibility assistive technology for Traumatic Brain Injury survivors

DevFeed: [The power of ChatGPT as a cognitive accessibility assistive technology for Traumatic Brain Injury survivors](<https://devfeed.tech/articles/the-power-of-chatgpt-as-a-cognitive-accessibility-assistive-technology-for-traumatic-brain-injury-survivors-9416.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/the-power-of-chatgpt-as-a-cognitive-accessibility-assistive-technology-for-traumatic-brain-injury-survivors/>)

Author: Jamie Vanderwall

Published: 2023-03-14T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [ChatGPT](<https://devfeed.tech/topics/chatgpt.md>), [Large Language Model](<https://devfeed.tech/topics/llm.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [OpenAI](<https://devfeed.tech/topics/openai.md>), [Deep learning](<https://devfeed.tech/topics/deep-learning.md>), [Algorithms](<https://devfeed.tech/topics/algorithms.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [algorithms](<https://devfeed.tech/tags/algorithms.md>), [article](<https://devfeed.tech/tags/article.md>), [artificial-intelligence](<https://devfeed.tech/tags/artificial-intelligence.md>), [chatgpt](<https://devfeed.tech/tags/chatgpt.md>), [communication](<https://devfeed.tech/tags/communication.md>), [deep-learning](<https://devfeed.tech/tags/deep-learning.md>), [information-retrieval](<https://devfeed.tech/tags/information-retrieval.md>), [large-language-model](<https://devfeed.tech/tags/large-language-model.md>), [memory](<https://devfeed.tech/tags/memory.md>), [openai](<https://devfeed.tech/tags/openai.md>), [training](<https://devfeed.tech/tags/training.md>)

### AI overview

This article examines ChatGPT as a cognitive accessibility assistive technology for traumatic brain injury survivors. It describes potential uses including information retrieval, memory support, communication assistance, and cognitive training, and considers the broader impact on the disability community.

### Source excerpt

This article was written by ChatGPT with the below prompt written by Jamie Vanderwall. "Write about how ChatGPT can be used as a cognitive accessibility assistive technology specifically for traumatic brain injury survivors and how this impacts the disability community." Introduction This essay explores the use of ChatGPT as a cognitive accessibility assistive technology for traumatic brain injury (TBI) survivors, discussing the impact it has on the disability community. The essay outlines the cognitive impairments experienced by TBI survivors, and how ChatGPT can provide support in the form of information retrieval, memory aids, communication aids, and cognitive training. Traumatic brain injury (TBI) is a life-changing injury that can affect people of all ages, genders, and backgrounds. TBI can cause a range of physical, cognitive, and emotional impairments, making it difficult for people with TBI to perform daily activities, engage in social interactions, and access information. Cognitive accessibility assistive technology, such as ChatGPT, can help TBI survivors overcome some of the cognitive challenges they face and improve their quality of life. This essay will explore how ChatGPT can be used as a cognitive accessibility assistive technology specifically for TBI survivors and how it impacts the disability community. What is ChatGPT? ChatGPT is a large language model developed by OpenAI that can generate human-like responses to natural language queries. It is a type of artificial intelligence that uses deep learning algorithms to analyze and understand natural language input and generate a relevant and contextually appropriate response. ChatGPT can be used in various contexts, such as customer service, chatbots, and conversational agents. How can ChatGPT be used as a cognitive accessibility assistive technology for TBI survivors? TBI can cause a range of cognitive impairments, including memory loss, attention deficits, and difficulty with executive functioning.

## Getting started with TalkBack on Android

DevFeed: [Getting started with TalkBack on Android](<https://devfeed.tech/articles/getting-started-with-talkback-on-android-9386.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/getting-started-talkback/>)

Author: Cooper Hollmaier

Published: 2023-03-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Android](<https://devfeed.tech/topics/android.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [android](<https://devfeed.tech/tags/android.md>), [applications](<https://devfeed.tech/tags/applications.md>), [article](<https://devfeed.tech/tags/article.md>), [devices](<https://devfeed.tech/tags/devices.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [google](<https://devfeed.tech/tags/google.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [touchscreen](<https://devfeed.tech/tags/touchscreen.md>), [voice](<https://devfeed.tech/tags/voice.md>), [voice-commands](<https://devfeed.tech/tags/voice-commands.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This introductory tutorial explains TalkBack 13.1, an Android screen reader that helps people with visual disabilities use mobile applications and the web through audible and haptic feedback. It covers how to enable TalkBack and basic touch, swipe, and voice-command navigation, including selecting and activating items with taps and double taps.

### Source excerpt

Introduction to TalkBack TalkBack is assistive technology that helps users with visual disabilities access native mobile applications and the web by providing audible and haptic responses to touchscreen gestures. It is the default screen reader software included on Google touchscreen devices running the Android operating system. As of 2017, TalkBack is part of a family of software products in the Android Accessibility Suite including: Accessibility Menu Select to Speak Switch Access The Android Accessibility Suite comes pre-installed on devices running Android 9 or greater. This article is an introduction to TalkBack version 13.1. We will walk you through the basics of enabling the software and navigating websites and applications with it. Getting Started There are three ways to activate Talkback: From the settings menu: Accessibility > TalkBack > Toggle On On the physical device: Press and hold both volume keys for three seconds Via the Google Assistant: "Hey, Google. Turn on TalkBack" Once TalkBack is on, it will begin speaking instructions to you. While there are more robust features to explore, the basic commands you should know are: Tapping the screen selects an item, and Double tapping the screen activates your selection. TalkBack also makes use of single finger, two finger, and three finger gestures to perform additional actions. Navigation Modes There are at least three recognized ways to navigate with TalkBack: touch, swipe, and voice commands. Navigating by touch To navigate by touch, touch anywhere on the screen, selecting any element. It will be highlighted by a green border box similar to what you would find when using a keyboard to navigate a web page. With pressure still applied, slowly drag your finger around the screen. As you move around the screen, TalkBack will jump to the next available item and announce its contents aloud. Once you've found the content you'd like to interact with, double-tap the screen. Navigating by swiping Navigating by swipi

## Are you making these five mistakes when writing alt text?

DevFeed: [Are you making these five mistakes when writing alt text?](<https://devfeed.tech/articles/are-you-making-these-five-mistakes-when-writing-alt-text-9370.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/are-you-making-these-five-mistakes-when-writing-alt-text/>)

Author: Daniel Sage

Published: 2023-03-02T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [alt text](<https://devfeed.tech/topics/alt-text.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Search engine optimization (SEO)](<https://devfeed.tech/topics/seo.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [article](<https://devfeed.tech/tags/article.md>), [html](<https://devfeed.tech/tags/html.md>), [seo](<https://devfeed.tech/tags/seo.md>), [ux](<https://devfeed.tech/tags/ux.md>), [writing](<https://devfeed.tech/tags/writing.md>)

### AI overview

This article examines common mistakes in writing alt text and explains why simply describing what an image looks like may not communicate its meaning or purpose. It introduces the distinction between an HTML alt attribute and the text placed inside it, including when an image should use an empty alt attribute. The discussion draws on accessibility, UX, SEO, and low-vision perspectives.

### Source excerpt

There are many benefits to writing alt text for images, especially from accessibility and legal standpoints. But most don't know how to write alt text well. I should know because, for an awful number of years, I was one. I first learned about alt text in high school while building websites. But my proper lesson began when I took the Udacity Digital Marketing Nanodegree course, which was also my first introduction to marketing. Screenshot from the SEO module of the Udacity Marketing Nanodegree course. In this module, I learned about building easy navigation site structures, title tags, breadcrumbs, and meta descriptions--all the good stuff. We also learned about writing alt text and its importance. Their overall advice? Describe what you see. I thought that I finally understood it. Sometimes it is simplicity that kills When you ask them, most experts' advice also boils down to: Describe what you see. And while it's valid advice and may seem simple, it's not. Take the Udacity example earlier: Is this suitable alt text? Source: Udacity Nanodegree Marketing Course. If you close your eyes and someone reads out the words "eating apple heart disease" to you, does that in any way help you make sense of what's in the image? What about this example? Source: Business Insider. Does it? The answer is a big no. I used to just describe what I saw Then two weeks ago, I watched Tommy Walker, an ex-Shopify senior content marketer and editor, critique an article for its alt text usage. A snippet from The Cutting Room Show, hosted by Tom Walker. Notice that the alt text does not communicate what the audit results are. Ironically, the article was arguing for accessibility. But it made the point clearer. And for the first time, it dawned on me that I've been writing alt text the wrong way. This got me curious, so I started researching: I read numerous UX and SEO blogs, I spoke with practitioners in those fields, and I chatted with some members of the low vision community. Here's what I le

## A guide to troublesome UI components

DevFeed: [A guide to troublesome UI components](<https://devfeed.tech/articles/a-guide-to-troublesome-ui-components-9362.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/a-guide-to-troublesome-ui-components/>)

Author: Martin Lexelius

Published: 2023-02-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code quality](<https://devfeed.tech/topics/code-quality.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [code-quality](<https://devfeed.tech/tags/code-quality.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

A guide to designing and implementing troublesome UI components accessibly. It explains why accessibility should be planned early and highlights keyboard interaction, focus management, screen-reader announcements, correct HTML elements, ARIA attributes, and code quality.

### Source excerpt

A common opinion is that accessibility is expensive, and that if you think accessibility is expensive, you can deal with it later. Here's the twist: it will be expensive if you deal with it later. However, accessibility is not expensive if you discuss it as a team early in the process. It is possible to build just about anything, it comes down to time and money. But no client ever has said, "Hey, we have a lot of time and money!" Accessibility is not expensive if you proactively plan for it. That's why you need to learn how to avoid some of the common pitfalls. Before we start User interface (UI) elements are the parts we use to build apps or websites, such as links, accordions and checkboxes etc. Some UI components are more complicated than other components. And some components are really complicated. All roles that build for the web (product owners, UX designers, art directors, developers, QA engineers) must know this. The challenges The components in this article all have the following challenges in common: Keyboard interaction. Everything that can be done with a mouse, must be possible to do with a keyboard. This includes navigating, opening and closing items, activating, stopping, starting, selecting, etc. Focus appearance and management. Users navigating by keyboard must know where they are. Always show the user's current position in the interface. The focus order should be logical and intuitive. Consistent announcements. All events and interactions should correspond as understandable and relevant audio feedback in screen readers. Buttons should describe themselves as buttons, links as links, etc. Code quality. Using the correct elements and ARIA attributes, as well as valid HTML. The components Following are some UI components that have non-trivial considerations to use in an accessible way: Custom selects Native HTML <select> elements (sometimes referred to as dropdowns, not to be confused with disclosures) has the most understandable and usable experience a

## Blind people need to be considered more when making data visualizations

DevFeed: [Blind people need to be considered more when making data visualizations](<https://devfeed.tech/articles/blind-people-need-to-be-considered-more-when-making-data-visualizations-9376.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/blind-people-need-to-be-considered-more-when-making-data-visualizations/>)

Author: Johny Cassidy

Published: 2022-09-22T00:00:00Z

Content type: opinion

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Data visualization](<https://devfeed.tech/topics/data-visualization.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [data](<https://devfeed.tech/tags/data.md>), [data-visualization](<https://devfeed.tech/tags/data-visualization.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

The article argues that the growing use of visual data journalism can exclude blind people and others with visual impairments. It calls for accessible alternatives, such as meaningful text and audio descriptions, so that data visualizations can be understood by everyone.

### Source excerpt

Visual data representation is being used more and more in digital newsrooms across the world. The downside, however, is how exclusionary this can be for people with visual impairments. It's clear that visual journalism will play a huge part in the digital future for media outlets. From audience analytics tools measuring the impact of content, to representing complicated data in an easy to digest format, it's easy to see the benefits of such tools and production techniques for creating impactful digital journalism. It's also clear that without a better understanding of how to make visual journalism work for everyone that huge parts of the audience are going to be left behind. In the UK alone, the Royal National Institute of Blind People estimate that around 2 million people are living with some sort of sight loss. Globally, the World Health Organization claim the number is close to 2.2 billion, with that number set to rise dramatically as people continue to age. As a blind journalist, I'm concerned that the increased use of visual data representation without careful and creative thought about accessibility is widening the inaccessibility gap. An example During the COVID pandemic I wasn't easily able to access COVID data represented on digital graphs, and I wasn't alone. A project by MIT researching the problem of data visualization accessibility cited a simple chart from the beginning of the pandemic. The cited chart demonstrated the benefits of mask wearing and social distancing for limiting the spread of the disease. The chart was amplified by many global media outlets, but was missed by millions of blind readers due to lack of meaningful text or audio description. Data journalism's access issues and greater potential In my job as a digital journalist, I'm becoming increasingly aware of the desire to publish more and more impactful visual data journalism. For a lot of people, visual representations of complicated data has the ability to translate data into a format

## What is WAI? The Web Accessibility Initiative

DevFeed: [What is WAI? The Web Accessibility Initiative](<https://devfeed.tech/articles/what-is-wai-the-web-accessibility-initiative-9426.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/what-is-wai/>)

Author: Ilknur Eren

Published: 2022-07-18T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [Web](<https://devfeed.tech/topics/web.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [FIRST](<https://devfeed.tech/topics/first.md>), [Internet](<https://devfeed.tech/topics/internet.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [image slider](<https://devfeed.tech/topics/image-slider.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [applications](<https://devfeed.tech/tags/applications.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [community](<https://devfeed.tech/tags/community.md>), [content](<https://devfeed.tech/tags/content.md>), [development](<https://devfeed.tech/tags/development.md>), [education](<https://devfeed.tech/tags/education.md>), [evaluation](<https://devfeed.tech/tags/evaluation.md>), [internet](<https://devfeed.tech/tags/internet.md>), [standards](<https://devfeed.tech/tags/standards.md>), [support](<https://devfeed.tech/tags/support.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

### AI overview

This article explains the Web Accessibility Initiative (WAI), a W3C initiative launched in 1997 to improve Web accessibility for people with disabilities. It describes W3C's role in developing Web standards, WAI's accessibility guidelines and resources, and its contributions to WCAG and WAI-ARIA.

### Source excerpt

The Web Accessibility Initiative is W3C's effort to improve accessibility of the Web for people with disabilities. What is the World Wide Consortium? In order to know about the Web Accessibility Initiative, we must first talk about the World Wide Consortium, also known as W3C. Founded in 1994 and currently led by director Tim Berners-Lee and CEO Jeffrey Jaff, W3C is an international community where organizers develop international standards for the Web. As described by W3's website, "W3C's mission is to lead the Web to its full potential." Organizers from all around the world, involved in many different fields, join W3C to develop guidelines that ensure long-term growth for the Web. The Web Accessibility Initiative is one initiative that was launched by W3C. What is the Web Accessibility Initiative? The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web W3C launched The Web Accessibility Initiative, (WAI), in 1997, with support from the White House. The Web Accessibility Initiative's main goal is to make the internet accessible for people with disabilities. WAI brings people from disability organizations, governments, and research labs from all around the world to develop guidelines and resources to make the Web accessible to people with disabilities. This includes: auditory, cognitive, neurological, physical, speech and visual disabilities. In short, WAI develops accessibility standards and offers implementation guidance. As described by W3C Website, WAI "pursues accessibility of the web through these primary activities": Ensuring that W3C standards support accessibility Developing accessibility guidelines for web content and applications, browsers, and authoring tools Developing resources to improve web accessibility evaluation processes and tools Supporting education and outreach on web accessibility Coordinating with research and development

## Use Firefox for accessibility testing

DevFeed: [Use Firefox for accessibility testing](<https://devfeed.tech/articles/use-firefox-for-accessibility-testing-9422.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/using-firefox-for-accessibility-testing/>)

Author: Todd Libby

Published: 2022-07-17T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>), [dev-tools](<https://devfeed.tech/topics/dev-tools.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-tools](<https://devfeed.tech/tags/accessibility-tools.md>), [audits](<https://devfeed.tech/tags/audits.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [dev-tools](<https://devfeed.tech/tags/dev-tools.md>), [developer](<https://devfeed.tech/tags/developer.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [testing](<https://devfeed.tech/tags/testing.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This article explains how to use Firefox's built-in accessibility tools for web accessibility testing. It covers the Accessibility tab, accessibility-tree inspection, color-contrast, keyboard and form-label checks, visual simulations for different color-vision conditions, tabbing-order visualization, and Checks and Properties panels.

### Source excerpt

Firefox has become one of the best tools for accessibility audits. Let's go over Firefox's accessibility features that you can use today. Built-in accessibility tools In this article I'll discuss The Accessibility Tab, where we will begin and then move through to each component of the Accessibility Tab. First, the Check for issues tab, the Simulate menu, and end with the Show Tabbing Order checkbox. I'll finish with the Checks and Properties panel. The Accessibility tab Whenever you right-click on an element in a page, you can select Inspect Accessibility Properties to directly view that element in Firefox's accessibility tools. Similarly, if you're using the Inspector pane in Firefox's dev tools, you can right-click on any node and choose Show Accessibility Tools to view that node in Firefox's accessibility tools. Firefox's built-in accessibility tool is probably one of the best features in browsers' dev tools out there now. It shows you the current web page's accessibility tree, and it has panels for color-contrast checks and the current node's accessibility-tree properties. You can traverse the accessibility tree, and as you hover over each node, Firefox will show a tooltip over that node in the viewport with the name of the node and some basic properties. And the Checks and Properties panels can show you all the pertinent information for that node like its color and contrast ratio, name, role, and value. The Check for issues menu If you enable this handy feature, Firefox can check for color-contrast issues,it can do its best to try to find keyboard issues, and it can try to find form-label issues. There's also an All Issues option that will run all of those checks for the page. Each issue will show you the role and name of the element that has an issue, and the Checks and Properties panels will provide some information and values to help you resolve the issues. The Simulate menu This is a great tool for simulating visual differences. This can simulate: Protanopi

## Accessible heading structure

DevFeed: [Accessible heading structure](<https://devfeed.tech/articles/accessible-heading-structure-9392.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-accessible-heading-structure/>)

Author: Rian Rietveld

Published: 2022-01-03T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Search engine optimization (SEO)](<https://devfeed.tech/topics/seo.md>), [web-standards](<https://devfeed.tech/topics/web-standards.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [seo](<https://devfeed.tech/tags/seo.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This article explains how to create accessible, semantic heading structures in HTML. It recommends using one unique h1 for the page topic, choosing heading levels hierarchically to describe the content that follows, and avoiding headings used only for visual styling. It also discusses common mistakes and the relationship between heading structure, screen reader navigation, and SEO.

### Source excerpt

Headings are the backbone of the content of a page. A visitor should be able to scan the webpage using headings to get a good impression of its content. Heading levels have meaning, especially for screen reader users and search engines. That means one unique first level heading per page, with the other headings representing the page content similar to the index of a book: easily scannable and semantic. Write well-structured headings, because what is good for your reader, is also good for your SEO. Headings in HTML Headings are HTML elements. The main heading, h1, is level 1. The other levels are h2 up to h6. The HTML Living Standard states on headings: A heading can be used where heading content is expected. Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself). The HTML Living Standard, The h1, h2, h3, h4, h5, and h6 elements In short: use a heading when the content or the page structure requires it. Best practices summarized Use one unique h1 per page that describes what that page is about. That h1 preferably starts just above the main content. Use headings to describe the content below. Do not use an HTML heading just to make the text appear bigger or stand out. Use heading levels like the index of a book: hierarchical. Do not choose a heading by its size, but by its level in the context of the content. Do not skip a heading level from the top down. Common mistakes: Using a h2 heading for quotes because of its nice big font size. Using a h4 heading for the first paragraph of the text because it's just the size of bold text you need. Exclusively using h2 headings on a web page because all headings are the same size in the designs. Using multiple h1 headings on a web page. Omitting headings because the design clearly indicates the start of a new section. Leaving headings empty (usually a CMS glitch). What does hierarchical mean? Hierarchical means arranged in order

## How I deal with colorblindness as a digital product designer

DevFeed: [How I deal with colorblindness as a digital product designer](<https://devfeed.tech/articles/how-i-deal-with-colorblindness-as-a-digital-product-designer-9391.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-i-deal-with-colorblindness-as-a-digital-product-designer/>)

Author: Federico Monaco

Published: 2021-10-09T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [App](<https://devfeed.tech/topics/app.md>), [Internet](<https://devfeed.tech/topics/internet.md>), [Tool](<https://devfeed.tech/topics/tool.md>)

Tags: [a11y](<https://devfeed.tech/tags/a11y.md>), [article](<https://devfeed.tech/tags/article.md>), [design](<https://devfeed.tech/tags/design.md>), [digital-products](<https://devfeed.tech/tags/digital-products.md>), [interfaces](<https://devfeed.tech/tags/interfaces.md>), [products](<https://devfeed.tech/tags/products.md>), [user-research](<https://devfeed.tech/tags/user-research.md>)

### AI overview

A colorblind digital product designer describes the barriers colorblind people can encounter when using websites and applications, and the challenges colorblind designers may face when creating digital interfaces. Drawing on personal experience and user research, the article advocates designing digital products that do not rely on color alone to convey information.

### Source excerpt

Colorblindness is any visual anomaly where someone has an altered perception of colors. It can be total or partial. The A11Y Project already has an article that exhaustively covers the different types of color blindness while also providing tools that you can use during your design phases. In this article, I'd like to tell you what it means to be a colorblind designer and what the main problems are that someone with colorblindness can encounter if they decide to pursue a career as a designer. Colorblindness from a user's point of view During elementary school, like most colorblind people, I discovered that I have deuteranomaly, the most common form of colorblindness: I have a deficit in the sensitivity of my green color receptors. In my offline life, it's never caused me too much inconvenience, other than the strange color combinations of my clothes. Growing up and during my introduction to the internet and the first video-game consoles, I encountered more barriers than I had expected. From then on, I started using special filters if an application offered them, and I preferred to browse sites that didn't over rely on color alone to convey information. Recently, I was pondering whether most people with colorblindness had problems online or whether I was one of the few people to experience that. Through deep user research I found two interesting answers: the first is that I wasn't the only person with colorblindness to have problems online; the second is that, unfortunately, I found many more people than I had imagined. In light of this, I decided to write a manifesto of ten rules that all designers should follow to create digital products that are more accessible to the colorblind community. Working as a colorblind designer In addition to being a colorblind internet user, I am also a colorblind designer. This part of me comes into play when I have to design digital interfaces, either alone or as part of a team. When I'm part of a team, I immediately let people know

## Getting started with Orca screen reader on Gnome desktop environment on Ubuntu 20.04 LTS

DevFeed: [Getting started with Orca screen reader on Gnome desktop environment on Ubuntu 20.04 LTS](<https://devfeed.tech/articles/getting-started-with-orca-screen-reader-on-gnome-desktop-environment-on-ubuntu-20-04-lts-9388.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/getting-started-with-orca/>)

Author: Joseph Mawa

Published: 2021-09-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Ubuntu](<https://devfeed.tech/topics/ubuntu.md>), [Linux](<https://devfeed.tech/topics/linux.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Terminal](<https://devfeed.tech/topics/terminal.md>), [GUI](<https://devfeed.tech/topics/gui.md>), [dialog](<https://devfeed.tech/topics/dialog.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [desktop](<https://devfeed.tech/tags/desktop.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [distribution](<https://devfeed.tech/tags/distribution.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [feature](<https://devfeed.tech/tags/feature.md>), [free](<https://devfeed.tech/tags/free.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [laptop](<https://devfeed.tech/tags/laptop.md>), [launch](<https://devfeed.tech/tags/launch.md>), [learn](<https://devfeed.tech/tags/learn.md>), [learning](<https://devfeed.tech/tags/learning.md>), [linux](<https://devfeed.tech/tags/linux.md>), [lts](<https://devfeed.tech/tags/lts.md>), [open](<https://devfeed.tech/tags/open.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [terminal](<https://devfeed.tech/tags/terminal.md>), [third-party](<https://devfeed.tech/tags/third-party.md>), [ubuntu](<https://devfeed.tech/tags/ubuntu.md>)

### AI overview

This tutorial introduces the Orca screen reader on the GNOME desktop environment in Ubuntu 20.04 LTS. It explains several ways to launch Orca, discusses accessibility of applications, describes its desktop and laptop keyboard layouts and modifier keys, and introduces Learn Mode for discovering commands and documentation.

### Source excerpt

Introduction to Orca Orca is a free, open-source screen reader developed under the GNOME project. Several Linux distributions have it installed by default. This article will introduce you to the basics of Orca on Gnome desktop environment on Ubuntu version 20.04 LTS. There might be some slight variations if you are using a different desktop environment or using GNOME on a different Linux distribution. You need to consult the manual for your Linux distribution or desktop environment. Launching Orca There are three ways you can launch Orca on Ubuntu 20.04 LTS. Below are the descriptions of these three methods. Use the keyboard shortcut Super + Alt + S. Type orca on a terminal window and then press the Return key. Alternatively, you can type orca in the Run dialog and press the Return key. You can use the key combination Alt + F2 to open the Run dialog and the ESC key to close it. If you launch Orca using the Run dialog, you can close it by typing the command pkill orca or killall orca on the terminal or in the the Run dialog and then pressing the Return key. Open the Settings dialog and then select Universal access. You can then toggle the screen reader on or off. After launching Orca, it will immediately announce the title of the topmost open application window if it is accessible to Orca. Though most applications that come pre-installed with the Gnome desktop environment are accessible, some third-party applications installed by you may not be accessible to Orca. The Orca Modifier keys The modifier key used by Orca depends on the keyboard layout. Orca has two keyboard layouts, namely: Desktop keyboard layout Laptop keyboard layout The Desktop keyboard layout is the default keyboard layout. Its Modifier key is the key combination Insert + KP_Insert. KP_Insert is the same as KP_0. If it is your first time using Orca, most likely you are in the Desktop keyboard layout. The modifier key for the Laptop layout is CapsLock . You can change the keyboard layout from the pref

## Starting a design with accessibility

DevFeed: [Starting a design with accessibility](<https://devfeed.tech/articles/starting-a-design-with-accessibility-9414.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/starting-a-design-with-accessibility/>)

Author: Steve Barnett

Published: 2021-08-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [alt text](<https://devfeed.tech/topics/alt-text.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Figma](<https://devfeed.tech/topics/figma.md>), [Sketch](<https://devfeed.tech/topics/sketch.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [presentation](<https://devfeed.tech/tags/presentation.md>)

### AI overview

This article explains how to begin a design with accessibility in mind. It recommends creating a text-only design first to clarify content, structure, reading order, focus order, image information, link and button text, and form labels, followed by an HTML-only design using semantic elements before adding CSS or layout.

### Source excerpt

Designing with accessibility in mind from the start is even better than reviewing a design for accessibility. It helps us consider the wide range of people who use our products and services. Here are three things we can do to start a design with accessibility. Do a text-only design Doing a text-only design to helps us clarify the order and content of a page. What to do We can write out the design in text before opening up our favorite design tool (like Sketch or Figma or Adobe XD). Start by making a numbered list with pen and paper, or in a text editor. Write out the: Section headings, Content and function of each image, Text of each link, Text of each button, and Name of each form element. Why to do it Writing the content in a numbered list lets us be clear on: The source order of elements in the HTML. This is the order that a screen reader will read the page in. The hierarchy of elements on the page. This helps us make choices about layouts on different screen sizes. The focus order of the page. This helps us make sure it's logical and meaningful. Writing headings lets us divide the page up into logical sections. Screen reader users often use headings as a way of navigating around a page. Writing the text of images means we'll already have alt text (or something that's a good start on it). It helps us be clear on what information (if any) the image is conveying. Writing the text for links highlights why "Click here" isn't helpful link text. Link text should describe where the person goes when they follow the link. Writing the text for buttons highlights why "Submit" usually isn't helpful button text. Button text should describe what happens when the person presses the button. Writing the names of form elements forces us to think of good labels. It forces us to think about the clearest name for each element. Do an HTML-only design Doing an HTML-only design helps us clarify the order and content of a page. It also helps us clarify the single function of each interac

## Reviewing a design for accessibility

DevFeed: [Reviewing a design for accessibility](<https://devfeed.tech/articles/reviewing-a-design-for-accessibility-9411.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/reviewing-a-design-for-accessibility/>)

Author: Steve Barnett

Published: 2021-08-14T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Forms](<https://devfeed.tech/topics/forms.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [article](<https://devfeed.tech/tags/article.md>), [forms](<https://devfeed.tech/tags/forms.md>), [guide](<https://devfeed.tech/tags/guide.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>)

### AI overview

This article presents an early design-review approach for identifying and addressing accessibility issues before development begins. It recommends explicitly annotating semantics and accessibility requirements, then checking page titles, heading structure, image text alternatives, link and button names, standard controls, form-element names, grouped controls, and error messages.

### Source excerpt

I'm a big believer in shifting left: considering accessibility as early in the process as we can. One way we can do this is by reviewing designs for accessibility. This helps us catch anything we've missed before we start developing it. What to do: annotate By adding annotations about the semantics and accessibility of elements on a page we can remove barriers to access. The best way to do annotations might be sticky notes on a printout or adding comments on a Figma file, or something else. The important thing is that we want to be clear and explicit. Here are a handful of things that I've found give good value / effort balance when reviewing a design for accessibility. Things to check Page title Is the page title unique? Does it concisely describe the page content? Headings Are headings used to divide content up in a logical way? Are the levels shown, without skipping any? Text alternatives Do all images (including icons) have a text alternative (using the alt attribute)? You can see WebAIM's guide to alternative text for more about what this is, and what makes good alternative text. If the image is decorative, is it marked as such (using alt="")? Are we sure it's only decorative? Link and button text Does each link describe where we'll go when we follow it? Does each button describe what will happen when we use it? Where links or buttons have the same text repeated on a page, do they have a longer accessible name that is unique? For example: "View details of Quarter 1 review" instead of "View details". Standard controls Do form controls match standard ones (like selects, radio, and checkbox) where possible? If not, is it possible to use a standard control instead? Are standard controls being used to match the design intent? Names for form elements Do all form controls (one input plus one label) have a name? You can reference MDN's article on the <label> HTML element for an example of how the label and input elements work together with the id and for attributes to

## Accessibility and SEO

DevFeed: [Accessibility and SEO](<https://devfeed.tech/articles/accessibility-and-seo-9365.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/accessibility-seo/>)

Author: Cooper Hollmaier

Published: 2021-07-01T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Search engine optimization (SEO)](<https://devfeed.tech/topics/seo.md>), [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Google](<https://devfeed.tech/topics/google.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [content](<https://devfeed.tech/tags/content.md>), [google](<https://devfeed.tech/tags/google.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [links](<https://devfeed.tech/tags/links.md>), [search](<https://devfeed.tech/tags/search.md>), [seo](<https://devfeed.tech/tags/seo.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This article explains that accessibility and search engine optimization often benefit from the same people-centered practices. It discusses meaningful section headings, page structure, HTML headings, and descriptive anchor text as ways to improve navigation for people while helping search engines understand and discover content.

### Source excerpt

Search engine optimization and accessibility have a lot more in common than you would think. Many of the same practices that we use to enable everyone to enjoy our digital experiences also open the doors for search engines. The intersection of people and search engines Search engine optimization often gets a bad reputation. In the early years, marketers were adding blocks of keywords into pages by the truck load. Getting to the top of the results by any means necessary was the game. Companies focused on publishing content that was machine-first, not people-first. The Search Engine Optimization (SEO) industry has since evolved. Marketers who choose to build for people over profit, are those that gain increased visibility online. Catering to bots and algorithm changes, by contrast, is often a game of whack-a-mole and traffic gains are short lived. Below, we will examine some of the ways accessibility and SEO teams can work together towards a future where everyone wins. Headings Search engines crawl through an endless sea of webpages everyday. Assembling information into search results would be impossible without some semblance of structure. This is where section headings come into play. When implemented to provide meaning rather than styling, headings create an easy way to scan and navigate a document for all people. <!-- Meh --> <strong>Animals</strong> <p>Monkeys, Lions, Bears</p> <!-- Better --> <h1>Animals</h1> <p>Monkey, lions, and bears are all examples of animals.</p> <h2>Monkeys</h2> <p>Monkeys are primarily found in tropical rain forests.</p> <h2>Lions</h2> <p>All wild lions live on the African continent, with the exception of a small population in western India.</p> <h2>Bears</h2> <p>Species of bears exist almost everywhere in the world.</p> Properly implemented HTML section headings help search engines, too. To determine if a page is relevant to a person's search, Google has to know about the contents of a page. If a page title isn't present in the code, se

## Everyday Accessibility

DevFeed: [Everyday Accessibility](<https://devfeed.tech/articles/everyday-accessibility-9382.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/everyday-accessibility/>)

Author: Michele A Williams; PhD

Published: 2021-06-15T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [alt text](<https://devfeed.tech/topics/alt-text.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [images](<https://devfeed.tech/tags/images.md>), [readability](<https://devfeed.tech/tags/readability.md>), [social-media](<https://devfeed.tech/tags/social-media.md>), [speech](<https://devfeed.tech/tags/speech.md>), [text-to-speech](<https://devfeed.tech/tags/text-to-speech.md>), [writing](<https://devfeed.tech/tags/writing.md>)

### AI overview

This practical accessibility article explains how to make social media, digital, and multimedia content more inclusive. It recommends capitalizing words in hashtags, providing written text alongside images of text, adding concise alt text to images, limiting disruptive emoji use, and using built-in document styling features so assistive technologies can interpret content correctly.

### Source excerpt

Even with the best of intentions, you may be making decisions that exclude disabled users. Below are practical, intentional steps you can start today to create and share more accessible social media, digital, and multimedia content. Watch this post as a video Social Media Posts Social media is central to the world's conversations, so ensure you're not leaving anyone out. Use capital letters in hashtags Punctuation helps text-to-speech tools like screen readers speak more accurately, and helps with readability overall. This includes in hashtags, where capital letters help distinguish words. Key Point: Make it a habit to #UseCapitalLetters rather than #hardtoreadlowercase. Don't share just images of text Images of text (such as your favorite quote or saying) can be difficult for people with visual impairments to read and don't allow people with reading difficulties to leverage text-to-speech read-aloud features. When posting these kinds of images, also write out the text in your post. Key Point: Typing out the text in an image makes the content more accessible. Use "alt text" features to describe images Pictures are significant in social media, but also inaccessible to visually impaired readers unless they have a text-based description. When uploading, find the "image description" or "alternative/alt text" feature in the software to write a description. For sample instructions, review Alt Text for Social Media. When adding descriptions, don't write every detail, just enough to ensure everyone can understand your post and share in the image's meaning. For examples, read Scott Vinkle's Considerations when writing alt text. Key Point: Features like Twitter's "Add description" allow adding "alt text" for visually impaired readers. Limit your emojis Emojis are great for emphasis and playfulness, but adding too many sounds cluttered with text-to-speech software. Also, when placed unconventionally (such as throughout a sentence) this is distracting and hard to read for those

## Fixing contrast issues, on your own site and elsewhere

DevFeed: [Fixing contrast issues, on your own site and elsewhere](<https://devfeed.tech/articles/fixing-contrast-issues-on-your-own-site-and-elsewhere-9383.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/fixing-contrast-issues-on-your-own-site-and-elsewhere/>)

Author: Kilian Valkhof

Published: 2021-06-07T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Web](<https://devfeed.tech/topics/web.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [article](<https://devfeed.tech/tags/article.md>), [design](<https://devfeed.tech/tags/design.md>), [developer](<https://devfeed.tech/tags/developer.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

### AI overview

This article explains how insufficient text contrast creates widespread accessibility problems on websites. It introduces contrast ratios, describes WCAG thresholds for regular and large text, illustrates how visually similar colors can produce different audit results, and recommends using design plugins and accessibility checkers to identify contrast issues.

### Source excerpt

Insufficient text contrast is the most common accessibility issue on websites today. According to the WebAIM Million report for 2021, 86.4% of home pages world wide have low contrast text. What's worse, this number has been increasing the past three years. Text contrast issues can by and large be automatically found (and fixed, more on that later), so why do nearly 9 out of 10 sites have contrast issues? Before we answer that, a quick intro on what text contrast is When we talk about text contrast, what we mean is the difference between the color of the text and the color that's behind the text. To make sure the text is readable for everyone, you need a certain amount of difference between them. This difference can be measured using a formula that yields a number between 1 (no contrast, white text on a white background) and 21 (the most contrast possible, black text on a white background). That number is called the "contrast ratio". The formula is part of WCAG, the Web Content Accessibility Guidelines. How the formula works is not that important, but there are a few numbers you should be aware of. For regular text, you need a contrast value of at least 4.5, and for large text just 3, to pass the text for sufficient contrast. (There are more strict rules available too). Having to score a 4.5 out of 21 doesn't seem like a very high bar to clear, so why do 86% of websites still have contrast issues? We could blame our own visual perception for that. For example, here's a text with a contrast ratio of 4.12: This text does not have enough contrast For you this might be fine or it might not be, but in any case you're going to have a hard time seeing the difference between it and this text which has a contrast ratio of 4.54: This text does have enough contrast One of them does not have sufficient color contrast and would fail an accessibility audit, and the other would pass. And if you couldn't tell them apart that wouldn't be odd, they're very close. And herein lies a pot

## Alternate text and automation

DevFeed: [Alternate text and automation](<https://devfeed.tech/articles/alternate-text-and-automation-9368.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/alternate-text-and-automation/>)

Author: Eric Bailey

Published: 2021-03-23T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [alt text](<https://devfeed.tech/topics/alt-text.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>), [Machine learning](<https://devfeed.tech/topics/machine-learning.md>), [Automation](<https://devfeed.tech/topics/automation.md>), [WordPress](<https://devfeed.tech/topics/wordpress.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [automation](<https://devfeed.tech/tags/automation.md>), [code](<https://devfeed.tech/tags/code.md>), [computer-vision](<https://devfeed.tech/tags/computer-vision.md>), [machine-learning](<https://devfeed.tech/tags/machine-learning.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>), [wordpress](<https://devfeed.tech/tags/wordpress.md>)

### AI overview

The article explains that effective alt text helps people using assistive technology understand images and is required as part of WCAG. Although machine learning and computer vision can automate image descriptions in content management systems, automated descriptions may be inaccurate or incomplete, so human review remains necessary.

### Source excerpt

Alternate (alt) text help people who use assistive technology understand images, and are a core part of the Web Content Accessibility Guidelines (WCAG). They require a human's input to be effective. To create alternate text, you add an alt attribute to an image that clearly and concisely describes what it is depicting: <img alt="A bowl of tomato soup and a grilled cheese sandwich." class="recipe-photo" src="/images/lunch.jpg" /> Assistive technology such as a screen reader will read the text provided inside the alt attribute's opening and closing quotes. It may sound something like: Image. A bowl of tomato soup and a grilled cheese sandwich. This allows a person to know an image is present, and what the image's content contains. With this context, someone using assistive technology can understand the image's purpose the same way someone who is not using assistive technology would. It's up to the person writing the code to add an alt attribute. It's also up to them to look at the image they're using and write an accurate description. Many Content Management Systems (CMS) allow the people who use them to include alt text by writing it in a dedicated input field. WordPress' alt text input field for uploaded images. Automation Technologies such as machine learning and computer vision allow us to guess at what an image is based on its arrangements of pixels. For example, we might show a computer hundreds of thousands of photos of fire hydrants to train it to understand what configurations of pixels look "fire hydrant-ish." The idea is that you can take these technologies and apply them to a CMS or other publishing system. The publishing system would ideally then be able to automatically apply alternate text to any image uploaded by an author. The problem is that automated image description is not a perfect science. Many of these automated detection technologies are still new and unsophisticated. This means there's a good chance they haven't been taught what the image you

## Should I use an accessibility overlay?

DevFeed: [Should I use an accessibility overlay?](<https://devfeed.tech/articles/should-i-use-an-accessibility-overlay-9412.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/should-i-use-an-accessibility-overlay/>)

Author: The A

Published: 2021-03-08T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [digital accessibility](<https://devfeed.tech/topics/digital-accessibility.md>), [Web app](<https://devfeed.tech/topics/webapp.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [digital-accessibility](<https://devfeed.tech/tags/digital-accessibility.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [plugins](<https://devfeed.tech/tags/plugins.md>), [web](<https://devfeed.tech/tags/web.md>), [web-app](<https://devfeed.tech/tags/web-app.md>)

### AI overview

The article explains accessibility overlays and argues that permanent overlay plugins are technically, socially, and morally harmful. It distinguishes temporary overlays used as stopgap measures from persistent plugins, recommending that accessibility problems be fixed in the underlying website or web app code.

### Source excerpt

Due to their technical, social, and moral issues, The A11Y Project does not recommend using permanent overlay plugins. We view these kinds of products as actively harmful, and a step backwards for digital accessibility efforts. Background Accessibility overlays have become a controversial topic recently. Let's clarify what they are, and how they impact accessibility. An accessibility overlay is JavaScript that is written with the goal of helping to fix accessibility issues on a website or web app. Overlay code is applied after the website or web app is rendered by the browser, to transform it. Generally speaking, there are two types of accessibility overlays: Temporary bandage solutions, and More permanent plugins. Of the two, the more permanent plugins are incredibly problematic. Temporary bandage solutions Temporary bandage solutions have been around for awhile. Historically, they have been used by professional accessibility auditing companies as a stopgap measure. With the bandage approach, the overlay serves as a temporary measure. It is designed to be used to temporarily fix specific, critical accessibility issues until the underlying website or web app code can be updated. Think of these kinds of overlays like a bandage. Bandages are not intended to be left on permanently. They are removed after the injury they cover has healed. Bandage overlays usually have a process to signal when their code should be removed. This process is typically a negotiation between the accessibility auditors and the company who has the inaccessible experience. Permanent plugins Permanent plugins are more of a recent phenomenon. Unlike temporary bandage solutions, permanent plugins are designed to be a persistent presence on the inaccessible website or web app. Four examples of permanent plugins are accessiBe, AudioEye, FACIL'iti, and Max Access. There are numerous issues with permanent plugins. To build off the bandage metaphor, a permanent plugin left on a website or web app for to

## Dyslexia fonts

DevFeed: [Dyslexia fonts](<https://devfeed.tech/articles/dyslexia-fonts-9381.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/dyslexia-fonts/>)

Author: Hamsa Harcourt

Published: 2021-02-22T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Font](<https://devfeed.tech/topics/font.md>), [Web](<https://devfeed.tech/topics/web.md>), [pdf](<https://devfeed.tech/topics/pdf.md>)

Tags: [fonts](<https://devfeed.tech/tags/fonts.md>), [pdf](<https://devfeed.tech/tags/pdf.md>), [readability](<https://devfeed.tech/tags/readability.md>), [research](<https://devfeed.tech/tags/research.md>), [typography](<https://devfeed.tech/tags/typography.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

The article explains dyslexia as a language-processing disorder and discusses how font design and typography can affect readability. It questions whether specialized dyslexia fonts improve reading, noting that research has not shown faster reading or fewer mistakes and that many people with dyslexia prefer common fonts such as Comic Sans, Verdana, and Helvetica. It also recommends general web typography practices, including adequate font size and increased line spacing.

### Source excerpt

Dyslexia is a Phonological Processing disorder. This means it is an issue with language processing, not vision. Dyslexia is a slight disorder of the brain that causes difficulty in reading and spelling, for example, but does not affect intelligence. Dyslexia - Oxford Advanced Learner's Dictionary Dyslexia affects about 1 in 5 people worldwide. Its symptoms range in severity from mild to extreme. It causes your brain to transpose letters, numbers, punctuation, and other characters, which affects your ability to read. This means that making Dyslexic-friendly fonts and typography choices are important things to consider. Background When designing fonts, some typographers flip and rotate one character to form other characters. Letters b, p, d and q are usually created using this method. This is because it makes it easier to make the font. However, this practice may cause problems for people with Dyslexia. It can make some letters, numbers, punctuation, and other characters become indistinguishable. This can make it easy to confuse one character for another. As a result, people with Dyslexia may prefer fonts where all the characters are unique. The questionable utility of Dyslexic fonts? Dyslexia fonts are typefaces designed so that each character is unique and distinguishable. Dyslexia fonts also make each character unique by using thicker lines in some parts of the letters, as well as slanting them a bit. They are intended to help people with Dyslexia. According to recent studies, it has been proven that Dyslexia fonts do not help people read faster and make fewer mistakes. In fact, most people with Dyslexia prefer Comic Sans, Verdana, and Helvetica to other fonts. For a detailed review of the research, see Good Fonts for Dyslexia (PDF). General font tips The following are general tips that improve the overall quality of your website's typography: Font size should be at least 12-14pt or its equivalent. This help people with cognitive disabilities, language and learning

## Use the tabindex attribute

DevFeed: [Use the tabindex attribute](<https://devfeed.tech/articles/use-the-tabindex-attribute-9395.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-use-the-tabindex-attribute/>)

Author: Eric Bailey

Published: 2021-01-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web](<https://devfeed.tech/topics/web.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web app](<https://devfeed.tech/topics/webapp.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [web-app](<https://devfeed.tech/tags/web-app.md>)

### AI overview

This article explains how to use the HTML tabindex attribute accessibly. It describes how zero, positive, and negative values affect keyboard and programmatic focus, and warns against positive values, manually defining tab order, and making non-interactive elements focusable. It recommends using native interactive elements in document reading order and relying on their built-in browser behavior.

### Source excerpt

tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way. When tabindex's value is set to zero or a positive number, the element can be navigated to via the keyboard's Tab key. When it is set to a negative number, its element can be programmatically focused via JavaScript. Common mistakes Unfortunately, the tabindex attribute is often misunderstood and consequently misused. Following are some common examples of tabindex use that have a negative impact on accessibility: Using a positive tabindex value Using tabindex with a value of 1, 2, 3, etc. places the element the tabindex is applied first in the keyboard tabbing order. This can create a confusing experience for anyone who relies on the keyboard's Tab key to navigate. Setting a manual tab order You don't need to manually set tab order for every page or view on a website or web app. Not only is this extra, unnecessary work that is difficult to maintain, it may deviate from someone's expected or desired way to navigate. This results an annoying, confusing, and potentially inaccessible experience. Instead, use appropriate interactive elements (a for links, button for buttons, etc.) and put them in the reading order of the document. Interactive elements come with native browser behavior already built in that allows them to be navigated to via Tab without the need for a tabindex declaration. Making non-interactive elements focusable There is a myth that applying tabindex="0" to non-interactive elements (paragraphs, headings, lists, etc.) helps "improve" accessibility by providing a way for a person who uses a screen reader to focus on all the content present in a webpage or web app. Unfortunately, this well-intentioned idea actually does not create a good assistive technology experience. In the same way that you don't need to add a tabindex attribute declaration to native interactive elements, you also don't need to

## Text resizing in iOS and Android

DevFeed: [Text resizing in iOS and Android](<https://devfeed.tech/articles/text-resizing-in-ios-and-android-9415.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/text-resizing-in-ios-and-android/>)

Author: Lucia Cerchie

Published: 2021-01-28T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Android](<https://devfeed.tech/topics/android.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [App](<https://devfeed.tech/topics/app.md>), [Responsive Design](<https://devfeed.tech/topics/responsive-design.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Material Design](<https://devfeed.tech/topics/material-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [android](<https://devfeed.tech/tags/android.md>), [app](<https://devfeed.tech/tags/app.md>), [css](<https://devfeed.tech/tags/css.md>), [emulator](<https://devfeed.tech/tags/emulator.md>), [html](<https://devfeed.tech/tags/html.md>), [ios](<https://devfeed.tech/tags/ios.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [responsive-design](<https://devfeed.tech/tags/responsive-design.md>), [zoom](<https://devfeed.tech/tags/zoom.md>)

### AI overview

This article explains how to support text resizing and zooming for accessibility in iOS and Android apps. It covers iOS Dynamic Type, Android scale-independent pixels, minimum body-text sizes, scrollable containers, and responsive HTML using relative units.

### Source excerpt

When you're designing for mobile, it's important to remember that some people will need to change the size of the content to read it easily. There are so many ways to view content on mobile devices, from zooming in to orienting the screen differently, so a failure to design in a dynamic environment can lead to accessibility issues. There are different ways you can attend to this, whether you're writing an app for iOS or Android. Considerations for iOS In iOS, users can use Full Screen Zoom or Window Zoom to magnify parts of the screen. To allow them to resize the type, use dynamic type, which enables your app's type to be resized. If you manually limit how large your text scales it may cause issues for people who need a bigger font. You want the text to scale dynamically instead of stopping at the point you set, because that size may still not be visible to all people. Minimum font-size for body text should be 17pt. Considerations for Android You can use a tool called the Android Emulator to preview how your app works in the context of different android devices. This can help you stay aware of how people who use different types of androids experience your app. Again, users can only zoom in on specified areas, so you'll need to use scale-independent pixels to determine the size of your text. There isn't a tool like Dynamic Type in Android, so you'll need to scale the text at different sizes yourself. Material design has a resource that makes a good starting point. Minimum font-size for body text should be 16sp: android: textSize=16sp You'll also want to remember to make your content container scrollable. If it's not, you'll just cut off the extra content when a person zooms in. Also consider that apps may contain HTML views. There are a couple things to keep in mind here for accessibility as well. HTML In your HTML, make sure to use relative units for responsive design. Here's a resource from The CSS Layout Workshop for applying them to your HTML via CSS. If you don'

## Designing accessible animation

DevFeed: [Designing accessible animation](<https://devfeed.tech/articles/designing-accessible-animation-9380.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/design-accessible-animation/>)

Author: Kelly Gillit

Published: 2020-12-22T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>), [Responsive Design](<https://devfeed.tech/topics/responsive-design.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [animation](<https://devfeed.tech/tags/animation.md>), [developers](<https://devfeed.tech/tags/developers.md>), [digital-products](<https://devfeed.tech/tags/digital-products.md>), [motion-design](<https://devfeed.tech/tags/motion-design.md>), [responsive-design](<https://devfeed.tech/tags/responsive-design.md>)

### AI overview

This article explains how to design accessible animation for digital products. It discusses motion-related risks, responsive animation, limiting duration and repetition, and giving users controls to pause, stop, or hide animations.

### Source excerpt

Animation is used in digital products in many ways, such as drawing a user's focus to a particular area on the screen, providing another layer to a brand's style with unique and ownable motion design, and adding a spark of unexpected fun to an otherwise robotic interaction. But designing animation that surprises and delights accessibly is trickier than it sounds. Dizziness, nausea, disorientation, migraines, and even seizures can all be caused by well-executed yet inaccessible motion design. Because of this, it is critical to design your animation with both aesthetics and accessibility in mind. Consider parallaxing--large-scale animation where the foreground and background slide past each other at different speeds--and primary navigation based on horizontal scrolling. These effects, especially when dramatic, can trigger the symptoms mentioned earlier. Animations inherently carry a lot of visual and cognitive weight, so always take into account how the user will be viewing it. Desktop screens are interacted with at a greater distance than handheld devices, therefore any animation should be responsive to avoid overwhelming or distracting users from anything essential. Users with cognitive and learning disabilities may especially appreciate this. Next, rein in the animations. Endlessly looping animations at any size can be more disorienting than delightful. Specifying the number of cycles it will play, limiting the duration that it plays, or having the animation paused by default will ensure its accessibility. Another way to handle this is by designing controllers that allow the user to pause, stop, or hide the animation altogether. While it's essential that accessible animation starts at the design level, there are additional ways developers can implement these tips behind the scenes. We've included some links to help show you how.

## Getting started with VoiceOver on iOS

DevFeed: [Getting started with VoiceOver on iOS](<https://devfeed.tech/articles/getting-started-with-voiceover-on-ios-9389.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/getting-started-with-voiceover-ios/>)

Author: Anh Pham

Published: 2020-11-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [iphone](<https://devfeed.tech/topics/iphone.md>), [macOS](<https://devfeed.tech/topics/macos.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [apple](<https://devfeed.tech/tags/apple.md>), [developers](<https://devfeed.tech/tags/developers.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [ios](<https://devfeed.tech/tags/ios.md>), [iphone](<https://devfeed.tech/tags/iphone.md>), [macos](<https://devfeed.tech/tags/macos.md>), [testing](<https://devfeed.tech/tags/testing.md>), [vision](<https://devfeed.tech/tags/vision.md>)

### AI overview

A practical introduction to VoiceOver, Apple's built-in screen reader on iOS. The article explains how VoiceOver communicates interface information through speech and gestures, how to enable it and configure an Accessibility Shortcut, and how to use basic gestures and the VoiceOver Rotor. It also recommends that developers test their projects with VoiceOver.

### Source excerpt

VoiceOver is a screen-reading tool built into Apple Inc.'s iOS. It helps people navigate and use their iPhone without needing to see the screen. First introduced in 2009 with the iPod Shuffle and iPhone 3GS, VoiceOver has been in the picture in every Apple's iOS release ever since. For developers, it is always a good idea to test out VoiceOver with your project on your chosen testing device. There is also VoiceOver for macOS - a separate screen reader from VoiceOver iOS. If interested, you can check out Mat Marquis's detailed guide to macOS VoiceOver! How does VoiceOver work? On an iPhone, VoiceOver responds to gestures (single tap, double tap, et cetera) and audibly communicates to us all the information we need to know (for example, what we have selected or done, the hints, values and traits of the items). How to start using VoiceOver on iOS The easiest way to turn on VoiceOver on your iPhone is to: Open Settings app on your iPhone. Select Accessibility. Under Vision, select VoiceOver. Turn on VoiceOver. You can also make it easier to activate/deactivate VoiceOver and use it frequently, by adding an Accessibility Shortcut: Open Settings app on your iPhone. Select Accessibility. Under General, select Accessibility Shortcut. Select VoiceOver. Then you can toggle VoiceOver feature on or off by triple clicking the side button (on iPhone X or later). If it is an earlier version of iPhone, triple click the Home button. You can also ask Siri to turn on VoiceOver on or off instantly by saying "Hey Siri, turn on VoiceOver!" or "Hey Siri, turn off VoiceOver!". Basic VoiceOver gestures Here are some common gestures you can use to navigate our iPhone with VoiceOver: Gesture Description Touch the screen anywhere Hear an item Drag finger on screen Explore items Quickly flick left or right with one finger Locate items or apps Double tap Select and activate app, link or button Triple tap Double tap items Tap once with two fingers Pause VoiceOver Swipe up from bottom edge (ends wi

[Next page](<https://devfeed.tech/sources/the-a11y-project.md?cursor=WyIyMDIwLTExLTIzVDAwOjAwOjAwKzAwOjAwIiwgIjg4MDU3OWFmLTdhZDUtNGQ0OC1iMDIwLTFkZjZlMTRkYjc5MiJd>)