Web design brainstorming with post-its on a wall

Five Easy Ways to Make Your UI/UX Design Portfolio Disability-Friendly

In an age where everything is on the Internet, job demand for people who understand user experience (UX) design and user interface (UI) design is high. While UX deals with overall customer satisfaction with a website, UI refers more to the way a website looks.

If you’re thinking of studying UX/UI in web design school, consider how people with disabilities might approach a site or app. According to the CDC, roughly one in four adults in the U.S. are living with a disability of some type. These numbers are even higher when you include those who are disabled in other countries.

A user-friendly web design portfolio is not only a stronger portfolio, but it also has a much larger audience. Hence, a web design portfolio with projects that can’t be easily used by people with disabilities has major design issues.

Below are some easy ways to make your UX/UI projects more accessible for people with visual, motor, or cognitive disabilities.

Keyboard Accessibility

Giving websites keyboard accessibility is helpful for a wide range of disabilities, including visual and motor disabilities.

For example, can a person who can’t use a mouse or keypad use their keyboard to move around your website? Can they also use their keyboard to use interactive features, such as links or text fields?

One way to make your site or app keyboard-accessible is to allow tabbing. Users can explore your site or app by tabbing from one element to another. Make sure that tabbing on each page is in the right order, so users can navigate your page in a logical way. You don’t want someone to hit tab and jump from the top of your site to the bottom!

Of course, there’s more to keyboard accessibility than tabbing. Ideally, users should be able to rely entirely on a keyboard to interact with your site.

Academy students in computer lab

Contrast Ratio

To make projects in your web design portfolio readable, you should pay attention to the contrast between the text and the background.

This is mainly to help people with visual disabilities like dyslexia, although it’s also a good practice for readability in general.

Keep in mind that larger or bolder fonts tend to be easier to read than smaller or lighter fonts. As a result, larger or bolder fonts don’t always need as much of a contrast ratio. However, this isn’t true for all fonts, since some stylized fonts can be hard to read despite their boldness.

Alt Text

Alt text, or alternative text, serves many purposes. It can be used to help your site show up in Google searches, for instance. It is also an important feature for people who rely on screen readers, such as those with visual disabilities or chronic migraines.

But what exactly is alt text?

Well, it’s a written description of any image you have on a site or app. Making this text accessible means keeping it short and to the point, so users can hear the information they need. Lengthy alt text that goes on forever makes it hard for people to follow along when listening.

Visible Navigational Aids

Navigational aids, such as a navigation bar, hyperlinks, and site map, should be highly visible.

Avoid hiding these elements or making them difficult to find in your web design portfolio. This allows people with cognitive or visual disabilities to easily get to where they want to go on your website.

Volume Controls and Captions

For people who are deaf or hard of hearing, make sure that your site has volume controls that they can easily adjust. Caption any media players or videos on your website, so anyone can follow the content.

Furthermore, adding options for changing the colors and text size of captions is even more helpful, as it ensures that users are able to read the text without any problems.

Building a Web Design Portfolio at the Academy

Clearly, this post like this can only skim the surface. An accessible web design portfolio has to include all of the above and then some!

But building a portfolio takes time, resources, and mentorship—all of which you can find at Academy of Art University. Our Interaction & UI/UX Design program can help you make important industry connections, gain that vital UX/UI know-how, and so much more.

Find out how we can support your future in UX/UI design by requesting information today.