Showing posts with label web accessibility challenge. Show all posts
Showing posts with label web accessibility challenge. Show all posts

Monday, September 3, 2018

Digital Accessibility Challenge Week #2

Simple Steps to Make Documents and Digital Content More Usable by Everyone

Objective:

This weeks challenge will provide simple steps to follow to make documents digitally accessible, it does  include hyperlinks and resources for a variety of document creation needs.
Manhattan College ITS is encouraging employees to begin to take some simple steps that will structure your documents so that they are more accessible. When creating documents, spreadsheets or presentations it is important to provide structure to all your documents. Fortunately many word processing tools such as Google Docs and MS Word are very advanced in the accessibility area and allow you to use features generally available within each tool.

How Does Digital Accessibility Impact Manhattan College Faculty, Staff and Students?


  • Faculty creating instructional materials and presenting lessons.
  • Employees creating documents, forms, newsletters and correspondence for distribution.
  • Students writing reports and preparing presentations.


Page Structure and Formatting

The following guidelines can be applied to Microsoft Word, GoogleDocs, HTML, or other source document files.

Title

All documents should have a title that represents the content of the document. The title is typically added to the Properties of a document.


Headings

Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.

It is best to plan out a heading structure before composing a page. Doing so will help you both select appropriate heading levels and keep your thoughts organized overall.

Use headings hierarchically, with Heading 1 representing the most important idea on the page, and sub-sections organized with Heading 2 level headings, etc.

Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly, and screen reader users will not benefit.

Use (built-in) Headings

  • In Google Docs you can apply heading to words or sentences. To do this, navigate to the Format menu and select Paragraph styles to add headings to sections of your document.
Image of the toolbar and arrows pointing to how to navigate to built in Headings menu in Google Docs
      Example in Google Docs
  • In Microsoft Word you can apply headings to words or sentences. To do so, highlight a word or sentence in Word, and navigate to the Home tab towards the top of the screen. There are many different styles to choose from, making your document clearly organized and easier to read.

Image  of the Toolbar in MS Word point out how to navigate to built in Headings menu
Example in MS Word


Hyperlinks

Links are important for helping direct people where to go through or from your document. Often displayed as text, links should be functional and usable.

Use Descriptive Text for Links

  • When linking to another website, do not just paste the link into the field. Most text editors have a button that allows you to insert a link. Inserting a link this way allows you to add a descriptive link title. This makes it easier for screen readers to read a link. Make link text is clear and self explanatory to support quick and effective navigation.
  • Example: Avoid writing: "Click here to view our academic programs.”
  • Instead write: “Explore our academic programs."
  • Example: “Click here to view today’s weather.” can be shortened to    “Today’s weather.”

Linking email addresses


  • Linking email addresses offers quick access to communication tools. If the link activates an email program to open, use the person's email address (e.g. reggie@email.edu) as the linked text. For links to contact forms or pages of information, use text such as “Contact Reggie” or "Send Reggie an email."

Use Lists

When creating lists, rather than just listing items in a single paragraph with no format, your options include:
  1. Numbered List
  • Bulleted List
Image of a taskbar highlighting where the Bulleted Lists and Numbered Lists are located
Example in Google Docs

Image of a toolbar highlighting where the Bulleted Lists and Numbered Lists are located
Example in MS Word

Columns

  • Use the true column features in document editors to divide page content. Avoid using the tab key to separate content on one line. 
  • Using the column tool allows assistive technology to detect and communicate the page structure to the user.
Top image has a red circle, bottom image has a green check, examples of best practice for creating columns

Images/Non-Text Content

Add Alternate Text for Images (Alt tags)


  • When uploading a picture to a document or website, make sure to always add an Alt tag to the image. Alt tags are used to describe images to a screen reader, so utilizing alt tags that describe the image with detail is important. 
  • To add an alt tag, you must view the properties of the image. 
  • In most cases, all that is required is to simply right click the image within the editor, and select alt tags. 
  • Sometimes you may have to right click and then select mage properties before having the option to add an alt tag.

Tables

Use Tables for Data

  • Use tables for presenting data, not for changing the visual layout of the page. In the table, include a heading row (rather than starting with data in the first row) because screen readers automatically read the first row as a heading row. 

Choosing Color

Color alone should not convey meaning

  • Avoid using color alone as the sole source of meaning or information. Some people may not be able to perceive color and will experience difficulties accessing your content. 
  • For example, hyperlinks are typically underlined colored text. Both the color of the text and the underline is necessary to show the text as a hyperlink. This is not to say, never use color in your document, but where you are able to edit color be sure there are multiple ways to determine meaning or information.

Use sufficient color contrast

  • If you must you color in your document, make sure the color contrast between the foreground (i.e. text or content) and the background color are sufficient.. 
  • Some color combinations can be more difficult to read, be selective and conscious of the colors you choose. For example, avoid light gray text on a white background.

Summary


Web accessibility is essential for people with disabilities and useful for all. This video gives an overview about the impact of accessibility and the benefits for everyone in a variety of situations.


Web Accessibility Perspectives: Customizable Text



Once you complete reviewing the materials from the second week of the Digital Accessibility Challenge take a few minutes to answer these questions:
Week 2 Accessibility QuestionnaireParticipants who complete all 5 weeks of the Digital Accessibility Challenge will be awarded a Credly Digital Badge in recognition of their effort, for more information review ITS to Launch 5 Week Digital Accessibility Challenge.


Other Resources:

General Accessibility Resources for Specific Programs and Apps:

Google

Microsoft



Partially reposted from: Making your Word Documents Accessible

Monday, August 27, 2018

Digital Accessibility Challenge Week 1

What is Digital Accessibility?


Digital Accessibility is the practice of insuring that all people, including those with disabilities, can access and use our electronic resources and communications. Digital accessibility is very important, because not only is it the law, it promotes a more inclusive experience for all people using the web.
Digital Accessibility can be promoted for common elements such as:
  • Websites
  • Software
  • Computer hardware and software
  • Videos
  • Documents
  • Presentations
  • Mobile Devices
Utilizing practice that promote digital accessibility helps those with hearing difficulties, visual difficulties, cognitive & neurological disabilities, and physical disabilities.

Infographic detailing Hearing, Visual, Cognitive & Neurological & Physical Disabilities that affect web use

Although we tend to center our discussion of accessibility on people with physical impairments, we can all relate to the experience of using an interface that is not accessible to us for other reasons.  Have you ever had a problem using a desktop site on a mobile phone, or seen the message "This content is not available in your area," or been unable to find a familiar menu on a tablet? Those are all accessibility issues.

As you learn more, you will find that addressing accessibility issues in this broader, more general sense almost alway improves the experience for everyone. Let's look at an example:
a form with poor accessibility
This form has several accessibility issues:

  • The text is low contrast, which is hard for people with low-vision to read.
  • Having labels on the left and fields on the right makes it hard for many people to associate them, and almost impossible for someone who needs to zoom in to use the page. Imagine looking at this on a phone and having to pan around to figure out what goes with what.
  • The "Remember details?" label isn't associated with the checkbox, so you have to tap or click only on the tiny square rather than just clicking on the label; also, someone using a screen reader would have trouble figuring out the association.

Now let's wave our accessibility wand and see the form with those issues fixed. We are going to make the text darker, modify the design so the labels are close to the things they are labeling, and fix the label to be associated with the checkbox so you can toggle it by clicking the label as well.
a form with improved accessibility

Which would you rather use? If you said "the accessible version," you are on your way to understanding a main premise of this guide. Often, something that's a complete blocker for a few people is also a pain point for many others, so by fixing the accessibility issue you improve the experience for everyone.
This video describes the importance of  Digital Accessibility and the important role we all must play when creating documents:

Introduction to Web Accessibility


Why is it important to make sure that online content is Digitally Accessible?
What are some of the electronic resources that have to be accessible?

Please note, for planning purposes, it will take approximately 30 minutes each week to review the material and take a questionnaire based on the content.
Participants who complete all 5 weeks of content and weekly questionnaires will be awarded a Credly Digital Badge.

Once you complete reviewing the materials from the first week of the Digital Accessibility Challenge take a few minutes to answer these questions:
Week 1 Accessibility Questionnaire