Regarding digital accessibility assessments for our clients, we are often asked what the most common issues our team identifies when performing website (or mobile) audits.
Having performed thousands of digital accessibility audits in our history, Allyant has a wealth of experience identifying the key areas that can make or break your digital environments’ WCAG conformance and usability.
While a detailed live-user audit delves into numerous specifics and should cover the full breadth of WCAG conformance, this post focuses on six pivotal aspects that ensure your web or mobile application is on track to hit and maintain digital conformance.
We reviewed data across our thousands of historical assessments and active clients to identify the most common issues our team finds to help you comply with legal requirements and pave the way for creating an inclusive and equitable digital experience for all users.
Let’s explore these essential components and how they can transform your digital presence into a model of accessibility excellence.
Page Headings
Page headings are used to designate different sections of web pages. Headings are especially useful for screen reader users, as many users of screen reader technology leverage headings to quickly navigate via headings, as was outlined in the WebAIM Screen Reader Survey of 2024.
This feature allows screen reader users to skip sections as they choose when coded properly on websites or mobile applications.
There are also different heading levels. For instance, the page title should be marked up as a level 1 heading. Each major section should be marked up as a level 2 heading and each subsection as a level 3 heading.
Any further subsections should be marked up as level 4, 5, and 6 headings. Screen readers can easily and quickly move through content by leveraging heading levels, allowing users to go directly to level 2 headings, for example.
Headings also help visually separate text, which can be particularly useful for individuals with cognitive disabilities. These users and many others may need assistance focusing on the content without these visual separators.
Heading issues are some of the most common WCAG violations we see at Allyant. Text not marked up as a heading is the most common issue among our active projects!
Nearly 84% of digital properties we are currently working on with clients have this heading issue, further highlighting the importance of page heading issues to digital accessibility conformance.
Color Contrast
Many people who are visually impaired or have a form of colorblindness rely on good color contrast to see different web elements visually and have equitable digital experiences.
WCAG AA requires at least a 4.5:1 contrast ratio between text and its background and at least a 3:1 contrast ratio between non-text elements (icons, etc.) and their background. There are a few exceptions, though.
Large text (at least regular 18 pt font or bold 14 pt font) only requires a 3:1 contrast ratio with its background. Incidental text, such as text solely for decoration and brand logos with text, also requires only a 3:1 contrast ratio.
Checking contrast ratios is pretty simple, which surprises many teams when we perform Design Reviews for our clients! With WebAIM’s color contrast tool (and many other color contrast tools), for example, you simply need to enter the hex values of the foreground and background elements.
The tool will then calculate the contrast ratio between the two elements and whether the ratio is sufficient for normal text, large text, and non-text (graphical) elements.
Check out our color contrast article for a list of effective color contrast tools. 80% of our current projects have some color contrast issue(s), so design and content teams can easily affect digital conformance by focusing on this accessibility concept!
ARIA
ARIA (Accessible Rich Internet Applications) is a set of roles and attributes that provide screen reader users with extra information when necessary.
For instance, a Facebook button could have an aria-label attribute of “Facebook” to inform screen reader users that selecting the button will direct them to Facebook. With proper ARIA, screen reader users can often understand certain web elements.
However, ARIA should only be used when necessary. Unfortunately, it is common for us to see an overuse of ARIA when performing website assessments. Developers should always use native HTML elements rather than ARIA whenever possible.
Native HTML elements have built-in accessibility features that are more straightforward than ARIA elements. A WebAIM survey of more than one million home pages found that pages with ARIA averaged 41% more errors than home pages with no ARIA.
Also, roughly 68% of Allyant’s recently delivered accessibility audits have unnecessary ARIA attributes that we have identified as areas of improvement and usability for our clients.
Focus Indicators
A focus indicator is a visual highlight, like a glowing border, that shows which part of a webpage you can interact with using the keyboard. It helps people, specifically those unable to leverage a mouse, visually see where they are on the page.
This is one of the most critical elements of an accessibility assessment since keyboard-only users typically navigate websites using the Tab or arrow keys.
Focus indicators are beneficial for these users to let them know where their focus is on a particular page. Since keyboard-only users cannot use a computer mouse or other pointing device, they must rely on focus indicators to navigate websites effectively.
This can very quickly make a website entirely inaccessible for individuals with physical disabilities.
The best practice is not to use custom focus indicators but the default browser focus indicators. Browser focus indicators have become much more accessible to users with visual impairments in recent years, so using those makes sense (and saves a lot of time and energy).
If you still wish to use your focus indicator, you must add a border, outline, etc., and not only rely on a change of color. Custom focus indicators must have a contrast ratio of at least 3:1 with surrounding colors (more on color contrast later).
Tab Order
Tab order is the sequence you move through within various parts of a webpage by pressing the “Tab” key. It helps users jump from one clickable or editable element to the next.
So, when a keyboard-only user uses the Tab key to navigate a webpage, the tab order must be logical. An illogical tab order could be highly confusing or a really poor and inefficient experience, especially for keyboard-only users.
Imagine tabbing through a webpage and having the focus skip sections, for instance. Keyboard-only users would be extremely disoriented by having their focus suddenly skip portions of web pages and then focus, eventually returning to the section the user initially was in.
A logical tab order makes web content significantly more straightforward for all users to comprehend. Illogical tab order could be very problematic for users with cognitive disabilities as well.
Alt Attributes
Alt attributes are the HTML code where you can add descriptions to images. This is why the first rule of alt attributes is that all meaningful and non-meaningful images need alt attributes.
Without alt attributes, screen readers will attempt to read the image’s filename aloud, confusing users. Images that convey meaning should include alternative text that accurately describes what is visually in the image. Accurate alternative text ensures an equitable experience for users who cannot visually see images.
Images that do not convey meaning, such as decorative images, need empty alt attributes (alt=””).
Empty alt attributes let screen reading software know those images are only for decoration and can be ignored, so users don’t have to listen to unnecessary image descriptions. Again, even if an image is decorative, it needs an alt attribute!
Check out our article on alt text best practices for more advice on alt attributes and alt text.
Allyant is Here to Help
Contact our team about these common web accessibility violations or any other digital accessibility questions!
While these are some of the main things to consider when focusing on building a more inclusive digital experience or wondering about the types of issues a robust digital accessibility audit would uncover for your team to resolve, there are many more potential issues to watch for within the full context of the WCAG success criteria.
It is also important to remember, as we often articulate to clients with “curb cut” digital accessibility concepts such as good color contrast and separation among headings and captions, that solving accessibility issues benefits ALL users, not just those with disabilities!
