Eric is a Boston-based designer who helps create straightforward solutions that address a persons practical physical cognitive and emotional needs.More aboutEric

Partially Visually Hidden Text

Digital accessibility tends to be taught through the lens of how your experience works or fails to work with a screen reader. It makes sense to think that if it works for a screen reader it will also work for a lot of other kinds of assistive technology.

Website Development Company

However this approach also indirectly reinforces the narrative that blindness is the majority experience. Within this narrative there is also some subtlety in the fact that not everyone who uses a screen reader is blind.

The majority disability experience is actually depression which is a complicated disability with highly variable symptoms. One of the most notable symptoms of depression is that it negatively impacts your cognition which affects your ability to understand things.

The other salient bit is that the majority experience is not default. The point Im getting at is that overcorrecting for one form of disability may unintentionally negatively impact the experience for other forms of disability voice control software being one example.

Website Maker In Ludhiana

Making each links accessible name unique is an important thing to do. It helps clarify where each link goes to someone who is navigating via a specialized screen reader browsing mode. For example all major screen readers have the ability to list all the links on the current page or view with the links being removed from their surrounding text content and context.

Problems With Partially Visually Hidden Text

Eleven links called learn more dont make a lot of sense when separated from their surrounding context. Its far better to tell the reader what theyll be learning about

If you use CSS libraries such as Bootstrap or Tailwind you may be familiar with a specialized class that a screen reader can read but is not displayed visually. These classes help provide additional context such as supplying additional heading elements to help with way-finding.

Best Web Development Company In Ludhiana

Another thing visually hidden classes are commonly used for is to hide the portion of an interactive control that makes its name unique. A common pattern for this is a call-to-action CTA link in a card component

The typical reason the visually hidden text is inserted in the first place is that the designer of the card component decided that the truncated look of the CTA link looked cleaner. This aesthetic decision is made because of a historical lack of accessibility concerns in design education.

In this case the aria-label declaration provides the unique accessible name. Many developers are quick to use it even though ARIA is something you should only use when there are no other alternatives. Misuse of aria-label

More About Voice Control Software

Partially visually hidden text while helpful for people who use screen readers can negatively impact others. Truncated CTA links can be problematic for people who

Voice Control on macOS and iOS both dont support being able to directly say Click learn more since they are listening for the full accessible name of the link. This includes the visually hidden portion.

Since part of each link is visually hidden there is no way to know each links actual accessible name unless youre augmenting your browsing experience with a screen reader or with a developer tooling to inspect the underlying code.

The reason I am focusing on voice control software is because it presents a potential objective access barrier. Sadly concerns around subjective barriers are commonly dismissed by people not immediately impacted by them.

If you are unfamiliar voice control is one of the many ways you can use a device that doesnt rely on a mouse keyboard or physical touch. As its name implies you use your voice to issue commands and specialized software will translate that into things like navigating entering and editing content.

The Question And The Choice

Meet Smashing Email Newsletter with useful tips on front-end design UX. Subscribe and get Smart Interface Design Checklists a free PDF deck with 150 questions to ask yourself when designing and building almost anything.

Voice assistants are another form of voice control software. Examples of this are Apples Siri Microsofts Cortana and Amazons Alexa. These voice assistants are interesting in sense that they can accomplish some but not all of the things that more full-featured voice control software can.

There are also third-party applications that provide specialized voice control functionality. Two notable examples are

There are more people who use voice control than youd think. If youve ever asked Siri to set a timer congratulations Youre a voice control user

That being said software like Voice Control Dragon and Talon are designed for more long-form specialized use. People who use these applications may temporarily or permanently and circumstantially or biologically be

What About Truncated Text That Uses An Ellipses

Disability is also not a binary state so it is entirely possible and relatively common that multiple disability conditions may be present at any given time.

Some voice control software has the functionality to work around this issue the same way screen readers do. Dragon for example uses heuristics to identify links that contain the term learn more. It then lists a number for each link with that term which you can then say choose number to activate.

Most other voice control software allows you to display numbers that map to all the interactive controls currently on the screen. If that doesnt work they can also display a grid and let you zoom into an area of the screen for precise selection and manipulation.

The larger question is why do we force people to do all this extra work Partially visually hidden link text isnt necessarily a hard WCAG failure but it is also not a good user experience.

For macOS and iOS you can only activate partially visually hidden link text if you know the other commands to work around the issue. That means it is a question of digital literacy how familiar you are with this specialized software as well as technology in general.

What About My Unlabeled Icon Button

For voice control software that offers heuristics the question is why do we force a disabled audience to expend more effort per link than an abled one Remember that this interaction can happen multiple times per session as well as nearly every time someone browses the web. Its a draining exhausting experience.

One vital aspect of user experience is making things work for anyone regardless of circumstance device or ability. Or as Billy Gregory puts it

When UX doesn't consider ALL users shouldn't it be known as SOME User Experience or SUX a11y

In addition to embarrassing issues that can crop up by truncating text that is longer than its container an interactive control that has part of its name obscured by ellipses can be hard or impossible to activate without using showing numbers/grid functionality.

Another example of this is a button that doesnt have the benefit of any visible text. The more obscure the icon and abstract and minimal visual treatment it uses the harder it can be to understand.

What About My Pixel-perfect Design

You might think this is a contrived example but remember that tech and language literacy jargon and an aesthetic treatment can all conspire to prevent someone from knowing what an icon represents.

Again voice control software offers workarounds for this. However I repeat the question asked earlier Why do we force people to use them

When you update your partially visually hidden link text you may get link names that extend to more than one line. If the link is placed inside a card component and there are multiple card components arranged in a grid there is the chance that cards will have varying heights. And you know what Thats totally okay.

A CTA link extending to multiple lines is one example of the sorts of things you should already be considering. How your components can handle things like

If you need to update your existing work to accommodate these kinds of real-world considerations youll probably have to collaborate with content writers developers and project managers. Design thrives in this kind of collaborative environment where you can identify and work with the limits of the systems you work inside of.

How Do We Make Sure Our Experiences Are Easy To Use By Voice Control Software

Sometimes youll be able to tweak what you already have. Sometimes youll have to create net-new content. Sometimes youll even have to throw it all out and go back to the drawing board. These efforts all speak to the value of a Shift Left methodology where these kinds of considerations are named and dealt with early in the conception phase.

These steps will go a long way towards making using voice control software easier and more pleasant.

Your designs need to be flexible and adaptable as well as be able to accommodate the many different ways people can interact with them. This includes voice control as well as numerous other forms of assistive technology.