Beyond the Basics: Advanced Accessibility Techniques

We’re seeing many trends this year with artisans considering building their own websites. I’m writing a series this year for Handmade Seller to share an often overlooked area of website technology- accessibility. This is a topic that many people don’t fully understand. This series will help you understand what’s behind the topic of accessibility, what different platforms have to offer to meet accessibility guidelines, and how to help you make the decisions that make the most sense for your business. This month, we are digging into advanced accessibility techniques.

Digital accessibility goes much further than color contrasts and alt text. These are vital aspects of accessibility design, but many people are not aware of the varying techniques that go beyond the basics. An example being, some people with impaired vision will zoom in on a website to help them understand navigation and content. This makes it important for us to think of how someone zoomed into the website may use it, such as navigation in the same column/row and ensuring vital content isn’t exclusively found in hover states.

There are many ways different people navigate a website beyond using their mouse and standard view. Let’s take a look at a few ways we can make the digital world a more equitable place with advanced accessibility techniques.

Tips to Make the Digital World More Equitable through Accessibility

Screen Readers

People who are blind or visually impaired rely on screen readers to navigate website content with spoken text or through braille. You may be familiar with screen readers using alt text, text added to images either in the code and/or website image gallery to give context and describe what’s in a picture, but are you aware that screen readers navigate the website through headers and links as well? This is one of the many reasons why correctly labeled and tagged elements are important to implement into your website.

ARIA labels

ARIA labels provide information of a coding (HTML) element to screen readers and other adaptable technologies. It helps the screen reader know what kind of button, checkbox, or tab are highlighted.

Example:
<button aria-label=”submit” title=”Learn more about advanced accessibility techniques”>Read the Article</button>

The screen reader will now read this element as “submit, button” and not just “button” giving the screen reader user more context to what they are interacting with instead of leaving them guessing.

Keyboard Navigation

Visually impaired individuals are not the only ones who benefit from properly labeled elements. Many people with dexterity issues or who experience difficulty with movement use keyboard navigation! You can try this for yourself on most websites. Using the tab key on your keyboard, you can navigate a website via its links and interaction elements. Ask yourself while you do this:

“How do I know what I am interacting with?”
“Does the link text/label have enough context for me to understand what I am interacting with?”

Obvious hover states and focus states (visual indicators that show which element on a web page is currently selected) for buttons and links, descriptive link text, and labeled elements, and properly tagged form headers are some crucial ways to make your website navigable with keyboard and/or screen readers. Headers that are properly tagged as H1, H2, H3, and so on, are also integral to aiding navigation with these methods. All this is crucial for both sighted and visually impaired users.

It may seem daunting to make sure all these elements are properly labeled and designed, but it gets easier with practice, and with time it becomes second nature. It’s worth it to ensure everyone can enjoy the same online spaces and not feel othered.

Voice Navigation

Similar to keyboard and screen reader navigation, voice navigation allows a user to navigate through voice input alone. An example of this would be a voice input user speaking the name of the link or button they want to interact with. This is another reason why buttons, links, hyperlinks, and so forth require a clear and concise label/text so the voice input user can navigate your website with minimal effort.

Example: Instead of using bare bones wording like “Click here” to label a button, use descriptive labeling such as “learn more about voice navigation.”

Links to a New Tab

When a tab opens in another window or tab, it can confuse users using adaptive technology. It’s good practice to use a visual or textual indicator that a link will open in a new tab or window.

In general, it’s best to only have links open in separate tabs/windows only when necessary. An example being, a link opening in a new tab to prevent loss of information when filling out a form.

You can also incorporate ARIA labels for link navigation as well to provide more context about where a link may open.

Zoomed In Web Accessibility

Responsive design is when a web page can change format from desktop, Ipad, and Mobile. This isn’t only great for device adaptability, but also amazing for those who navigate a website zoomed in.

Some people who are visually impaired, zoom into a web page to navigate to their needs. Those who need a closer look can benefit from a well done responsive design. When zoomed in, many sites will zoom in with a responsive design where you can see the mobile or ipad format on your desktop browser window. Thinking about how this view affects navigation, can help make your website more accessible.

Another thing to consider when designing for users who navigate zoomed in is those who have a browser plug-in that allows them to zoom in like a magnifying glass vs the screen layout adapting to an iPad or mobile format. As previously mentioned, having your navigation in a consistent column/row is crucial to those who zoom in, in this fashion. Another benefit is that this aids in overall user experience.

More about zoomed in users, is that if navigation or vital information is hidden in hover states, it can hinder their ability to use your website. It’s not guaranteed that the information in said hover state will be in their view, which can lead to confusion for the user.

Form Control

Creating accessible form controls is an important factor when creating forms everyone can use effectively. These forms can include login screens, contact pages, and address and payment fields for online shopping.

A form control is any interactive element on a web page that allows users to input data or make selections. Examples include:

Text boxes
Checkboxes
Radio buttons
Dropdown menus
Submit buttons

How can we implement proper form control for accessibility? A lot of it resides in the code with HTML elements.

Think of a form on a website like a set of containers for information. Each container (which coders call an “input”) needs a label so your users know what kind of information goes inside. Each container needs a label defining what the container is “for.” These “for” labels help everyone, and especially adaptive technology users, know what goes where, and what kind of information needs to be in the containers.

Example:
<label for=”email”>Email Address:</label>

How Do I Check My Website?

Using browser plug-Ins like the WAVE Evaluation Tool can help those conduct accessibility checks on their own. Keep in mind, WAVE doesn’t pick up on every accessibility design guideline violation, such as global navigation items being in separate columns/rows, but it is very good at bringing attention to where the code and labeling of a website’s elements can be improved for better accessibility.

You can check out our article about Your Go-To Accessibility Checklist & Resources for more information about robust accessibility testing tools.

Key Elements for Web Accessibility

Here’s a breakdown of advanced accessibility elements and techniques to review when you’re ready to take your website to the next level:

Clear labeling: Use descriptive labels for links and interactive elements to aid screen readers and voice navigation users.
ARIA labels: Provide context for adaptive technology users.
Keyboard navigation: Ensure visible focus states for keyboard users.
Automatic New Tabs: Clearly mark links that open in new tabs, using visual and textual cues. Use sparingly.
Responsive design: Supports both mobile users and those who zoom in for better visibility.
Layout consistency: Keep navigation and vital information in consistent locations in the same column/row, avoiding hover-only content.
Well-labeled forms: Use proper form controls to guide all users on input requirements.
Accessibility testing: Utilize tools like WAVE to identify and address accessibility issues in your website’s code.

Remember: These techniques are intended to help you better understand accessibility requirements and best practices, not overwhelm you and make you feel like you need to become a web designer just to have a website for your business. We recommend taking it one tip at a time and start with the basics while remaining mindful of how other users will experience your website.

Want to read the whole series? Check out these articles:

Part 1:How to improve accessibility for your website

Part 2: Improving website accessibility- who creates the standards?

Part 3: Semantic code- what is it, and why is it important for accessibility?

Part 4:Website accessibility in Popular Platforms

Part 5: The issue with website accessibility overlays

Part 6: Equal Access, Diverse Content: Navigating Accessibility in Media

Part 7:User Interface Design and Accessibility

Part 8: How Accessibility impacts SEO

Part 9: Tools to test how accessible your website is (or isn’t)