Case Study | Welcome

Designs About Accessibility

This website aims to communicate the web accessibility needs outlined in the WCAG (Web Content Accessibility Guidelines) website, while creating an accessible website in itself. The audience of this website is the community of graphic and web designers who are looking to learn more about how to make their designs accessible.

This Project Was Filled With Multiple Obstacles

The number one challenge to think about was what information was important and that needed to be included. The next obstacle delt with how to organize the information in an accessible way for everyone in my audience
to understand.

Success of the Design

This website offers different components and a easily understood layout to help designers be successful in their own designs. The high contrast in the color scheme allows for readability and legibility. The text is concise, informative, and easily readable. The website includes illustrations and icons that helps to explain the text that goes along with it, and also distinguish the different parts of the website. The layout is in a logical reading order and the website gives multiple examples of accessible design to teach the audience.

Illustration of a desktop computer with the sight, hearing, and motor accessibility icons on it.

Simplistic Icons

The illustrations of simplistic icons are meant to serve as direction and visual supplementation on the website. The icons serve to lead the audience to different areas on the website as well as correlating with the information in the text.

Color Palette

These colors were chosen to display on the website because of their high range of contrast to one another. According to the web accessibility guidelines, the dark and light colors in this palette gave enough contrast to be displayed on top one another. This contrast is needed to make the website accessible for all audiences.

#022333

#159A9C

#DEEFE7

#B4BEC9

#FFFFFF

Illustrations of Individuals

The illustrations of individuals are meant to showcase the three types of disabilities discussed in the website. They serve as icons and symbols to lead the audience to the Hearing Disability, Sight Disability, and Motor Disability pages, while also showcasing on the page itself. These illustrations aim to humanize the discussion of disabilities in related to web accessibility.

Illustrations of Web Graphics

The illustrations of these web graphics are meant to showcase web accessibility. They serve as visual supplementation to the information displayed discussing web accessibility. These illustrations are meant to be very simple so they do not distract from the information in the text.

Illustration of a laptop computer with a mint colored screen and three accessibility icons coming out of the screen.

Illustration of a laptop computer with a mint color background with a dark blue icon of a head next to the computer.

Illustration of a laptop computer with a screen with a mint colored background with accessible icons on top with the title "Accessible?"

Illustrations of Examples

The illustrations of accessibility examples are meant to show the audience an example of what the text on the website is referring to. These illustrations are meant to be very simple so they can easily be understood and supplement the text.

Illustration with a mint colored background with a dark blue video illustration on top.

Illustration with a mint background and a dark blue illustration on top with with a play button.

Illustration with a mint background and a dark blue illustration on top with an image with alternative text on top.

Illustration with a mint colored background with a dark blue design on top with the home icon.

Illustration of mint colored background with a dark blue design on top with the button "click here!"

Illustration of mint colored background and a dark blue design on top with a symbol of a paragraph of text on top and then bullets points on the bottom claiming a better length of text.

Illustration with a mint colored background with a dark blue design on top with the words "Writing tips!"

Illustration with a mint colored background and a dark blue design on top of "ABC".

Illustration of a square with dark blue on the top with mint colored lines on top of it. Below that is a mint colored square with dark blue lines on top.

Paragraph Style (P)

Kantumury Bold

18pt

Heading 4 Style (H4)

Kantumury Bold

25pt

Heading 3 Style (H3)

Kadwa Bold

35pt

Heading 2 Style (H2)

Kadwa Bold

45pt

Heading 1 Style (H1)

Kadwa Bold

60pt