- Introduction to Web Accessibility
- Web accessibility is the practice of building websites that can be used by people of all abilities and disabilities. The goal of web accessibility is to create a level playing field for people with disabilities on the Web.
- Benefits of Web Accessibility
- Web accessibility is important because the Web now plays such an important role in our daily lives. We use the web to get our news, to get information about government services (or even use the services themselves), to get advice from peers on topics such as health, and even to take courses through distance learning.
- Web Accessibility Myths
- This tutorial addresses three common myths about web accessibility.
- The Web Content Accessibility Guidelines (WCAG)
- The Web Content Accessibility Guidelines (WCAG) are the international standards for website accessibility. The World Wide Web Consortium (W3C), the standards organization for the Web, maintains the WCAG. The latest version of the WCAG is version 2.
- Introduction to Alternative Text for Images
- The first principle of the Web Content Accessibility Guidelines (WCAG) requires us to create content that is perceivable to people who have sensory disabilities. This includes people who are blind or visually impaired. One way to accommodate people with visual disabilities is to provide alternative text for the images used on your website.
- Dreamweaver Accessibility Preferences for Images
- Dreamweaver’s preferences include a setting that will remind you to add alt text to each image as you add it to a web page.
- Adding Alternative Text to Images in Dreamweaver
- Dreamweaver is one of the most popular web authoring tools used by web designers. This tutorial will show you how to add alt text to images in Dreamweaver.
- Using the Web Developer Toolbar to Check Images for Alt Text
- The Web Developer Toolbar is a free add-on for the Firefox web browser. It can be downloaded from https://addons.mozilla.org. A version of this toolbar is also available for the Chrome web browser from Google. This tutorial will show you how to use the Web Developer Toolbar to check the images on your web pages for appropriate alternative text.
- Making Text Easier to Read On Screen
- Reading on a computer screen is not the same as reading on paper. Reading on a computer screen tends to be slower and more tiring on the eyes, but by paying attention to a few elements of typography you can make it easier to read your content online.
- Making Text Easier to Read with Dreamweaver
- Using Cascading Style Sheets (CSS), Dreamweaver will let you adjust the font type, text size, and line-height in your web documents. This tutorial will show you how to adjust the text settings in Dreamweaver to make the body text in your web pages easier to read.
- Color and Web Accessibility
- This tutorial will cover the implications of color blindness for web accessibility. Color contrast guidelines for making content more perceivable will also be addressed.
- Color Blindness Simulations
- Vischeck and the Colorblind Web Page Filter are two websites you can use to check the accessibility of your web pages for people who are color blind.
- Checking the Color Contrast of Web Pages
- This tutorial will show you how to check the color contrast on your web pages. Ensuring sufficient color contrast will make your content easier to see for people with low vision.
- Setting the Language in Dreamweaver
- When you specify the language of web page you make it easier for screen readers to properly read the content to people who speak languages other than English. In Dreamweaver, you can specify a language for the entire page or for specific sections of the page.
- Adding Page Titles in Dreamweaver
- Page titles are important because they are one of the first things screen reader users will hear when they arrive on your website. Having a descriptive page title on each page will help those visiting your website with a screen reader quickly determine they are on the right page and site. Dreamweaver Page Titles Video Tutorial (CC) Video...
- Adding Page Structure with Headings in Dreamweaver
- Most screen readers support a keyboard shortcut for navigating the content on a web page using headings. This feature can provide additional navigation for people with visual impairments who use screen readers to browse the web. Headings also separate the content on a web page into more manageable sections for people with cognitive disabilities.
- Guidelines for Link Titles
- Link titles provide additional information about a link when you hover over that link with your mouse. However, not everyone who visits your website can benefit from link titles. For this reason, you should only use link titles for supplementary information about a link. Information that is critical for understanding the link should be included in the page text itself.
- Adding Link Titles in Dreamweaver
- This tutorial shows you how to add supplementary information for links by using link titles in Dreamweaver.
- Creating a Skip Navigation Link in Dreamweaver
- Including a skip navigation or skip to content link at the top of your web pages will improve navigation on your website for screen reader users and for those who can only use the keyboard for navigation. This kind of link will let a screen reader or keyboard user skip the navigation and other repetitive elements of a web page and go directly to the main content section of that page.
- Using Lists to Enhance Usability for Screen Reader Users
- When reading a web page, most screen readers will announce the number of items on a list if the list has been properly marked up with HTML list tags.The use of properly marked up lists is especially helpful for the navigation on a website. This kind of list can improve usability for screen reader users by letting them know the number of pages available on the site.
- Layout and Data Tables
- For a long time, the only way to create columns and perform other layout tasks in HTML was through the use of tables. However, a current best practice is to use Cascading Style Sheets (CSS) for layout, and to limit the use of tables to the display of tabular data. The reason for avoiding tables for layout is that the reading order for screen readers and other assistive technology may be different from what is shown on the screen with layout tables. In this tutorial, you will learn how to use browser add-on that will let you check the reading order of your web pages if they still use layout tables.
- Creating an Accessible Data Table with Dreamweaver
- In this tutorial, you will learn how to use Adobe Dreamweaver to add an accessible data table to a web page.
- Creating Accessible Forms with Dreamweaver
- Forms may be used to collect information from your website’s visitors, and they are also used to perform searches and find content on your website. Because forms are one of the primary ways people will interact with your website, it is important that they be accessible. In this tutorial you will learn how to create accessible forms with Dreamweaver by using text labels that are associated with their form elements with a FOR attribute.
- Grouping Form Elements with Fieldsets
- Fieldsets can be used to group related form elements on long forms using a label called a legend. This can make it easier for people with cognitive disabilities to understand the form by splitting it into more manageable sections.
- Improving Form Usability with CSS
- In this tutorial, you will learn how to use Cascading Style Sheets (CSS) to change the background of form elements when they receive focus on your web page. This behavior makes it easier for keyboard users to know where they are in the form as they press the Tab key to navigate the items on the form. It can also be a helpful visual indicator for people with cognitive disabilities.
- Aligning Form Elements with CSS
- By aligning form elements and their labels, you can make a form easier to understand for people with cognitive disabilities. The use of Cascading Style Sheets (CSS) for layout is a best practice in modern web design. In this tutorial, you will learn how to improve form usability by using only CSS to align form elements and labels.
- Writing for the Web, Usability and Accessibility
- Jakob Nielsen is a respected usability expert whose research has focused on all aspects of web usability, including how people read online content. In a 1997 post on his Alertbox website, Nielsen reported on research showing most people scan online content rather than read it word for word. This tutorial covers some of the implications of that research for accessibility.
- Writing for the Web and People with Low Literacy
- Jakob Nielsen is a respected usability expert whose research has focused on all aspects of web usability, including how people read online content. In his Alertbox column (https://www.useit.com/alertbox/), Nielsen has reported on research showing that people with low literacy “plow” through online content, reading it one line at a time. This tutorial covers some of Nielsen's guidelines for improving the readability of online content for people with low literacy.
- Checking the Reading Level of Your Website
- The Juicy Studio website has a Readability Test that will allow you to check the reading level of your website. By making sure the reading level matches the needs of your target audience, you can meet the Web Content Accessibility Guidelines requirement for understandable content.
- Checking the Section 508 Compliance of Your Site with Cynthia Says
- The Cynthia Says website is a free service that allows you to check your website for Section 508 compliance. Section 508 is the U.S. accessibility law that applies to all websites maintained by the federal government and its contractors. While private websites are not required to comply with Section 508, many of them still use Section 508 as a good overall measure of accessibility.
- Checking for Section 508 and WCAG Compliance with Web Accessibility Checker
- The Web Accessibility Checker is a free validator available from the Adaptive Technology Resource Center in Ontario, Canada. The Web Accessibility Checker can check your website for compliance with both Section 508 and the Web Content Accessibility Guidelines.
- Checking the Accessibility of Your Site with WAVE
- The Web Accessibility Evaluation Tool (WAVE) is a free tool from WebAIM that will help you check your site for accessibility problems. Rather than presenting you with a lengthy technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.
- Checking the Accessibility of your Site with Accessibility Toolbars for Firefox
- The Firefox web browser supports a number of toolbar add-ons that can be used to check the accessibility of your website. Two of these toolbars are the Web Developer Toolbar and the WAVE toolbar available from WebAIM.
- Using the Fangs Screen Reader Emulator
- Fangs is a free add-on for the Firefox web browser that renders a text version of a web page similar to how a screen reader would read it. The purpose of Fangs is to help authors understand how assistive technology such as screen readers will present their site to people with disabilities.
- The Lynx Text Web Browser
- The Lynx web browser is a text-only browser originally developed by the University of Kansas in 1995. It is now available as free open source software that runs on both Windows and the Mac. By browsing your website with Lynx you can get a good idea of how your website will work without graphics turned on.
- 5 Tips for More Accessible PDF Documents
- The key to creating a more accessible PDF document is to begin with a good source document in your word processing program. The five tips presented in this tutorial will allow you to create more accessible PDFs by adding accessibility features to your Microsoft Word documents before they are exported to the PDF format.
- Adding Structure to a PDF Document Created with Microsoft Word
- The use of styles to create headings and lists in Microsoft Word can benefit people with cognitive disabilities by making the content easier to scan and by allowing you to split long documents into smaller segments. Headings can also be converted to bookmarks when you export your PDF document from Microsoft Word. These bookmarks can provide additional navigation to people who rely on a screen reader to access the PDF document.
- Adding Alternative Text to Images in Microsoft Word 2007
- While it may not be the best way to create a web page, many people only use Microsoft Word as their primary web authoring software. If you only have access to Microsoft Word as your web authoring software, you should make sure you add alt text to the images in your Word documents. Adding alt text to the images will ensure that these images can be properly described to screen reader users when they access the web pages created with Microsoft Word on a web browser.
- Adding Alternate Text to Images in Microsoft Word 2010
- Adding alternate (alt) text to your images will make your Microsoft Word documents more accessible to people who have visual impairments. This will also make any PDF documents created from your Microsoft Word documents more accessible as well. The alt text is a description of the image that can be read to someone who has a visual impairment by screen reader software.
- Accessibility Options for Exporting Microsoft Word Documents to PDF Format
- To make sure that your Microsoft Word documents are properly tagged for accessibility when you export them to the PDF format, you should enable the accessibility preferences for the PDF Maker.
- Adding White Space in Microsoft Word to Improve PDF Conversion
- Adding white space around your images can make it easier for the PDF Maker to properly tag your documents for accessibility when it does the conversion from Microsoft Word to the PDF document format.One way to add white space is by placing your cursor immediately after each image and adding a few carriage returns. However, a better way to add the white space is to use the Paragraph Styles built into Microsoft Word.
- Adding Alternative Text to Images with Adobe Acrobat
- There is currently no way to add alternative text to images in a document created with Microsoft Office 2008 for the Mac. However, you can take advantage of the fact that the Mac has the ability to print to a PDF document as a built-in feature of the operating system. You can then use Adobe Acrobat to add the alternative text to the images in your PDF document.
- Marking Up Decorative Images in Adobe Acrobat
- Adding alternative text will make the images in your Adobe Acrobat documents more accessible to people who have visual disabilities. However, when you use a decorative image, the image does not any valuable information. To ensure that this kind of image is skipped by a screen reader, you should mark it up as a background object.
- Adding Tags to PDF Documents in Adobe Acrobat
- You can fix PDF documents that have not been properly tagged during the export from Microsoft Word by adding the tags with Adobe Acrobat.
- Changing the Reading Order of a PDF Document with Adobe Acrobat
- The reading order of a PDF document determines how the document will be read aloud with a screen reader.
- Using Adobe Acrobat’s Accessibility Checks
- Adobe Acrobat includes a number of checks that will help you determine how well your PDF documents meet accessibility guidelines. There are two kinds of checks you can perform on your documents: a quick check, and more detailed full check.
- Creating ePub Documents with Pages
- ePub is a standard for digital publishing maintained by the International Digital Publishing Forum (IPDF). For more information about this standard, visit https://idpf.org/epub. The ePub format is intended for the creation of ebooks with reflowable text. Pages, the word processing and page layout program included in the iWorks suite for the Mac, has an export to ePub feature that makes it easy to publish documents in ePub format. These documents can be opened with the free iBooks app from Apple on any IOS mobile device. iBooks has many accessibility features for people with print disabilities, including resizable fonts and support for the VoiceOver screen reader built into IOS.
- Making Image in ePub Documents for the iPad Accessible
- While the ePub standard was created with text documents in mind, the Pages program on the Mac can create ePub documents with embedded images. However, the current version of Pages (Pages ’09) does not allow for alternative text to be added to each image in an ePub document. Without alternative text, someone accessing the ePub document on an iPad with the iBooks app and the VoiceOver screen reader will hear the file name of each image, instead of a more useful description. This tutorial will demonstrate a technique for adding alternative text to ePub documents exported from Pages. This will make the documents more accessible to those who rely on VoiceOver to have ebooks read aloud to them on the iPad.
- Captioning Guidelines
- According to the National Association of the Deaf, about 37 million people in the U.S. have some type of hearing loss. For those who have a hearing impairment, closed captioning is essential for ensuring equal access to information. This tutorial covers some of the guidelines in the Captioning Key for Educational Media prepared by the National Association of the Deaf.
- Setting up MovieCaptioner on the Mac
- MovCaptioner is a program from Synchrimedia (www.synchrimedia.com) that makes it easy to add closed captions to QuickTime videos on the Mac. This tutorial covers how to install and configure MovCaptioner.
- Captioning QuickTime Movies with MovieCaptioner
- MovCaptioner is a program from Synchrimedia (www.synchrimedia.com) that makes it easy to add closed captions to QuickTime videos on the Mac. MovCaptioner can caption movies with the following extensions: .mov for QuickTime movies that will be viewed on a computer with QuickTime Player or iTunes, and .m4v for movies that will be viewed on an iPod, iPhone or iPad.
- Fine Tuning Captions with MovieCaptioner
- This tutorial will show you two ways to improve the display and timing of closed captions created with MOVCaptioner.
- Adding Closed Captions to YouTube Videos
- While YouTube now has an automatic caption generator, the captions created by this tool are not always very accurate. The Easy YouTube Caption Creator tool available on the Accessify website at https://www.accessify.com provides a way to create more accurate captions.
