image The Case For Accessibility As Standard Practice image Programming Languages

Clickfarm Clickfarm

Implementing An Accessible Website

Website Accessibility Elements

We have buy-in from all parties involved that our website should be accessible and mobile-friendly. How can we make sure that the content we’re providing is accessible to everyone? What are the considerations to actually put an accessible website into practice?

DESIGN

Copy and Colors: For users who have a degree of color blindness – as well as for those who have low vision of any kind – text and background colors that insufficiently contrast one another can make it difficult, if not impossible to read.  (Eight percent of males are color blind – there are estimated to be over 250 million color blind people worldwide. About 135 million people around the world have low vision.) With color blindness, colors that may not seem incompatible may cause issues for these users. Some will be unable to differentiate certain colors, and many who have advanced color vision deficiency will override your color selections, so it’s important that the meaning of content is never conveyed by color alone.

Font selection and size is also a consideration. Many fonts that work very well in a headline treatment aren’t easily legible as body copy. Presenting text at an adequate font size for readability is also key. Small text is frustrating for users on desktops and mobile devices alike. Finally, using all capitals as a design treatment also decreases readability and can even be misread by some screen readers.

Content Arrangement: For users who rely on text readers and other assistive technologies to navigate your pages, content arrangement is key. If a user can’t use sight and/or a mouse to navigate, cues provided by content organization are the only method of accessing the content that you’ve worked so hard to curate. The additional benefit of considering content organization upfront is that it results in a better experience for all of your visitors. This step is necessary for a mobile-first design strategy [/blog/content/designing-mobile-first] and it’s content-first ethos.

The University of Michigan has a notable web accessibility design guide that can help in making competent design decisions with accessibility in mind.

DEVELOPMENT

Through best practices, a good developer makes sure that the elements of your site are properly labeled. When set up correctly, proper semantics will benefit your site twofold: allowing assistive technologies to properly navigate your site and access all content, as well as providing beneficial SEO that results in better organic search results.

MEDIA DISPLAY

When properly set up in the design and development phases, the majority of the accessibility work is behind us, leaving just a few common things to keep in mind. Images are one of the easiest elements to make accessible, yet also the most easily overlooked. They simply require meaningful alternate text (alt attribute). All CMS’s provide for this, it just needs to be implemented.

The most challenging accessibility practice – that easily provides the most benefit – is including transcripts for videos. By providing transcripts, you are making sure that everyone has access to your content, and as a bonus, this includes search engines, providing for valuable organic SEO!

TESTING

Now that your site is ready to launch, head on over to http://wave.webaim.org/ to see how you did. This is a terrific tool that helps to point out anything that may have been overlooked. Test any website, even see how we did at Clickfarm.

About Matt Shoaf, Interaction Development Director
Matt uses his unique experiences as a jazz saxophonist, adapting the free-flowing collaboration needed there to keep an eye on the big picture of his front-end code, resulting in optimized websites and applications that work harmoniously across multiple devices and platforms.