I recently had the opportunity to give a beginners talk about website accessibility at MidCamp 2016 where I covered some easy ways to promote accessibility in terms of structure, color and contrast, fonts, links, and media. It was a wonderful experience for me and I was grateful for the audience who had some nice feedback and interesting questions. Here are the highlights of the presentation, plus the audio recording and links to related resources.  

Just the Facts

Website accessibility is for everyone and benefits everyone.

57 million Americans (over 18%) have some type of disability— and not all disabilities are visually obvious. Mediacurrent has some great resources to help you understand the basic principles of web accessibility like our vocab overview, how to design websites for everyone, why you should care about web accessibility, and best practices for content editors.

The Path to Accessibility

Wondering where to start? Here are five rules to follow on your journey toward accessibility:  

Rule #1: Don’t Freak Out. There is a ton of information out there about website accessibility. No one expects you to know everything about everything. It’s ok to say you don’t know something. Which brings me to my next rule…

Rule #2: Learn a Few Things. Read an article, watch a video, attend a webinar, chat with someone on twitter. If you focus on one aspect of accessibility at a time, you will not get overwhelmed and you will retain the information better.

Rule #3: Build from the Ground Up. If you have the opportunity, build accessibility into the beginning of a project. It will be more difficult, more timely and thus more expensive to retrofit your site for accessibility after the site is complete.

Rule #4: Use the Right Tools. There are lots of accessibility tools that wonderful people spent lots of time creating, so use them. Use tools during the build process (ex. using Color Safe to check color combos) and after the site is finished (ex. using WAVE to evaluate accessibility errors and alerts, etc)

Rule #5:  Try, Try Again. Keep in mind that even adding one or two accessible pieces to a website is moving in the right direction. The next site might have four or five pieces. “Rome wasn’t built in a day” and neither are accessible websites.

Yeah, it’s that Easy

Now we come to the “easy” things you can do to incorporate accessibility into your website. I say easy in quotes, because collectively all of these tasks seem a bit difficult or at least overwhelming, but really each task on its own is easy to accomplish.

In the fall of 2015 a team at Mediacurrent in conjunction with BlackMesh accepted the OpenAIR, Knowbility challenge to create a website in a month that was fully accessible. As a team we chose to redo the website for Grey Muzzle, an organization that improves the lives of at-risk senior dogs by providing funding and resources to animal shelters, rescue organizations, sanctuaries, and other non-profit groups nationwide.

Before we even began the challenge, our fearless accessibility leader Mickey Williamson gave us lots of resources and guidelines. Here are some of the things she had us think about while we were building the site.

1. Structure

Considerations:

  • Users with screen readers (blind, low vision, etc)

  • Users with reading disorders, learning disabilities, or attention deficit disorders

  • Search engine robots

  • General user experience

Easy Wins:

  • Plan out heading and page structure - make sure it makes sense to readers

  • Add page titles for browser tabs and ‘skip to content’ link - both useful to screenreader

  • The heading hierarchy is meaningful

  • Try not to skip heading levels - so h1 first, h2, h3 etc.

  • Use a markup validator tool - test the page to make sure you didn’t forget something in your mark-up

2. Color & Contrast

Considerations:

  • Users who are colorblind or have low vision

  • Monochrome displays

  • CSS/JS disabled or text-only browsers

  • Users viewing a site under less than ideal circumstances (low-light, glare, etc)

Easy Wins:

  • Use colors on the opposite ends of the color spectrum - avoid red/green and blue/yellow combos

  • Be careful with light shades - hard to see for people with low vision

  • Do not rely on color alone to convey info to your users - for example, make sure your links have underlines or some other indicator besides color

  • Use solid color backgrounds - reading text on busy backgrounds is difficult, especially if it does not have enough contrast

  • Use color/contrast WCAG standard testing tools - WCAG levels are basically measuring contrast ratios. 4.5:1 was chosen for level AA, while 7:1 was chosen for level AAA. Typically most sites just need a AA level, but some government agencies must achieve the AAA level

3. Fonts

Considerations:

  • Users with reading disorders, learning disabilities, or attention deficit disorders (ex. dyslexia, ADHD)

  • Users with low vision

Easy Wins:

  • Use a limited number of fonts and provide alternative fonts - if you can provide accessible fonts as an option, that is great. If you can use true text that is also great. True text enlarges better, loads faster, and is easier to translate.

  • Specify the font size in terms of %, em or a relative value

  • Use adequate font size - 10pt min

  • Limit the use of ALL CAPS. All caps can be difficult to read and can be read incorrectly by screen readers.

  • Limit the use of font variations (ex. italics, bolds, etc)

4. Links

Considerations:

  • Users with screen readers (blind, low vision, etc)

  • Users who cannot or choose not to use a mouse

  • CSS/JS disabled or text-only browsers

  • Search engine robots

Easy Wins:

  • Differentiate links with theme elements besides color (ex. underlines) - make sure links are recognizable

  • Use descriptive link text

  • Do not use images for links

  • Avoid super short or long links

  • Design link focus indicators. Ensure keyboard users can visibly identify links

  • Ensure link text makes sense on its own. Avoid “click here” or other ambiguous link text, such as “more” or “continue”

5. Media

Considerations:

  • Users with visual disabilities (seizure disorders, blind, etc)

  • Users with auditory disabilities (deaf, hard of hearing, etc)

  • CSS/JS disabled or text-only browsers

  • Devices with small displays (phones, tablets, etc)

  • Search engine robots

Easy Wins:

  • Use animation, video and audio carefully and selectively- Select images carefully and provide a clear, complete and concise alternative text description. The description may be provided in the alt attribute for the image, in the page content, or a combination of these techniques. If you are using videos or slideshows, provide at least a play/pause button. Ensure controls have descriptive labels, instructions, and validation/error messages.

  • Avoid flashing/strobing content - This kind of animation can trigger seizures.

  • Provide alt ways to access content - video transcripts, captioning.

  • USE ALT TAGS!

    • Be accurate — convey the information or function represented by the image.

    • Be succinct — do not burden screen reader and text-to-speech application users with listening to large amounts of text.

    • Avoid being redundant — within the alt attribute or with page content.

    • Avoid the use of phrases such as "image of ..." or "graphic of ..." — most users will be aware that an image is present, either by visual observation or as informed by their adaptive technology.

    • The use of an empty alt attribute (alt="") completely hides an image from screen readers — not even the presence of an image is announced. This is used for strictly decorative images that you want to hide

Challenge

Now time for your own challenge…the next time you build or design your next site, I challenge you to take one or two accessibility tasks from each section and try to incorporate it. Like any new skill, incorporating these tasks might seem awkward or take a little more time than you are used to, but you will soon see that these tasks will become second nature to your build or design process.

 

Resources

The following links will give you a head-start on some of the accessibility resources out there. I have listed some links to good general information as well as guidelines, checklists, and tools that might be useful.

General

Guidelines & Checklists

Tools

Tags
Drupal
Development
Midcamp 2016
a11y
Accessibility
Presentation