So, you want to improve your site’s accessibility? Perhaps you’ve heard about other site accessibility initiatives, and you’d like to take the first steps towards bringing your site into conformance. Where do you start?
- Part 1 of a series on website accessibility.
- Making Your Site Accessible Part 2: Getting Started
- Making Your Site Accessible Part 3: What Does Conformance to WCAG 2.0 Mean?
- Making Your Site Accessible Part 4: Accessibility for School Websites
Image Credit: SpecialEffect
Why Accessible? And For Whom?
Why would you want to make your site accessible? Well, firstly, to address a wider audience to include those with disabilities and the aging population. That’s a sizable community: it’s estimated that 57 million Americans have a disability (19% of the population!). And there are approximately 50 million Americans age 65 and older who are more likely to have vision, hearing, cognitive and mobility losses as they age.
When you consider the wide range of disabilities that require accommodation, it’s not obvious how to prioritize for different needs. There are vision disabilities like blindness, low-vision and colorblindness. There are motor disabilities including paralysis, diseases and conditions (like arthritis, ALS or muscular dystrophy) or loss of limbs or digits. There are seizure disorders that can be aggravated by flashing content.
If we look at the prevalence of disabilities in the US, we find that the most common type of disability is an ambulatory limitation (7%), followed by independent living disability (5.6%), cognitive disability (5%), hearing (3.5%), vision (2.3%), and self-care (2.7%). It would seem that mobility limitations involving the arms and hands (a fraction of the 7% cited above), along with cognitive, hearing and vision loss are the priorities for web accessibility.
Making your site accessible takes work, but some of the effort you invest can improve your site’s indexing and search ranking. That’s because adding the cues that make the structure of the page clear to devices like screen readers also helps search crawlers index the content.
Technical Standards for Accessibility
WCAG 2.0 is the latest technical standard developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) which sets international standards for the Internet. There are 12 guidelines organized under 4 principles:
Perceivability has to do with making your content comprehensible by those with vision and/or hearing disabilities. Content should be transformable from text to audio (using a screen reader) or from audio to text (captions and transcripts) using proper ARIA (Accessible Rich Internet Applications) attributes. For those with both vision and hearing loss refreshable Braille devices can output text into Braille. Content should be separated from styling and background images and graphics should not interfere.
Image credit: WebAIM
Operability is concerned with alternative input methods to the standard keyboard and mouse. Persons with disabilities may use a mouth stick with a trackball mouse, a keyboard alone or voice controls. Scripts that rely on mouse-usage such as elements that appear on hover should have a keyboard alternative. Users should be able to find content of interest using a sitemap, search feature or site index. Page content should be organized with the help of semantic markup to indicate titles, sub-titles, sections, lists, tables, etc. Time-limited interactions, such as shopping carts, can diminish usability for users with cognitive and physical limitations.
Making your site Understandable includes considerations such as clear and simple language, use of alternative representations (video, illustrations, audio or animations), easily recognizable navigation and other interactive elements.
Robustness refers to the compatibility of your website with the wide range of technologies users may be using to access your content (devices, browsers, screen readers, etc.) Developers will have to strike a balance between utilizing the latest technologies with adaptations for accessibility versus accommodating older technologies still in use.
Each guideline has three conformance levels, designated A, AA and AAA. Level A criteria must be met for the most basic level of accessibility. To achieve Level AA, all requirements for levels A and AA must be met. Level AAA is the highest level of accessibility guidelines.
What Is ARIA?
WAI-ARIA (Accessible Rich Internet Applications) is a specification from the Web Accessibility Initiative at W3C, the same body that wrote the WCAG 2.0 standard. ARIA is a set of semantics that describe the role, function and state of interactive features on a website. These labels are also used to designate structures on the page like landmarks, grids and regions. ARIA attributes help assistive devices like screen readers orient users to the content on the page. For example ARIA labels can define the structure of a menu, indicate whether a checkbox is checked, a form element is required or a button is disabled.
Accessibility Best Practices
If you inspired to take your website to the next level of accessibility and are looking for a place to start, here are some best practices to follow:
- Choose a CMS that supports accessibility. (Learn about Drupal’s commitment to accessibility.)
- Use headings properly to organize your content. Use <h1> for the page title only. Don’t skip from <h2> to <h4>, for example, or screen readers may think content is missing.
- Include proper alt text for images. Alt text should convey the purpose of the photo, not just a description. Leave alt text empty for decorative images. Provide descriptive alt text for images that are links.
- Use descriptive text for links that explains the context of the link. Don’t use, “Click here”.
- Ensure enough contrast between text and background for users with low vision.
- Don’t rely on color as the only way of conveying visual information. Add non-color indicators like an asterisk, for example, to indicate required fields on a form.
- Label all form fields and/or use ARIA form attributes. Make sure tab order follows the visual order. Group related fields together with fieldsets. Use ARIA form attributes to indicate required fields.
- Avoid using CAPTCHA by utilizing these spam prevention techniques instead. If CAPTCHA is necessary, provide alternatives for users with disabilities.
- Provide for keyboard-only functionality for interactive elements.
Planning an Accessibility Initiative
For some, the best practices above may be enough. For others a greater level of conformance may be required and in those cases, we recommend an Accessibility Audit as part of the planning process.
In the next blog post in this series, we’ll walk through the audit process we use with our clients. We will take you through each step using the TEN7.com site as a test case and show you how we arrived at a prioritized list of initiative for improving our site.