How can styling and color schemes improve accessibility? Let’s discuss how to accommodate users who have visual impairments, and look at media accessibility.

Color and style are also as important as writing accessible code. As disabilities vary, so do methods of tackling the problem by creating platforms that will accommodate all users.

As much as making a platform accessible boils down to semantic HTML, modern platforms don’t rely on HTML only. Styling handles the look and feel of the platform, and this means that it affects the way our final product is perceived by the user. We have to make sure that the UI is flexible and that we can scale it for different screen sizes.

TL;DR

In Part 1 of this article series, we looked at the concepts of focus, focus management, using ARIA to bring semantics to some elements and also its ability to help restructure the accessibility DOM for assistive technologies. You might want to take a look here.

In this article, Part 2, we will be looking at the importance of having the right set of styling for your web design and the use of accessible color schemes to improve accessibility. We will be covering a few concepts surrounding media accessibility, looking at how to accommodate users who have visual impairments.

Focus Styling with Pseudo Classes

For a user to be able to know what element is currently in focus, by default the browsers make use of what is called the focus ring. This is, by default, a blue ring around elements that are in the accessibility tree and follow a tab order.

Now, like other default styling, we might sometimes wish to modify the appearance of the layout and will not be able to continue with the default styling. This is where the CSS pseudo elements come into play: :hover, :focus, :before.

The :focus Class

The focus class only matches when the element is in focus, and we can add an outline to the element in focus. However, because of the way different browsers interpret the outline property, it is more advisable to make use of a :hover. Implementing a background color and text decoration would be a way to create a custom focus, or by using the box-shadow property to make the focus more notable. We can see these in the code blocks below:

button:hover{
  backgroud: #8373;
  color: #fff;
  text-decoration: underline; 
}

button:focus{
  outline : 0;
  box-shodow: 0 0 5px 4px rgba(255,255,124,0.5);
}

Note: outline: 0; is not advised, as it is not common practice.

Responsive Design for Accessibility

In modern times, creating platforms that can be viewed by multiple users on multiple devices has become very essential in all parts of development. As a matter of fact, it makes no sense to build a platform for just one specific platform. Now the question is how responsive design comes into play making platforms accessible.

Text Size to Screen Ratio

Sometimes, some users may have difficulty reading small print and will want to zoom the page to be able to read the text. When this happens, it would be great for the user to be able to do this without losing all the other content on the page and keeping all the important stuff in view.

Here are a few ways to achieve this:

• Use a meta view-port tag—This gives the page instructions on how to control dimensions in its scaling.

<meta name="viewport" content ="width = device-width", initial-scale=1">

What the above tag does is instruct the browser to fit the content to the screen so that the user has a better view depending on the device they are using.

• Use relative values for text—Maintaining the right unit for text can go a long way in planning for zooming by users. E.g., using % when expressing a unit relative to a block, em to represent font size relative to the font size of the parent, rem to represent font size relative to the font size of the root. This would cause the elements to be fluid and resizable.

• Use larger touch target around icons—This allows some space between the icon and the surrounding (48 dp is recommended). Some padding can be added around the icon to help with reaching this goal.

Media Accessibility

Media accessibility mostly deals with the visual aspect of accessibility with respect to color usage and also, as the name implies, making sure that the colors on your application can accommodate a lot of user disabilities, either by using patterns to highlight various color differences or by creating features that would enable such users to manipulate your platform to suit those with visual impairments.

More simply, media accessibility refers to how a user sees, understands and uses your platform.

Note: Over 60% of the world’s population has some visual disability.

Elements of Media Accessibility

• Color usage —This is concerned with how colors are combined to achieve a more comfortable visual experience.

• Text and background combination—Implementing a proper blend of text and background contrast can help the user actually read what the content is communicating.

Types of Visual Impairments and How to Accommodate Them

• Photo-phobia / Light Sensitivity—This is a type of visual disability that is mostly associated with bright colors or light. Users with this sensitivity find it hard to interact with platforms that are too bright. These users would prefer to have an alternative, and this is where dark mode comes in. A lot of applications have adopted this solution, such as Twitter, Facebook and Apple with the release of iOS 13.

• Contrast sensitivity—Readability is also very important in planning out visual content on a web page. Usually, users run into the problem of contrast sensitivity when reading text over images that lack the necessary contrast between the text and background that helps to make it readable.

• Deuteranopia (red-green color blindness)—This case of visual impairment comes generally with people who have difficulty distinguishing between reds and greens. This becomes a problem for example in the ecommerce industry where a user might purchase the wrong color or outfit because of the lack of ability to distinguish between certain colors (also a problem for other color-based visual disabilities). This can be solved by using tags for images on hover to display the color of the shirt when the mouse is on it or by using patterns when normal objects are involved.

Noteworthy Accessibility Pointers

I have taken the liberty of compiling a few CSS best practices:

• Don’t use icons only. Icons mean different things to different cultures. Add descriptive text in your menus, etc.

• Use animations to direct attention to specific important things. Remember, if everything is important, nothing is important. Provide a way to turn them off, as some users such as those with ADHD might prefer your site with reduced animations. Also, epileptic users can be triggered by flashy animations.

• One option is using tools like prefers-reduce-motion CSS, a CSS media query that changes how animation displays depending on an operating system level preference. We could also add playback controls to give the user more control over interfaces. Content warning is also important.

• Do not convey information with color only.

• Use striped buttons in color blind accessibility mode. What this does is allows the user to notice the button regardless of the color (it’s a way of being safe when your colors might not be visible to users with color blindness).

Conclusion

There is a lot to consider when dealing with accessibility for the web. As users vary, we as developers also have to accommodate these users by making sure we do everything in our power to create an awesome web experience for them.

Implementing some of the cool solutions we have shared in this blog post might be the first step to creating an awesome web for all. In the next part of this series, we will be focusing on auditing platforms to check for accessibility.