Digital Accessibility: How Inclusion Solves Problems Beyond Design

However, the print industry designers who had the vision for progress and the feel for the magnitude of the internet did not want to settle with a spectator role.

The ones whose aesthetic mindset drove them to explore the unknown depth of this emerging avalanche, were destined to become the forefathers of Web Design.

Development of development

The industry of web development grew by leaps and bounds as the technologies would appear and attract more and more developers. In the early days of web development, every individual web page was delivered to the client as a static document, but in case of a multi-page website, the sequence of pages had to provide an interactive experience, as user input was returned through web form elements embedded in the page markup.

Every user input or any significant change to the web page required a round trip back to the server to refresh the entire page, which considering speed limitations of the dial-up internet, slowed down the interaction to the point where users would often lose the purpose. 

To compensate that, developers had to come up with various workarounds and attract web designers to contribute to the graphic UIs that would have users landed on them for extended periods of time. At the same time, the technical capabilities required a special kind of design – structured, tabled, gridded, and then sliced. In order to be functional, the design had to be implemental first.

With this approach, where did the end user stand? As a matter of fact, being an early internet user differentiated you from the rest into an exclusive caste of tech-savvy folks who actually knew what they were doing. This type of users would adapt to whatever they are given. Again, functionality came before anything else.

If the user can adapt to whatever you build for them, why bother about making it less complicated and ugly?

As hardware kept advancing, more doors began to open for web design as well. From 1994 to 1998, the changes were insane:

• Web-safe colors were extended to the count of 256.
• Color printers appeared to kick off the vivid internet era.
• Faux-3D effects came into play with those new color options
• Web-safe fonts signified the proliferation of multiple serif fonts.
• Marketers got to wet their beak in web advertising, providing a new job for designers.
• PHP was introduced to add flexibility to user input.
• Ruby need no introduction.
• Flash animation became the staple of web motion.
• CSS opened boundless layout opportunities.

All the discoveries and inventions led to over 100 million users online by 2000. The contribution of designers generally revolved around colors, fonts, and positioning of elements.

User experience existed as a voluntary and complementary psychological aspect of development.

This sort of Wild West existed up until “UX” became the umbrella term for everything affecting the way tasks are performed and the way users feel about them. From there on, the vague notion turned into an innovative discipline and shifted the focus from pure functionality to a more aesthetic field of perception. All of a sudden, catering to the user became an objective and a business principle of the online presence of entrepreneurship.

What was cool and exclusive for the smart kids, had to become available for everyone.

Ubiquitous access

As hardware kept moving towards becoming more and more affordable in both desktop and mobile, it became clear that a problem of exclusiveness that existed back in the day when the internet was a privilege, has a backlash in the current age.

The audience of the early internet accreted either from those already in the tech, or the empathic ones ready to jump on board.   

Early websites did not have to compete for exposure like they do now. The main value was simply being out there. As the result, it’s the users that had to adapt to whatever the natural symbiosis of data science and heavily limited design options had to offer. Of course, the questions of accessibility did not bother the community for a long time, as the general public was content with the abilities of the existing websites.

With the growth of the public exposure to the internet and implementation of software-based workflows in organizations around the world, the focus began to shift. Since any functional deviations catering to the individual needs of users were not commonly built in, people with special needs, disabilities, or impairments were often excluded from the user pool. Apart from a functional perspective, inaccessible products affect the industry in general.

Interestingly enough, we’ve already been there. We’ve had a chance to realize that without considering the particularities of the people we interact with. Thus, a quote:  

While we are contending for our own liberty, we should be very cautious not to violate the rights of conscience in others, ever considering that God alone is the judge of the hearts of men, and to him only in this case they are answerable.

– George Washington, letter to Benedict Arnold, Sep. 14, 1775

How exclusion holds us back

In the root of every technological effort lies the economic interest. The essence of economic interest is profitability. This narrative simplifies every product by taking it into the realm of two options – it will (not) generate revenue and how fast. If we strip a project off every marketing and cultural kit, we’ll get a simple and generalized picture.

Like any other generalization, building a commercial website operates on numbers and rates. Without getting into political correctness, this has nothing to do with ideology and neglect. We learn to build websites for the general public

As long as the money is green the design is mainstream.

But. It’s a proven fact that any industry faces stagnation once it stops challenging itself with new calls or stops evolving by being content with what has already been reached. When we are addressing something as mutative as human-computer interaction, we experience no shortage of ideas and horizons to conquer. However, what we do with these challenges is to increase the level of detachment between the technologies we create and the everyday users.

I’ll use a space analogy here. Neil Degrasse Tyson says we have so much space debris and junk in the orbit, that at some point it might become an issue preventing us from flying to space. What this is, is our passion for knowledge, progress, and constant thriving that made us blind to the danger we are creating.

By focusing on what works best at the time, we stalemate ourselves and suffocate evolution.

It’s not the evil intent, though that leads us to exclusion. Our natural defense mechanisms make us gravitate to the familiar experiences and something we are less likely to be held accountable for. Another reason is the new trends that push technology into the uncharted territories where it’s impossible to build things that are functional and accessible right away.

Accessible design assets

After being subjected to the problematics of building a website that is not only “out there” but is also “fun to use”, we started realizing that the actual experience matters just as much as the result of the task a user is trying to solve.

You can’t control the outcome of the interaction with your digital product, but you can control the journey towards it.

The question is how do you design anything if you have to consider everything? Where do we get the data about the specifics of every user or group of users? How do we satisfy one need without harming the other and the UX of our product in general?

Well, the good thing is most of the accessibility issues have been described and categorized. All we have to do is take a look at these impairments from the perspective of design, and web design in particular. This means approaching it with a certain mindset. Let’s call it “accessible mindset” and here are the assets of inclusive design. Each asset requires a deep understanding of the problem it helps deal with and the type of access it grants.

Understanding the mechanisms behind every impairment can help provide a solution for a whole class of users and turn them into a loyal audience.

Visual assets

Visual content is the leading method of conveying information while also affecting the emotional perception. This is a multi-level asset addressing the following aspects:

• Color
• Typefaces & legibility
• Animation & video
• Imagery

Accessibility through color

A lot has changed since the time when the 256-color palette was the holy grail for web designers, urging them to use all of the 256 colors in one layout. Color has become a powerful design tool used meaningfully. However, all the meaning vanishes if the user can’t see the colors or see them partially.

Color blindness or acritochromacy is a common impairment that some people often keep secret. Mark Twain, Paul Newman, and Meat Loaf are a some of the most famous color-blind people. The contribution these three idols made to the world culture binds us to at least be more aware of their problem when designing a website, I mean…

A common practice among designers these days is prototyping in grayscale. This allows them to concentrate on the structure and not get into the depths of a specific element design.

Grayscale also intuitively helps designers identify elements not only by color, which is the first towards color-accessible design.

Some flamboyant colors, as well as quick and flashing color changes, can trigger epileptic seizures or discomforting anxiety. Even those without any diagnosed visual impairments but with poor eyesight (like myself) can find themselves on the receiving end of inaccessible color design.

So before designing a color scheme for the interface, consider using the elements that can clarify or double the meaning you are trying to convey through a specific color, avoid oversaturated palettes, and consider the overlapping elements like texts and pictures.

Typefaces & legibility

One of the modern requirement for digital content is multi-screen compatibility. Web designers no longer have control or the grasp of the diversity of screen resolutions their design will be displayed on. From small pre-3G era phones to huge 5K projection screens, typefaces have to work on everything.

There is no doubt fonts are legit design elements carrying a certain portion of mood and meaning not only in the matter but also the form. More on typefaces for the web here.

Typefaces have to be accessible through easy recognition by children, people of different nationalities, and educational backgrounds.

Giving a user a certain deal of control over the typeface is a new common practice used by content (specifically, text) heavy web and mobile applications, like Medium.

The concept of legibility, however, reaches further than just size and trace of the font. It goes together with the overall text formatting including the syntax.

Accessibility through UI text means fair simplicity and conciseness of sentences, each expressing a clear idea with no ambiguity.

Modern day designers have taught themselves to use text boxes as transformable elements of the interface. This is where they can work with UX writers and word designers to make use of both the visual aspect of text design and the meaning it showcases. More on UX writing here.

Things to consider when designing text, all revolve around the concept of readability of the letters as well as the structures. The meaning has to be clear, textual elements must not disrupt the experience.

Animation & video

Animated transitions are not just cool little microinteractions to keep a user-focused before the ADD sets in. Meaningful animation is a powerful tool for engagement and entertainment that still has to be used responsibly.

People with vestibular sensitivity and photosensitive epilepsy must not be subjected to the certain types of animation where fast-paced pattern change and flashing effects create a potentially deadly scenario for them.

Safe animations are the types of transitional motion you have to consider before you create the design. There is a specific pace we operate on when browsing the internet. Websites can influence that pace. Consider, maybe through testing, what pace your platform suggests and don’t break it. Look for a way to emphasize the actions through animation, not the other way around.

Background videos are commonly used today as a safe pick to create a feeling about a product that could otherwise be formed by some other factors. By playing a video, you retain control over a user’s attention without letting them deviate in perception.

However, videos played without a command or displaying no controls over it can be harmful for a certain type of users.

Anxiety is a problem for a lot of people and autoplay videos and especially audios can scare users and forever deter them from coming back.

If the video runs with the sound, especially contains speech, make closed caption a default setting, along with the sound off as a default. Kind of like Instagram allows you to mute the videos by default and only unmute them once you see them.

Imagery

A large portion of information can be transferred through images. For commodity-based websites, this is perhaps the most important feature – the presentation. For service-based platforms and more abstract websites, images are important for setting the tone of the interaction.

However, different cultural and educational backgrounds define the way users understand the messages you are sending through the images.

Symbols used in icons and illustrations may mean something different in other cultures.

Some may be insulting, others – confusing. For example, the images of a rising sun, a la Imperial Japanese flag elicit an immediate negative response in some Asian countries.

It’s important to realize whether the image you are using serves scenic purposes only or has shades of meaning. If you are using meaningful imagery, it is better to have an escorting text or something that will emphasize the meaning and help avoid confusion. A common practice in modern web design is to use both, text and images. This way you give users a quick and relevant message and in case you are dealing with a picture person, the image dubs the meaning.

Provide accessibility through images by only using the visual metaphors that provide clarity, disambiguation, and neutrality. Always think of non-graphic clues to dub the meaning.

Architectural assets

In order to provide value, web designers have to study the dependencies between the bounce rates and design choices. Even with no regard to ADD, the general user’s attention span is so short these days, that the wait is lethal for conversion. This has to do with the way the website is assembled.

The content chunks have to come within a certain rhythm, logical sequence, and an engaging flow – something to keep the user “on the hook”.

Accessible layout means it feels natural and organic regardless of the user’s experience with the websites in general.

Maintaining logic is a way to keep users on track and utilize pattern recognition. Along with that, the flexibility of using the website regardless of the screen resolution and brightness settings has to be taken into account.

Another architectural quality is the structural clarity of your design. Users are getting bombarded with content and the cognitive load they have to deal with is already immense.

So anything that comes to ease that load will provide a delightful UX.

A lot of structural beauty comes from the concepts of hierarchy and symmetry. Both of them have a top, a pinnacle – something that overlooks the entire structure. In that case, a user has a goal and a reference point. As opposed to the chaotic experience, it’s easy to understand the website logic and pick up where you left.

The layout elements that help make website structure accessible are basically what you’d use to write a concise and clear article or presentation notes. This means it has to contain a nice headings system, bulleted and numbered lists, design system elements specifying the classes of objects.

Interactive assets

One of the most important features of modern digital production is users’ ability to interact with a solution. Be it through touches and gestures, mechanical controls, or voice command, the interaction has to be accessible.

Whenever you think of the UI controls, there is a common understanding most of us have of how we can accomplish tasks. The design goes off of this physical understanding.

Interface controls

The design principles manifested through UIs rely on the common physical abilities, only drawing the line at the proximity of small elements, visibility, and reachability. This is particularly important in mobile interfaces. However, accessibility reaches far beyond just general comfort. Compromised physical dexterity due to injuries, birth defects, or just because of the age is important when designing the UIs with built-in accessibility.

Since color is not a reliable user input media, the functionality has to be delivered through textual controls while retaining the feel of the physical control tools.

For this, controls have to be recognizable, visible, they must prevent touch errors, and be solidified by some sort of text or visual clue.

User input

A very important aspect of human-computer interaction is the ability to directly enter information through some sort of transmitter. Keyboards remain the dominant input media so far, with the question of accessibility being one of the biggest problems.

The reasons we stick to keys instead of say, voice UIs is anonymity. We don’t want our input to be accessed by someone it is not intended for. Second, typing is quite a fast skill. It requires literacy but is not affected by color blindness and deafness.

Keyboard accessibility has to deal with dyslexia, or difficulty deciphering characters.

With the advent of a special typeface, adding an extra keyboard is an accessibility option for hardware manufacturers, while designers can work on including dyslexic symbols into the UI.

Accessible mindset

Being aware of the assets that contribute to the website accessibility can not only help you build inclusive designs, but also expand the level of your understanding to the new realms.

If no limitations can prevent you from delivering a pleasant and valuable experience, what else can?

Being able to adjust by not compromising anything, but taking the solution to another level of usability for as many people as humanly possible is the ultimate value of accessibility that unfolds itself even if there is no impairment to fight against.

You have a responsibility to make inclusion a daily thought, so we can get rid of the word ‘inclusion.’ – Theodore Melfi