The letters W E B in braille

The letters W E B in braille

Web Accessibility

Crystal Cooper wakes up every morning and grabs her laptop, opens her favorite browser and begins checking all her daily sites that she visits regularly.  However, unlike me and you, the site is being read to her by a screen reader.  Crystal is blind, and can not read the screen by herself.  She depends on designers like me to make sure the sites she needs or wants to visit are coded to for the visually impaired.  Now if you have never really considered this problem as a designer then today is the day you should.  The WEB should be accessible to all and it shouldn’t be a chore to visit our sites for anyone.  As a matter of fact any site that receives funding for the government must be accessibly designed.  Lets take a look at a few ways you can start making your sites accessible. Later on this month I will be forming a tech report on this very subject, here is a little glimpse into what you can expect.

 

Headings

Having your page organized is an extremely important thing and should be one the first things you consider when planning your page design.  Headings are one of the most important things you can use to help the visually impaired.  When a screen reader is given a page to read, the first thing it tells the user is the structure of the page.  The user can then decide which section they want to start on, and then tell the screen reader where to go.  Without having appropriate headings and page structure, the user has no idea where sections begin and end, and the content is then just read as one big lump of text.  Below is an example of a good way and bad way to using and creating headings.  We will dive more in-depth into headings in the tech report which will come out at the end of this month.

Examples of how you not to structure your page with headings.

Examples of how you not to structure your page with headings.

The proper way to use headings for accessibility.

The proper way to use headings for accessibility.

 

Color Blindness

Being partially or completely blind isn’t the only visual impairment out there when it comes to browsing the web.  When designing your sites you need to be mindful of the color schemes you use.  If you use colors to designate different areas of your site, and the colors are not contrasting then to a color blind user, they may not see or understand your visual cue.  Here is an example of the colors your users may encounter with color blindness.

colorblindexampleAs you can see in the normal color example, the range of colors is big, and a user with no visual impairments can see the full spectrum.  However, that same color range tested on someone with Protanopia ( the loss of the color red sensitivity ) the colors blend together and just become darker.  So imagine if you used black text on that colorful website, then all your colorblind user will see if shades of dark colors, and more than likely the text will be hidden within the colors.

 

Full Tech Report

access

As I mentioned previously, at the end of the month I will be releasing my tech report which will detail many different ways us as designers can improve our coding / methods for our users who depend on the accessibility features that are so rampantly lacking on most webpages.  Until then I encourage you to read over a few of my favorite resources.

Usability.gov

Colorblindness Simulator

Vischeck.com