June 14 2023

The Hidden Aspects of Website Accessibility

website adaBy now, most people seem to know enough about website accessibility to know why it’s important. They tend to know to ensure that alt tags on images are in use and to choose colors that are suitably visible on the page. But when ZAG builds a site, there’s much more included that you may not know is there to help people who have an auditory, cognitive, neurological, visual, speech or physical disability. What does ZAG include on a site that isn’t obvious to many users but is helpful for those with disabilities?

Enhanced Bypass Blocks

Any accessible site with more than 4 header items prior to the main content will include a “Bypass Block” so that a user can choose to skip more directly to the content without having to move through the menus first. FYI: Some call the bypass block “skip-to links.” ZAG doesn’t just include “Skip to Main Content” but also considers the site and what would be most useful for an end user. For example, if the site is for a financial institution, we include a way to skip directly to online banking.

Letter, Word, and Line Spacing + Text Size

On all browsers, including Safari, Chrome, and Firefox, the end user can choose to change the spacing between letters, words and lines to be as readable as possible for the individual. Likewise, they can choose to make the text bigger. Many sites will not allow these changes because they don’t want to risk the site’s layout breaking. ZAG not only allows the end user to change settings, but we build sites so that alternate spacing and size will not cause content to be cut-off or become otherwise unreadable.

Zoom and Pinch to Zoom

Like being able to change spacing and the size of text, the end user can choose to use their browser to zoom into the page. And just like spacing and text size, some agencies will disable the ability to zoom into a page because they are unable to guarantee the page stays legible when zoomed. Why? Because it’s easier to develop this way. But easier doesn’t make it right. The user with ideal vision doesn’t know that ZAG has given extra consideration to browser zoom so that the users who need all elements to be bigger can do so easily on their desktop and smartphone with no negative impact on readability or layout.

Mobile Accessibility

It’s probably easy to understand why mobile experiences must be as accessible as desktop experiences. But why does ZAG make mobile interfaces accessible with a keyboard? Some users rely on hardware input devices (adaptive switches) for any device they use, including phones and tablets. Additionally, if the user zooms enough, the mobile interface will be displayed even on a desktop site and that interface must maintain all aspects of accessibility and on a ZAG built site, it will.

Additional Instructions

In an ideal world (but one in which disability still exists), every site would function identically and exactly as all users expect. That’s not the real world. Sometimes, functionality is implied based on interface changes, however, only users with ideal vision might be able to see those changes to know what to do. In that case, the site’s developers need to ensure that extra information is provided even if it’s only for screen readers. All aspects of site strategy, design, build, and maintenance at ZAG consider all potential users. You can be confident that all users will have what they need to be successful because ZAG will include instructions only available for assistive technology users.

Similarly, for any content that expands or collapses like an accordion, an extra step is taken to ensure that the end-user knows what state the content is in. If one selects to expand an accordion, when it expands, the user is told “expanded” so that they know their content has appeared on the page. And for a locator, when you perform a search, you might see that results load on the page. But if you use a screen reader, how would you know something happened? The visual users would see if they had too many results from too wide a query or maybe not enough results and you’d want to try something else. But if you use a screen reader, you wouldn’t be able to make that assessment. Not on a ZAG site. Unbeknownst to many users, when a locator search is executed and the results change, the screen reader user is not only told that the search was executed but they are told how many results were returned. 

Tab order for content that “appears”

A staple of many websites is popup content. But this content can be a problem for keyboard and/or screen reader users. Agencies that do not consider all users will have a popup appear on the site that blocks the content beneath, but they don’t know to move the keyboard focus into the modal dialogue (popup.) Therefore, the keyboard user can end up tabbing around the content beneath the popup and are unable to close it while also being able to see what is behind the popup. ZAG will not only guarantee that focus moves into the content that appeared, but extra instructions will be included to ensure the user knows they are in a popup, so they have a hint how to handle it.

Escape Key <Esc>

ZAG also includes a way for screen reader users to quickly disregard a popup by enabling the <Esc> key on the keyboard to close the dialogue. Keyboard users rely on shortcuts like this to efficiently manipulate the page. Likewise, on a modern ZAG site, menus or anything that appears on the page can be closed quickly. This is a function that a Developer must manually enable, but it’s something ZAG does as a best practice for every site build.

Labels for Visual Elements

It’s not unusual for a site to have icons without text but it is a common accessibility violation. Anytime an icon is present, text should be included to describe to someone what that icon signifies. For elements like Search however, it’s allowed because it’s standard behavior that a magnifying glass means Search. But a screen reader can’t “read” an icon so it will say nothing if no additional text is added. That’s why ZAG will always include text for assistive technology. Likewise, if there’s a multi-step process with visual cues, ZAG will include instructions only available to the screen reader so that all users can take advantage of the module.

Doing the Right Thing

ZAG has been building sites for over a decade against the current WCAG standards, and our goal is always to make a site that is accessible to everyone, not just to avoid lawsuits. While some development agencies will do the bare minimum because it’s easier, it doesn’t make for a site that is truly inclusive. Contact us to learn more about what we do.

  • Website Compliance

posted by
Dan Seagull
Dan Seagull
Sr. QA & Certified Accessibility Analyst

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.