Website Accessibility – A Brief Background

web-accessibility-introAccessibility is incredibly important for websites as one of its goals is to be usable to the widest possible audience.

This includes not just the usual people you’d expect to be browsing the web, but also individuals with disabilities.

The Internet is just as helpful to them as it does to able-bodied persons, so having a website be accessible to them is very important.

In order to make a website accessible to a wide audience, the design must be done in a way that makes it readable and usable to anyone. Other than that, screen readers and other accessibility tools may be used for those who may not be able to see well.

The Internet is worth making accessible to everyone, which is why your website’s accessibility must never be overlooked. By accommodating those who may not be as capable in viewing your website as ordinary folks would, it shows you as empathic and thoughtful, not to mention that it gets more views as an immediate result.

 

Table of Contents

Part 1: Web Accessibility Laws
Part 2: Guides on Website Accessibility Compliance
Part 3: Learn to Make Your Website Accessible
Part 4: Accessibility Testing for Mobile and Desktop

 

A Look on Web Accessibility Laws

Section 508

The UN Convention on the Rights of Persons with Disabilities has been ratified continuously through the years, and it promotes access for people with disabilities for new communication and information, especially from the Internet.

People with disabilities have been given the opportunity to access new information since 1998 when the Congress amended the Rehabilitation Act of 1973 requiring Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. This law applies to all Federal agencies whenever they create, develop, maintain, or use electronic and information technology.

Because of Section 508, agencies are now required to give disabled employees and members public information that is comparable to what is accessible and readily available to others. The formation of Section 508 has developed standards for accessibility for EITs to incorporate into regulations that govern Federal practices.

Organizations like majority of the government agencies, many educational institutions, industry and Non-Governmental (Non-Profit) Organizations (NGO) are the primary respondents subjected to these laws on web accessibility.

Because of the different demands that stem from the need to comply with this law, here’s a list of guides on Section 508 Compliance:

  • What is Section 508 – a basic run down of what Section 508 is, along with answers to questions like why comply, who is responsible, myths and facts on Section 508, and what is Section 504.
  • Section 508 Checklist – it’s a checklist of standards on HTML and Scripts, Plug-ins, Java, etc. This may not be the official checklist for Section 508, but this checklist has provided the ideal guidelines set by the said law. It is also available on different translations for international users.
  • Section 508 Tutorial – basically a tutorial on implementing the checklist for Section 508 compliance made by Jim Thatcher. It’s a detailed and thorough tutorial to implement accessibility on your website.

 

Guides on Web Accessibility Compliance

With the evolution of how we distribute electronic data through numerous platforms, compliance is oftentimes an issue. The disabled can access information through tablets, smart phones, and the desktop PC.

On the other hand, there are varying degrees of disabilities, making it somewhat difficult for web designers and developers alike to cross implement it into different platforms. Section 508 was created without any mind for user interactions and experience, let alone coding and building a website that readily complies with the law. To simply put it, it’s a big, ambiguous guideline for web developers and designers who are looking for ways to make websites comply with Section 508’s requirements.

W3C, along with the help from various individuals and organizations around the globe, has come up with a single shared list of standards that web developers and designers alike can understand more clearly when it comes to making a website accessible.

The Web Content Accessibility Guidelines (WCAG) is currently on version 2.0, updated to help various individuals in the field of web development and design to implement certain accessibility points that can help disabled users of the Internet in accessing useful information through websites.

WCAG 2.0 consists of 12 guidelines governed by 4 principles: perceivable, operable, understandable, and robust. This guide does not only give out recommendations on what should be done in a website; it also suggests how you can implement accessibility functions within the website through the help of examples and snippets of HTML Codes.

Aside from WCAG 2.0, here’s a compilation of tools, guidelines, and checklists that you can refer to for more information:

  • Building & Managing Websites – this is a good reference section in HHS.gov. Not does it only include tips on building and managing websites, but it also includes tips on mobile accessibility optimization. It’s a simple guide you can use to optimize the content you have in your website.
  • The Web Developer’s Guide to Accessibility – the A11Y Project was created in order to help web developers in developing websites for accessibility. It features How-tos, Myths, Quick tests, Quick tips, Assistive Technology and Basics.
  • Mobile Accessibility Checklist – mobile internet usage is still on the rise even for the disabled; Mozilla Developer Network created this guide on mobile accessibility. Check your mobile website for color, visibility, focus, text equivalents, handling state, and other general guidelines.
  • Real Advice for Web Designers on Accessibility – an insightful interview on web design accessibility.
  • Tips for Designing Accessible Websites – AskJAN’s guide features 10 tips on accessible web design. Each tip consists of a quick tip on how to check for it, a testing tip on how to identify problems, or if a function is working, and a design tip for execution.

 

Tips on How to Make Your Website Accessible

Setting up an accessible website involves working on the following web design elements:

Typography

Typography is an important element in designing a website. Using a readable font type can help people with vision impairments to recognize or read words without any confusion.

Stanford Online Accessibility Program summarized WebAIM’s guidelines for choosing the correct font to use in your website:

  1. Use real text rather than text within graphics.
  2. Select basic, simple, easily-readable fonts.
  3. Use a limited number of fonts.
  4. Ensure sufficient contrast between the text and the background.
  5. Avoid small font sizes.
  6. Use relative units for font size.
  7. Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
  8. Don’t rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
  9. Avoid blinking or moving text

 

Content and Images

In optimizing content within the website, both written and imagery, accessibility should always be applied foremost.

Check out this guide on how to format your content for accessibility:

Website Accessibility - HostingFacts

 

Videos

There are three things you can do to optimize your videos for accessibility: Captions, Transcriptions, and Audio Descriptions.

Captions should be properly synchronized along with the audio. As much as possible, the captions should have equivalent words as spoken in the video. Use a video player that enables access to toggle captions on and off.

Provide a transcript below the video. The transcript should include all spoken words and additional on-screen texts and visual cues important in the video; this makes it possible for the disabled to understand the transcript along with its cues without the need load the video; this can help the disabled who cannot see or watch the video due to technical difficulties.

Audio descriptions tremendously help in making videos more accessible for the disabled. These descriptive narrations recite visual cues within a video so those who cannot see understand what is happening in the video.

For more information on how to create accessible videos, visit the following resources:

 

Documents

It does depend on what file format the downloadable files are. In creating an accessible document such as a PDF, Word, HTML, or any other document, we recommend that you follow these pointers:

  • Be straightforward. Write the document in a presentable manner and be clear in giving important data. As much as possible, use simple terms so it can be readily understood.
  • Use headers. Headers help dictate the outline of the document so it’s easy to figure out the flow of the article.
  • Use lists. Lists easily enumerate ideas that makes it possible to simplify the overall content.
  • Never forget to tag the language used. Language tags help screen readers determine the correct pronunciation to use in reading the text.
  • Provide alt texts for images. Screen readers describe the images within the content through the alt texts you provide for each.

Ready to create accessible documents? Check out the following guides from the University of Washington in creating accessible documents on various formats:

 

Accessibility Testing for Desktop and Mobile

Accessibility Self-Testing

Before you can truly call your website “accessible,” you must first test it under stringent criteria in order to know if you got it right and if there are things you can fix or improve on. Usability testing is a standard technique for putting an interface design through its paces in a user-oriented manner.

Do remember that usability testing is not about showing a draft of the design to test subjects and asking if they like it because that’s mostly useless. It involves observing them trying to use the website in question for its intended purpose, then recording how quickly and easily they make sense of what’s in it, get from one place to another, find desired information, and be satisfied with their overall user experience.

If you plan on doing a self-test for accessibility, you can refer to the Web Content Accessibility Guidelines (WCAG) 2.0, along with the other guides above to manually check your website.

We recommend that you conduct moderated in-person usability testing using actual tools like NVDA (NonVisual Desktop Access), or VoiceOver for Mac users. Both are free to use and easy to download, so you can start testing your website for accessibility.

 

Accessibility Testing Tools

Here are some usability testing tools that can help make the process much easier to deal with:

General Accessibility Testing Tools

Use the following tools to quickly diagnose and run tests on your site for accessibility issues:

WAVE Web Accessibility Tool – use this tool to quickly diagnose your site for accessibility errors.

AChecker – this tool counterchecks your site against the WCAG 2.0. Export results

Tenon.io – this offers a better interface you can use for reporting on accessibility issues on your site.

Accessibility Developer Tools – installed through Chrome as an extension to use on your browser to directly check for accessibility issues on a website.

Accessibility Viewer (aViewer) – the Accessibility Viewer (aViewer) is an inspection tool for Windows that displays the accessibility API information (MSAA, IAccessible2, UI Automation, ARIA, HTML DOM) exposed by web browsers to the operating system, and thus to any assistive technology (AT) such as screen readers.

 

Visual Impairment Testing Tools

Use the following tools to test your site if it can be accessible for people with visual impairments:

Colour Contrast Analyser – the Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

Tanaguru Contrast-Finder – similar to the CCA, it finds correct color contrasts for web accessibility. You can edit the foreground and background color, as well as set a minimum ratio, since WCAG requires text to have a minimum contrast ratio of 4.5:1 (and 3:1 for large text).

Visolve – a software tool that transforms colors of the computer display into the discriminable colors for various people including people with color vision deficiency, commonly called color blindness. In addition to the color conversion, it also has color filtering and hatching capabilities.

 

Mobile Accessibility Testing Tools and Guide

These tools and guide can help you conduct usability tests for mobile devices.

Web Content Accessibility and Mobile Web – an introductory guide on optimizing mobile sites for accessibility.

Mobile Web Best Practices – this document discusses the best practices for mobile websites and the elements that can be optimized further.

Mobile Accessibility Tests – a specific guide for mobile accessibility optimization for distinctive mobile functions such as zoom, voice output, and inverse colors.

Additional resources: