about this tutorial
Goal
The objective of this tutorial is to teach you the guidelines, fundamentals, and implementation of Web Accessibility to your website.
Lessons
This tutorial will teach users the functionality and how to properly use the following in Web Accessibility:
Section 508
WCAG 2.0
ARIA Roles
Plug-ins
Prerequisite
For this tutorial, you will need to know all the fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the previous website, School of HTML and CSS.
what is web accessibility?
As we know, everyone needs to access the internet at some point in today’s world. That includes individuals with disabilities. Because of the visual aspect, some web developers may not think about the needs of the visually and physically impaired when constructing their sites. However, all web developers need to know how to make their websites more user-friendly for people with disabilities or older people, since it is federal law to do so. This is where experienced web developers use Web Accessibility.
Web Accessibility techniques are used to assist users with disabilities to navigate through websites. This method will give all users, with or without disabilities, an equal opportunity to access a website. The emphasis of this tutorial is the Section 508 and WCAG 2.0 Guidelines, also, Accessible Rich Internet Applications Suite, as well as how to use Plug-ins are covered. To see examples of Web Accessibility, check out U.S government websites. Below are some examples:
Official U.S Social Security Website
Section 508
Section 508 is important but not well known federal law; it is added as an amendment to the Rehabilitation Act of 1973 by the U.S Congress in 1998. The purpose is to make information technologies of all federal agencies accessible to individuals with disabilities. In other words, as the U.S. Department of Health & Human Services describes the law:
Section 508 requires that all Web site content be equally accessible to people with disabilities. This applies to Web applications, Web pages and all attached files. It applies to intranet as well as public-facing Web pages.
Although, Section 508 mostly applies towards websites of the federal government, it is still a good idea for you to have Web Accessibility knowledge as more sites are becoming more compatible for users with disabilities. For more information, please visit the Section508.Gov website. To make sure that your website has Web Accessibility, click on the button below to download the Section 508 Checklist for HTML and Scripts, Plug-ins, Java, etc.
wcag 2.0
Helping web developers to make their websites’ Web Accessibility are the Web Content Accessibility Guidelines (or WCAG 2.0). Following and keeping these recommendations in mind can help you achieve Web Accessibility, when designing a website. The ideas behind WCAG 2.0 are fairly simple with a few alternations, if you have a clean and understandable website design then you just add in some wrinkles. WCAG 2.0 Has four principles, including: Perceivable; Operable; Understandable; and Robust. To understand the four WCAG 2.0 principles, we will look at each principle.
Perceivable: Your site must allow users to be able to receive information through other methods that they can comprehend. For instance, audio and touch for the visually impaired. The guidelines for Perceivable as follow:
Adaptability: Give your website a clean, organized structure by using a semantic markup with headings with proper name for the content. Also, make sure the user can resize the text on your webpage. You can add a widget that allows increasing and decreasing font size learn from this tutorial, Jquery: How to a Resize Text/Font size widget to your website.
Dissimilar the content: Give your content a different color than the background color.
Control over content: All not-text content like forms and video should allow users to control them. For instance, do not allow videos or audio play automatically.
Media: Give all videos caption and transcript options.
Text-alternative: Give all non-text content a clear, yet simple, text alternative attribute.
Example:
Bad: <img src="IMG/iphone6.png" alt="Iphone" />
Good: <img src="IMG/iphone6.png" alt="Buy the Iphone 6" />
Operable: The navigation of your website needs to be fully functional, the user will must be able to read the content. Likewise, the content should not flash as it can cause seizures. The guidelines for Operable as follow.
Avoid flashes: When designing a website, limit content such as flash animation to no more than three flashes per second. Because, this type of content could cause seizures in users with Epilepsy.
Keyboard: Make sure the content, page-scrolling can be control by a keyboard.
Control over content: All not-text content like forms and video should allow users to control them. For instance, do not allow videos or audio play automatically.
Navigation: Your website will need to have multiple ways for the user to find a webpage. Also, the cursor must be visible at all times. It would a good idea to create a trail of breadcrumbs on your webpages. Landmarks: Landmarks are a useful function. These are covered in the ARIA Roles section.
Time: Allocate sufficient time for users to understand and operate the website’s content. For instance, if the content is a video or an image slider, give the user the option to pause or stop the content. The same should be done with auto-updates.
Understandable: This is important in web design. All developers must have all of content and functionality on their website clear and comprehensible. The guidelines for Understandable guidelines as follow.
Legibility:: All text needs to be readable and have clear pronunciations. Recognize and expand on unusual text and terms like internet jargon and abbreviations. Always set the language of the website by inserting the language attribute in body tags.
Example: <body lang="en"> or <body lang="fa">
User Expectation: Always maintain consistent navigation for the user. Do not change the context of your webpage by different behavioral actions such as sudden pop-ups.
Input forms: Make sure any forms are labeled and has validation that tells the user if there are errors in the form.
Robust: If the content on your site is strong and followed the first three steps, then the website will be compatible with user agents and assistive technologies. The guidelines for Robust as follow.
Clear Component Identification: Make sure that the name and role for elements on the webpage are distinctly defined.
Validation: Always check the html on your site is valid and any broken tag is fixed. Mozilla Firefox has an add-on called Web Developer that can check your html.
Check the articles below for more information.
aria Roles
Mentioned earlier in this tutorial, Landmarks should be used with navigation. Here, we will learn about ARIA Roles and its integral part, Landmarks. As the result of Web Accessibility Initiative, Accessible Rich Internet Applications Suite (or ARIA) is created to help screen readers, like NVDA or Apple VoiceOver, with identifying content on the webpage. ARIA is added through the Role attribute, this attribute will define the content structure to the screen reader. With the Role attribute, the properties are called Landmark roles which will help convey the navigational features to the users. A list of the navigational Landmark roles follows.
Application: Will turn the web document into a web application which will make screen readers to switch to the specific screen reading mode.
Banner: Will define the h1 tag or the webpage for the screen reader.
Complementary: Will define secondary content for the screen reader.
Contentinfo: Will define information about the main content for the screen reader.
Form: Will define input form content for the screen reader.
Main: Will define the main content for the screen reader.
Navigation: Will define the navigation bar and links for the screen reader.
Search: will define the webpage’s search bar for the screen reader.
Example:
<div id="appl" role="application"></div>
<div id="header" role="banner"></div>
<div id="searchbar" role="search"></div>
<div id="nav" role="navigation"></div>
<div id="content" role="main"></div>
<div id="rightsideadvert" role="complementary"></div>
<div id="footer" role="contentinfo">></div>
plugins for the disabilities
Fortunately, there are plugins for users with disabilities. Mozilla has two specific add-ons that we will focus on in this tutorial; there are Colorblind Design and Fangs. Colorblind Design: This add-on will give visually impaired users four color schemes.
Colorblind Design: This add-on will give visually impaired users four color schemes.
Example:
Fangs: This add-on will simulate the Firefox browser into a screen reader, by create a pure text version of the webpage.
Summary
Web Accessibility is needed to be used by web developers to help users with disabilities view their websites.
If you want or need to see alternate explanations and tutorials of Web Accessibility, check out these links and videos:
Video: Keeping Web Accessibility In Mind
practice
Now that we have learned how to incorporate Web Accessibility into your website, we are going to download the Fangs plugin.
Go to addons.mozilla.org
Then type in Fangs in the search bar
Then type in Fangs in the search bar and click on submit.
Click on Fangs Screen Reader Emulator
Next, click on the Download button.
Click on the +Add to Firefox button.
A pop-up window will appear with a Install button, click on the button.
Other window will appear asking you to restart Firefox, click on the Restart button.
Once Firefox is back up, right click on the webpage and you will see Fangs, click on it.
Now you can view webpages in Fangs Screen Reader Emulator