Information and Communications Technology (ICT) Accessibility Standards include guidelines to ensure that all electronic information, resources and services provided by Mason are accessible to people with disabilities. This includes, websites, online learning systems, software and hardware applications, telecommunications, desktop and portable computers.
The following information provides guidance on how to create an accessible components for web and software applications accordance with Section 508 of the Rehabilitation Act and Web Content Accessibility Guidelines (WCAG) 2.1. For additional information about meeting accessibility requirements, please contact the IT Accessibility Coordinator.
1. How to Make Images Accessible (508 A, WCAG 1.1.1)
Provide a text alternative for images (e.g., logos, pictures, icons)
The alt attribute is an attribute of the img tag and is meant to be an alternative for non-visual browsers when they come across images. This means, that the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.
For example, the George Mason Logo would have an alt tag of “George Mason Logo”.
alt=”George Mason University” / >
Supply empty “alt” tags for unessential decorative images.
Empty ALT tags hide an image from a screen reader, so background images and aesthetic elements would be good uses for this. Screenreaders would read the usually meaningless filename of an image if no ALT tag is specified.
<image src=”graphics/spacer.gif” alt=””/>
Providing alt-text to image maps
Image maps are images that have defined areas that are “clickable” Each area will link the user to another part of the current page. When using image maps, it is important to provide a alt attribute for each area that explains the purpose of the image map area.
Use meaningful title attributes. (WCAG 2.4.4)
Title attributes can be used to provide a short summary to describe where the hyperlink will take the user. The title should be more descriptive than the link itself. An example is provided below:
<a href=”http://example.com/WORLD/africa/kenya.elephants.ap/index.html” title=”Read more about failed elephant evacuation”> Evacuation Crumbles Under Jumbo load</a>
You’ll often see hyperlink elements with title attributes that look like this:
<a href=”/” title=”Link to home”>Home</a>
<a href=”/products” title=”Link to products”>Products</a>
<a href=”/contact” title=”Link to contact”>Contact</a>
This can be a result of default content management system configurations, or someone who did not want to take too much time with title attributes.
Users who use screen readers such as JAWS often rely on title attributes to find web links on a page. JAWS, for instance, has a feature for pulling together a list of links on a web page sorted in alphabetical order. If title attributes begin with the same text, it’s harder to use search functions that are built into screen readers.
Avoid vague link names like “click here” (WCAG 2.4.9)
People who use a screen reader to visit web sites will often tab from link to link, skipping over your carefully crafted explanatory text. Links should be meaningful when read out of context.
Avoid: To make an appointment with your adviser, click here
Better Option: Make an appointment with your adviser
Keep navigation consistent.
Navigation mechanisms direct the user to key sections and/or pages of the site. These mechanisms should be designed to clearly state their destinations and to indicate the current position of the user. They should also remain consistent visually and structurally from page to page. Sites with complex architecture can also benefit from breadcrumbs. They typically appear horizontally across the top of a web page, usually below any title bars or headers. They may look something like this:
Home page → Section page → Subsection page
- Keyboard-only navigation is one of the primary requirements for accessibility.
- Avoid coding shortcut and access keys. If you use shortcuts, ensure that they do not conflict with common browser and screen reader shortcuts—not an easy task.
- Ensure that keyboard focus is never locked or trapped at one particular page element. The user should be able to navigate to and from all navigable page elements using only the keyboard.
Add skip to content links (508 O) (WCAG 2.4.1)
Provide a link at the top of the page which jumps the user down to an anchor within the main content. The link should be the first item in the page. The anchor is placed at the beginning of the main content.
<a href="#maincontent">Skip navigation</a>
<h1><a name="maincontent" id="maincontent"></a>Heading</h1>
<p>This is the first paragraph</p>
Provide a visible focus (*WCAG 2.4.7)
The user should be able to identify which element on the web site or application has the keyboard focus. To ensure that your web site or application has a visible focus:
- Never intentionally remove the visual focus:
- Use CSS psuedo element selector :focus to change the styling of elements with keyboard focus.
- Use focus and blur event handlers on checkboxes and radio buttons to change the styling of both the form control, but also its label text to make it easier to see.
- Use styling to create a border around the interactive element and its label, using the CSS border or outline properties.
Provide structure and functionality to carousels/slideshows
Carousels are frequently used, on home pages, to draw attention to of the website. Inaccessible carousels can be a major obstacle for many website visitors including people using keyboard navigation or voice input software, screen readers, people who are easily distracted by movement or need more time to read. There are components that should be incorporated into to carousels to ensure they are accessible.
- Provide a structure in the code the collection of items.
- Provide functionality that allows users to browse through items one at a time.
- Provide users a control that will stop animations.
Add associated labels to form elements. (508 N) (WCAG 3.3.2)
Keep in mind though that adding too much information can add clutter to a site, such as directions. Be aware that users with disabilities want to use the web in the same way as other users: they want to access information and perform necessary tasks quickly and easily. If the directions are important, put them in the main body of the form, where everyone can see them and benefit from them.
Good label: <label for=”textbox1″>First Name:</label>
Clutter label: <label for=”textbox1″>Begin this form by entering your First Name:</label>
Use Proper Table Headings & Titles (508 H) (WCAG 1.3.1)
There are two basic uses for tables on the web: as data tables, and as layout tables. Screen readers read the content of web pages as if there were no HTML tags at all. They read everything in the order that it appears in the source markup.
Include a title for your table using the caption tag.
<caption>Accessible Table <caption>
Note: The caption tag is an indicator to the screen reader to associate the caption with the table. It will announce the caption when the user comes in contact with the table. Use the <th> tag to identify the headers of your table. The code looks like this:
<table align="center" border="1" cellpadding="3">
<th id="stepmother" colspan="5" align="center">Wicked Step Mother's Class</th>
<th id="classwork" align="center">Classwork Grade</th>
<th id="quiz "align="center">Quiz Grade</th>
<th id="homework"align="center">Homework Grade</th>
<th id="final"align="center">Final Grade</th>
<td headers="stepmother Doc classwork">A</td>
<td headers="stepmother Doc quiz">A+</td>
<td headers="stepmother Doc homework">A</td>
<td headers="stepmother Doc final">A</td>
|Wicked Stepmother’s Class|
|Classwork Grade||Quiz Grade||Homework Grade||Final Grade|
|Ms. White’s Class|
Use heading tags (WCAG 2.4.6)
Many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes.
HTML headings have been part of the structure of an HTML document from the beginning. The heading tags are meant to give web documents structure. Screen readers in particular may just scan a page for appropriate H1, H2 and H3 elements.
Add heading tags to replace the visual styling, <font> tag – the <font> tag is replaced with an <h1> tag. As a result, the Web page now has more structure and is easier to navigate using screen-reading software.
<h1> George Mason University:</h1>
CSS Style declaration:
Provide sufficient color contrast (508 C) (WCAG 1.4.1)
Users with low vision or color blindness may have difficulty reading your presentation if there is insufficient contrast between foreground and background colors. Since these users may not be working with assistive technology (AT), you cannot assume that a screen reader will read the screen for them.
Please visit Do It Yourself – Web Testing Tools for information on the Chrome Color Analyzer to test your website for color contrast.
Set language, “lang” attribute (WCAG 3.1.1)
Always use a language attribute on the html tag to declare the primary language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.
Use the lang attribute for pages served as HTML, and the xml:lang attribute for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both together.
When using a video or multimedia components synchronized audio captions should be provided. For content provided through video without an audio component should have audio descriptions provided. For more information about captioning and audio description see our accessible media services page.
Avoid using frames when possible
- Generally speaking, iFrames are better supported on screen readers than traditional HTML frames.
- Clearly identify each frame or iFrame in the following way:
- Include the TITLE attribute for each frame. The text within these attributes should describe the contents of the frame (e.g. “navigation” or “content“) not position (“top” or “right”) or an arbitrary number (“frame 1” or “frame 2”).
- Make HTML file names for each frame meaningful (e.g. “navigation-menu.html”) in case that is what a screen reader identifies.
- Include a text title on each frame (it can be hidden in visual browsers).
- Use the DOCTYPE declaration below for Web pages with frames. Doing so will signal a page with frames to a screen reader.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Add a meaningful page title.
All online pages should have unique topics that describe the content of the page or document. Not only do unique titles allow screen readers to distinguish individual pages, but they also enhance search results. Web pages should include a TITLE tag within the HEAD area, and the title should be unique to each page on the Web site.
<head> <title>Department Name | George Mason University</title>
... </head> <body> <h1>Department Name</h1>
Avoid CAPTCHAs. (WCAG 1.1.1)
CAPTCHA forms with distorted text or audio can cause a number of issues related to accessibility. Although there are workarounds available, the best approach may be to use a **CAPTCHA that poses a logic question in plain text. Such questions are easy for humans to answer, but difficult for a machine.
- A CAPTCHA image cannot include ALT text for screen readers, because a bot would read it.
- Audio CAPTCHAs can interfere with screen readers unless a pause at the beginning is included.
- As spammers develop algorithms to break CAPTCHA systems, images and audio become more distorted, to the point where even many sighted users have difficulties identifying the text.