Here’s what UX designers can do about itNext week is the 14th annual Global Accessibility Awareness Day (GAAD). This tradition was founded in 2011 with the goal of getting more people to think about and apply web accessibility practices to include users with disabilities.Though it seems web accessibility is a priority in product development, almost 95% of home pages include WCAG conformance failures, such as low-contrast text or missing alt text, according to WebAIM.Digital products failing to comply with WCAG standards ostracize users with disabilities. These users can range from a person with low-vision, a person who cannot use a mouse, or even a person who is colorblind. “Inclusive design” has been a buzzword in the tech industry for some time — it’s time to not only talk about this design approach for clout, but to actually do it.Digital products need to comply with WCAG standards so user with disabilities can access themWhy is GAAD important?Have you ever heard any variation of the following two phrases?“We just don’t have time to go back and fix the accessibility issues.”“The website works for me; I don’t think we have much to worry about.”Though web accessibility continues to be a “trendy” topic, accessibility failure rates are still high (and disappointing). It is costly to go back and fix accessibility issues like keyboard accessibility or color contrast issues; but without fixing the problems, some users cannot use your website.As a UX designer who is able-bodied (or doesn’t identify with having a disability), it can be easy to forget about users who don’t use the web the same way. For instance, let’s say you use your mouse to move a Trello card by dragging and dropping it from “Not started” to “In-progress.” A user who can only use their keyboard cannot move the card by dragging and dropping; they must have an alternative way to get the same results.The traditional design approach doesn’t include users with disabilities, but all designers can change that by fostering an accessibility-first mindset and knowing common (but preventable) issues they should be on the lookout for. Let’s look at the current state of web accessibility, review common accessibility issues, then look at free tools to incorporate into your design practice.What’s the current state of web accessibility?WebAIM (Web Accessibility in Mind) published results from their “WebAIM Million” for 2025. The report is a web accessibility audit where one million home pages of top websites are tested for WCAG (Web Content Accessibility Guidelines) compliance.Almost 95% of the million home pages tested in the report included WCAG conformance failures. To detect these failures, WebAIM used a mix of automated testing with the WAVE API tool in addition to manually testing (it is impossible to catch all accessibility issues with only automated testing).Chart showing the percentage of home pages with detected WCAG conformance failures from 2019 to 2025, via WebAIMThough this report shows a slight decrease in the percentage of homepages with accessibility issues from last year (down 1.1%), it also shows a trend that home page’s average complexity increases each year. So as more and more design elements are added to home pages, they become more prone to accessibility issues.What were the most common accessibility issues found?96% of the detected accessibility issues fall into 6 buckets. Here are the buckets from most to least common:Low-contrast text: 79.1%Missing alternative (alt) text for images: 55.5%Missing form input labels: 48.2%Empty links: 45.4%Empty buttons: 29.6%Missing document language: 15.8%Chart showing the 6 primary buckets of the most common accessibility issues found in home pages, via WebAIMNot only were these buckets the prevalent accessibility issues found in the this WebAIM report, they’ve also been the most common for the last 5 years — showing a pattern of not addressing (and continuing to create) the same issues year after year.What kind of user impact do these accessibility failures cause?Low-contrast text: If a user with low-vision can’t read faint text, they can’t get the information they need. Any text smaller than 18 PT (or less than 14 PT bold) must have a color contrast ratio of 4.5:1 with its background so more people can read the text.Missing alt text for images: When an image shows important information, a user who consumes content through a screen reader must be able to get that information in some other form. If an image doesn’t include alternative text (through an alt attribute), the screen reader may only read the image’s file name or nothing at all.Missing form input labels: Let’s say a user with a screen reader is filling in a webpage’s form. If multiple input fields don’t include a label element to associate the label with the field, the screen reader will only read what the field control is (I.E., “Input” or “Select”); so the user won’t get any context or instructions for what information is requested.Empty links: Empty links occur when an image is used as a link, but the image doesn’t include alt text. They can also occur if an element including a link is deleted without modifying the HTML. As a screen reader user navigates a web page, the screen reader will tell the user they’ve landed on a link, but the user won’t get context like what the link does.Empty buttons: Similar to empty links, empty buttons do not describe the function of the button. So when a screen reader user is navigating a web page, the screen reader will announce the button, but the user won’t be made aware of what the button does (I.E., submits a form or logs in). So the user is forced to trigger the button to find out what it does.Missing document language: When a webpage’s primary language isn’t specified, screen readers may misinterpret the text — hurting users who aren’t native speakers or need translation. A screen reader user may hear mispronounced words or grammar, which blocks their ability to understand the content.Design to prevent common accessibility issuesIt’s actually quite easy to prevent and fix these common accessibility issues. Given the bulk of issues detected were from the 6 buckets discussed previously, digital products could dramatically improve accessibility if they all addressed these problems.Though some of these issues are caused by how designs were implemented, designers still have responsibility in how they handover designs to their developers.With the following techniques, designers can proactively create accessible content as well as advocate for accessible implementation with recommendations. After designs have been implemented, designers should QA a testing environment or live product for accessibility issues to flag for remediation ASAP.Let’s review a designer’s responsibilities and how they can QA for each accessibility bucket.Low-contrast textDesigner’s responsibilities:For images of text and any text smaller than 18 PT (roughly equivalent to 24 PX), make sure the color contrast has a ratio of at least 4.5:1For text larger than 18 PT (or 14 PT bold), make sure the color contrast has a ratio of at least 3:1The only exceptions to this color requirements are logotypes, inactive/ disabled UI controls, or any pure decorative element (I.E., divider lines)How to QA websites for low-contrast text:Manually check your design’s color using contrast checker tools like WebAIM or with Figma’s native color contrast toolRun an automated accessibility testing tool (like Silktide) on your browser-based product to flag color contrast issues that should be double-checkedWebAIM’s free contrast checker tool testing between blue and white colorsMissing alt textDesigner’s responsibilities:Write recommended alt text for each image used on a web page (under 150 characters)For images, suggest using the alt attribute on the <img> elementFor SVGs, suggest giving the SVG role="img"and using a <title> attribute (I.E., <svg role="img" title="A brown circle"><circle cx="30" cy="30" r="10" fill="blue"></circle></svg>)If the image is purely decorative, suggest using a null alt attribute (alt="")How to QA websites for missing alt text:Manually read the alt text for images to ensure it’s descriptive of the image and ensure any decorative images doesn’t have alt textRun an automated accessibility testing tool on your browser-based product to flag any image or SVG that doesn’t include alt text, and isn’t marked as decorativeMissing form labelsDesigner’s responsibilities:Use descriptive labels for the form fields; let the user know what data they need to inputPosition the label close to the input for sighted users to predict the relationshipRecommend using <label> tags that use the for="" attribute, and reference the ID to match the label with the <input> (I.E., <label for="firstname1">First name:</label><input type="text" name="firstname" id="firstname1">)How to QA websites for missing form labels:Run an automated accessibility testing tool on your browser-based product to flag any <input> tag that isn’t associated with a <label>, as well as makes sure the <label> includes textThe Silktide tool caught a form field (the Search function) that is missing a label on Marta’s homepageEmpty linksDesigner’s responsibilities:Use descriptive labels for the links; let the user know where the link will take themFor links, suggest adding text content to the <a> element (I.E., <a href=”https://google.com”>Google homepage</a>)For links containing SVGs or Webfont icon, suggest hiding the element with aria-hidden="true" and adding an aria-label attribute to the <a> elementHow to QA websites for empty links:Run an automated accessibility testing tool (like WAVE API) on your browser-based product to flag any link missing anchor text, as well as if a link containing an SVG or Webfont icon is missing an aria-label or screen reader textThe Silktide tool caught an image being used as a link without alt text within a restaurant websiteEmpty buttonsDesigner’s responsibilities:For button controls, recommend adding a value attribute to an <input> (I.E., <input type="button" value="Submit">)For images acting as buttons, recommend adding an alt attribute to the image to describe the button’s function (I.E., <img src="button-pic" alt="Submit">)How to QA websites for empty buttons:Run an automated accessibility testing tool on your browser-based product to flag any button without any content in the button’s opening and closing tag, as well as if an input is missing a value attributeMissing document languageDesigner’s responsibilities:For web pages, recommend using the lang attribute on the HTML element (I.E., <html lang="en">)For PDFs, recommend setting the default language using the /Lang attribute in the document catalogHow to QA websites for document language:On the Chrome browser, open “Developer tools” (Option+Command+I on Mac)Under <!DOCTYPE html>, the lang attribute should be specified in the first <html> tagGoogle’s search page includes the lang attribute in the first <html> tagFree tools to catch accessibility failuresWhether you’re designing, QA-ing an implemented feature, or wanting to see where your digital product currently stands with accessibility standards, there are many helpful tools to prevent and find issues. Most of these tools offer a solid version for free usage — no payment needed (yay!).Let’s review both design and QA tools below.Design toolsFigma’s native color checker: Figma’s new feature allows you to natively check the color contrast without running any plugin or checking the colors with a third-party tool. Just select the layer with the color you want to check, then make sure “Check color contrast” is selected.Figma’s native color contrast checker feature checking text color in a card componentStark Accessibility Checker: This is a Figma plugin where you can check color contrast, simulate color blindness, and even annotate designs for focus order and alt text.Stark’s Figma plugin with focus order annotations for a radio button group componentA11Y Annotation Kit: A free Figma community file that offers UI components to markup designs with a suggested page title, headings, landmarks, etc. These annotations help with developer handoff so they understand actions they need to take to implement accessible designs.A11Y Annotation Kit’s intro page showing how to use the annotations in your Figma designsQA toolsWAVE API: This is a free tool that scans and flags accessibility issues on live websites. It outputs a quick summary to understand how accessible the website is, but also provides the details of issues for remediation.WAVE API tools scanning a transportation website for accessibility failuresGoogle Lighthouse: This feature is free and is already included in the Developer Tools feature within the Chrome browser. All you need to do is press Option+Command+I (on Mac) to open DevTools, then select “Lighthouse” from the tab panel. This tool gives you an overview for accessibility issues as well as SEO and performance optimization.Google Lighthouse tool showing results from an analyzation for a transportation websiteAccessibility Checker: Another free tool where you can insert your website to test, then the tool will scan and flag for accessibility failures. It gives you an audit score so you can track improvements to the score as you remediate issues, and it gives you suggestions on how to solve each issue.Accessibility Checker tool showing results after scanning a transportation websiteThis Global Accessibility Awareness Day, let’s reflect on the shortcomings of web accessibility. What is one thing each of us can do to improve the “WebAIM Million” results for next year? Maybe it’s double-checking your color contrast ratios or establishing a Design System requirement that every input field on a form includes a label.Whatever the one thing is, make it a habit (then add to the habit).This “one habit at a time” application allows for accessible design and development to happen. Accessible interfaces benefit everyone’s experience when using a website or native application — not only users with disabilities. It empowers all people to enhance their capabilities to do something they couldn’t do before. Continuing to learn and apply accessible practices is better than not trying at all.Though Global Accessibility Awareness Day brings light and optimism for designing for and including people with disabilities, it’s easy to feel defeated with how many accessibility failures still exist today. But by advocating for better accessibility practices within your own process as well as your company’s, accessibility will be prioritized and less issues will occur.95% of homepages are inaccessible was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.