Helpful Links

Navigate OHIO

About OHIO Admission Athletics
Academics Life at OHIO

Connect With Us

Bobcat Depot
1 Park Place
Athens, OH 45701
help.ohio.edu

Accessible Design

Accessible Design

One of the myths about digital accessibility is that it keeps designers from creating beautiful and interactive content.

This is simply not true.

While accessibility is a design constraint that requires skill and creativity to incorporate, it could be argued that accessibility is a hallmark of great design.

Design is art with strategy, and strategy cannot happen without usability.

The WCAG guidelines offer a way to make information and communication technology (ICT) available to as many people as possible. The guidelines are rooted in usability principles - which means that ICT will become more usable for everyone whether or not they live with disabilities.

However, for people living with disabilities, our choice to implement the WCAG guidelines means the difference between accessing ICT or being completely shut out of digital participation.

These design topics touch on some aspects of accessible design and will be expanded over time, but you can dive deeper on the W3C Web Accessibility Initiative's (WAI) website, "Tips for Getting Started Designing for Web Accessibility".

 

Adding Accessibility to Design Requirements

Whether you are designing a websites or form or a menu interaction, be sure to annotate accessibility requirements into the documentation you provide for developers. For example when you are designing the way a form looks, specify meaningful form labels and add a notation to the developer that the form must be accessible.

Adding accessibility notations to your documentation is a great way to set the stage as early as possible for integrating accessibility requirements into software and web design projects.

Please plan some time to watch this YouTube webinar, Translating Design Wireframes into Accessible HTML/CSS, to help you get started.

Here is a handy checklist to help you create more accessible web and application designs.

Color on the Web

Color Contrast

Whenever there is text in a design, be sure the contrast between the background and text color has at ratio of at least 4.5:1 depending on the font size. You can use WebAim's Color Contrast Checker to verify.

See Understanding Success Criteria 1.4.3 for more information.

Communicating Using Only Color

Color can be used to help people better understand context or where they are on a website or when they've made a mistake and so much more. But for people who are color-blind (about 10% of males and about 2% of women) if color is the only way something is communicated, they may miss it or misinterpret it. Be sure to use more than just color to convey information. You can also use text, symbols or shapes as well.

See Understanding Success Criteria 1.4.1 for more information.

Fonts

Font Sizing

People with low-vision should be able to increase the size of the fonts of a website 200% without breaking the layout. If a website is not designed with this in mind, the developer might be tempted to disable a user's ability to increase font sizes in order for the layout to look nice. Fortunately this ability has been disabled on Apple operating systems, but it may still be an issues with other operating systems. Font sizing must be left up to the user and never disabled in code.

See Understanding Success Criteria 1.4.4 for more information.