Webdesign Ideas

Designing For People With Accessibility Needs

The people who use the web are not a homogeneous mass but rather a huge group with incredibly high diversity. Many of them are not native English, or highly educated city dwellers with excellent health conditions. When we design for the public we need to pay attention to this fact; otherwise, we miss out on many potential users, as well as a great possibility to boost the search engine rankings of a site.

Universality and inclusivity are in the focus of the Accessibility web standards that are one of W3C’s web design related standards. The final goal of the Web Accessiblity Initiative (WAI) is to design a web that works “for all people, whatever their hardware, software, language, culture, location, or physical or mental ability”.

When we think about accessibility the most important thing we need to understand is that a user doesn’t need to have full loss of a sense or an ability to be in need for accessibility support. People who have problems such as partial sight loss, or mild hearing impairment also have acessibility needs.

Now let’s see who are the main groups, how they use the web and how the careful designer can improve their user experience.

Visual Impairments

People in this group can have mild or moderate vision impairments in one or both eyes, colour blindness, low vision, blindness or deaf-blindness

In many cases there is a need to change the presentation of the web content to adapt it to their needs. They require the ability to resize text size and images, and to customize fonts, colours, and spacing to increase readability. It’s also a good idea to ensure that people who can’t see the mouse-pointer can navigate through the content using only their keyboards.

Many visually disabled people use screen readers that only work properly if the frontend is semantically coded, otherwise their special assistive softwares can’t identify the structure of the web page and users would hardly be able to make sense of the content.

We need to provide these pages with proper descriptions for hyperlinks, icons, images, and other media types with the help of explanatory alt and title HTML attributes. The rule of thumb here is to make an equivalent text alternative available for each non-textual element.

It’s also important not to stop users from configuring their own browser settings, so if it’s possible, specify everything in relative units (ems, rems, or percentages) instead of exact sizes.

In fact, the bots of Google and other search engines can also be thought of as visually disabled agents, and keep in mind that everything that is good for visually impaired humans also pleases the bots thereby improving the SEO ranking of a site.

Auditory Disabilities

Web users who suffer from hearing impairments of different grades can’t always understand speech, especially when there is a background noise. The most frequent use case here is video content, that needs to be made accessible by adding visual assistance to the audio part.

According to the Media Access Group of the WGBH Radio “an estimated 24 million Americans have enough of a hearing loss that they cannot fully understand the meaning of a television program”.

Using closed captioning in which background noises such as music or explosions are also captioned can help them a lot. Providing options for captions and transcripts can also significantly improve the experience of people who are not native speakers of the recorded language.

We also need to be careful when designing web and mobile apps. If users have to rely solely on interactions using voice, people with auditory disabilities or those without proper audio hardware or software will be excluded from the usage.

App designers also need to pay attention to always adding options to stop, pause, or adjust the volume. Apple TV is an excellent example of a device designed with the deaf and hard of hearing in mind, as it provides them with a nice user interface to customize subtitles and captions to their individual needs.

Auditory Disabilities

Cognitive and Neurological Disabilities

Disorders related to the brain or the peripheral nervous system impact how people move, see, hear and understand things. There are many people who need to process information slower than others, so we need to provide them with clearly structured content that facilitates orientation.

It can also help if we offer different ways of navigation: not only one huge dropdown menu, but also tag clouds, search option, breadcrumbs, and other smart and easy-to-understand solutions.

Enhancing the content with visual cues is crucial when we want to enable people with cognitive and neurological disabilities to understand the information we want to convey to them. Images, graphs, illustrations, and smart typography such as avoiding long paragraphs can do a lot for them.

Reducing the number of distractions like flashing or blinking ads and annoying popups can keep many of them on our sites, just think about those with ADHD (attention deficit hyperactivity disorder) or autism.

If you want to see an example of carefully designed, logically structured content with accessible navigation and descriptive visual cues, take a look at the U.S. government’s Social Security Administration site.

U.S. Government Social Security Administration

Physical Disabilities

Physically disabled people can have motor disorders, limitations of sensations or muscular control, joint problems, missing limbs, and can face many other physical impediments.

Probably the most important thing related to them is always providing full keyboard support, and giving enough time for them to complete tasks such as filling online forms, replying to questions or editing their previous content in comment sections.

Offering keyboard shortcuts, especially on touch-enabled devices can be godsend for this group.

Physically disabled people can face with difficulties when clicking small areas, so we always need to make sure that we design large enough, clickable areas like buttons.

It’s also important to keep in mind that many of them use assistive hardware or software. They can access the content with the help of an on-screen keyboard navigated through with a trackball, or they can use voice recognition or eye-tracking softwares.

Because of this, just like in the previous cases, it’s crucial to build logical, coherent navigation and a well-structured site without too many distractions.



Creating web experiences for disabled people is an excellent design practice. If we build a site that takes the needs of the sensory impaired into consideration, we design a product that is logical, well-structured and easy-to-use. This is not only good for the disabled, but for every single user, as they have the same need for an intuitive and customizable website that is easy to understand.

If we give users a choice about how they want to consume the online content, and carefully think about all the possibilities they might interact with our site, we increase the overall user experience of our design in a significant way.

Now Read:
10 Assistive Tech for People With Disabilities

The post Designing For People With Accessibility Needs appeared first on Hongkiat.

Webdesign Services

Fresh Resources for Web Designers and Developers (April 2021)

A great product these days relies on the ecosystem. Imagine iPhone without the apps or WordPress without the plugins. They won’t be as useful as they are now.

In this round of the series, let’s take a look at some of the resources that support popular tools or libraries. Here we have quite a handful of React.js libraries, a couple of WordPress plugins, some VSCode extensions, and a lot more. Let’s jump in for the full list.

Fresh Resources for Web Designers and Developers (March 2021)

Fresh Resources for Web Designers and Developers (March 2021)

JavaScript is a wonderful language. You can build nearly anything with JavaScript; from a simple website, desktop application… Read more

Mesh Gradient

A Figma plugin that allows you to generate a beautiful Mesh Gradient. It allows you to edit the gradient axis to achieve a perfect gradient. Having Mesh Gradient can easily make your product design stands out from the crowd.


A WordPress plugin to notify actions that happen on a WordPress site. This plugin provides quite extensive APIs where you can do customization like sending notifications to selected recipients, call services, subscribing to particular actions, and whitelabeling. It’s a great plugin to keep you updated with your site activity.


Spatie Ray

A plugin that connects your WordPress site to Ray.app, Spatie Ray is a desktop application that makes debugging and measuring code performance on your website more convenient. It is also available for some frameworks and CMS such Craft and Laravel.

Spatie Ray


Webhint is an initiative from OpenJS Foundation to help developers build a better web by advocating and creating tools such as this VSCode extension and the browser extension to enforce some best practices.

This tool scans your code or your website and reports if the HTML is lacking in proper attributes, or if the site has some accessibility and performance issues.



A desktop application for macOS that allows you to register a script to automate your tasks such as opening a browser and reading news, opening particular files or directories from a project, search for a book from particular sites, and much more.

It provides several pre-made scripts and will soon also provide collective scripts shared from its users. Script is written in Node.js or JavaScript, so if you’re familiar with the language you can create a custom script that suits your needs.


Laravel Octane

A Laravel library that greatly improves the performance of a Laravel application by leveraging high-performance PHP server environment Swoole or RoadRunner that enables concurrent requests. This allows Laravel to run blazing fast at 6000 req/s from the initial test.

Laravel Octane


PHPMon is a macOS utility application to monitor the PHP service that runs on your machine. It adds a menu on the menu bar where you can see the PHP version that’s running, the extensions, and where the location configuration is. Pretty handy!



A collection of a beautiful hand-crafted collection of more than 200 icons. They come in two variants, Solid and Outline, and are available in SVG and JSX format so you can easily reuse them in your website or digital products.



Focalboard is an open-source application to manage and organises tasks similar to apps like Trello and Notion. You can install FocalBoard on your own server or computers that give you more freedom and flexibility. A great alternative for those who prefer control over convenience.


Gutenberg Icons

A collection of icons used by Gutenberg, the new WordPress editor. This site shows all the icons where you can generate the snippet to reuse it in Gutenberg block or simply download the SVG.

Gutenberg Icons


A collection of tools to generate shapes, backgrounds, and patterns to use in your design. It features a number of tools including one to generate a Blob, a Wave, Layer Waves, gradients, and a few more to come.


Design Patterns

A collection of design patterns to structure your PHP codes. It covers various patterns and is recommended source if you intend to deep dive and improve your PHP development skills.


Accessibility Path

A collection of learning materials to know about web accessibility and inclusive design. You can find books, videos, articles from blogs, and tools. A great source to help you get started with the topics.


Code Tour

A VSCode extension to add a guided tour to help users walk through the codebase in a project. This is a great tool to help new developer to get familiar with the code quickly.


React Hook Form

An award-winning React.js library to create form. It is easy to use, lightweight, performant and renders proper markup with native HTML validation. On top of that, this library is also nicely integrated with tools like TypeScript for type validation, ReactNative for building form in a mobile app, and Validation library like yup for those who need go more advanced.



A framework to build desktop applications with web technicalogies. Tauri focuses on performance, smaller app output, and provides a whole experience for developers to create an app. It provides CLI, API, Testing and CI framework. An example of an app built with Tauri can be just 600KB.


React Admin

A React.js library to develop a web application to manage any kind of data. It’s built on top of modern stack which includes REST and GraphQL APIs, ES6, React, and Material Design. This library is a great starting point to build an admin interface using React.js.

React Admin


A JavaScript library to build an interactive text editor for modern browsers. It looks modern and clean than the usual WYSIWYG editor and is extensible with Plugins. It also generates a well-structured data that you can use anywhere on the website, mobile app, AMP, Instant Articles, and speech readers.



A good resource that show you code snippets and tips to interact with DOM with just native API from the browser. These days you no longer need to use jQuery or Zepto.


Awesome Compose

This is where you can find an awesome list of tools, apps, that can help to boost your productivity when working with Docker and Docker Composer.

Awesome Compose

The post Fresh Resources for Web Designers and Developers (April 2021) appeared first on Hongkiat.

Did you miss our previous article…