accessibility training for electronic information · web viewwhen you type or paste a hyperlink,...

State of MichigaN

Accessibility Training for Electronic Information

Department of Technology, Management & Budget

11/3/2017V5


ContentsGoals................................................................................................................................3

Introduction......................................................................................................................3

Electronic Access.........................................................................................................3

Variety of Disabilities....................................................................................................3

Assistive Technologies.................................................................................................4

Law...............................................................................................................................4

Americans with Disabilities Act (ADA).......................................................................4

Section 508...............................................................................................................4

Governing Bodies.........................................................................................................5

Video Interviews...........................................................................................................5

State Specifics..............................................................................................................6

Administrative Guide to State Government Policy 1650...........................................6

Executive Directive 2014-01.....................................................................................6

SOM Look and Feel Standards.................................................................................7

Examples at the State...............................................................................................7

Concepts..........................................................................................................................9

Web Pages, Word Docs, and PDFs.............................................................................9

Good Document Structure..........................................................................................10

Difference Between Web and Print.............................................................................10

Mobile.........................................................................................................................10

Demonstrations & Practice.............................................................................................11

Word Documents........................................................................................................11

Features:.................................................................................................................11

Structure – Using Styles.........................................................................................12

Columns..................................................................................................................13

Alt Text....................................................................................................................13

Alt Text Example.....................................................................................................14

Tables, Charts & Graphs........................................................................................15

Hyperlinks...............................................................................................................16

Page | 1


Tables in Word........................................................................................................16

General concepts to Remember.............................................................................16

Check Accessibility in Word....................................................................................18

Resources for Creating MS Word Documents........................................................18

PDF............................................................................................................................ 19

Scanned PDFs........................................................................................................19

Check Accessibility in Acrobat Pro..........................................................................21

Excel...........................................................................................................................21

Intro.........................................................................................................................21

Check Accessibility in Excel....................................................................................21

YouTube, Facebook, and Vimeo Closed Captioning..................................................22

Example SRT file:...................................................................................................22

General Procedure for YouTube.............................................................................22

Facebook SRT file..................................................................................................30

Vimeo......................................................................................................................31

Vignette CMA Examples.............................................................................................32

Headings (H1, H2, H3)............................................................................................32

Images & alt text.....................................................................................................34

Underlines...............................................................................................................36

Bolding Text using Strong.......................................................................................36

Emphasis (The old Italics).......................................................................................36

More HTML Tags....................................................................................................36

Strikethrough...........................................................................................................37

Colors......................................................................................................................37

Tables.....................................................................................................................38

Infographic..............................................................................................................38

Graphs....................................................................................................................38

Resources......................................................................................................................39

Page | 2


Page | 3


Goals Introduce as to why important Concepts Demonstrations & Practice

Introduction

Electronic AccessMost people can’t imagine life without the internet. The internet is one of the best things that has happened to people with disabilities. It is liberating. It makes them less dependent on others. It provides a great sense of independence and an easy way to shop. For those who are employed, it is absolutely essential to their work.

The internet provides 24/7 access to: eGovernment Business Shopping email News Banking Classes and Training

Variety of Disabilities Hearing

o Deafo Deaf-blindo Hard-of-hearing

Cognitiveo Learning disabilitieso Distractibilityo Inability to focus on large amounts of data or to remembero Dyslexia

Visualo Blindnesso Low Visiono Color-Blindness

Physicalo Amputeeo Quadriplegia

Page | 4


o Arthritis

Assistive Technologies Screen readers – reads the computer’s desktop and/or active program aloud

(Programs such as JAWS, Job Access With Speech, or Window Eyes) Voice browser – similar to screen reader but usually only reads web browser

content Screen magnifier – by people with low vision to enlarge the content Single click keyboards or mice for physical limitations, voice recognition

software, and selection switches Eye tracking – Follows eye movement and can detect specific blink patterns

as “clicks” Refreshable Braille display – a mechanical terminal that displays a line of

braille characters (usually 40-80) by raising and lowering the dots (pins) dynamically

Law

Americans with Disabilities Act (ADA)The Americans with Disabilities Act was signed into law on July 26, 1990 and is wide-ranging legislation intended to make society more accessible to people with disabilities. (It prohibits discrimination based on disability.)

Employment Workstation layout Public transportation systems Sidewalks Barrier free public accommodations Telephone service must have telephone relay service

Section 504 & 508Section 504 of the Rehabilitation Act of 1973, as amended, requires agencies to provide individuals with disabilities an equal opportunity to participate in their programs and benefit from their services, including the provision of information to employees and members of the public. Section 504 covers "any program or activity receiving federal financial assistance."

Section 508 of the Rehabilitation Act of 1973, as amended, requires that all electronic information provide “equal or equivalent access to everyone,” including visually impaired, hearing impaired, and the physically disabled. (Equal access) From a State perspective, Section 508 only applies in certain situations under the Assistive Technology Act of 1998.

Page | 5


Section 508 has a set of standards that are to be followed. These standards are the actual practices of writing HTML code and how to accommodate various methods of accessing websites. As of this revision, 508 has been revised, but is not the standard. The revision is to be in place January or February of 2018.

Common misconception… Someone might say, “Don’t worry, it’s only for internal employees. Nobody outside will have any access.” The reality is that under Section 504 & 508, agencies must give disabled employees and members of the public access to information that is comparable to access available to others.

More information can be found at the website for the United States Access Board. http://www.access-board.gov/

Governing BodiesThe Web Content Accessibility Guidelines (WCAG) provides an international set of guidelines. They are developed by the Worldwide Web Consortium (W3C), the governing body of the web. These guidelines are the basis of most web accessibility law in the world. Version 2.0 of these guidelines, published in December 2008, is based on four principles; Perceivable, Operable, Understandable, and Robust. (POUR)

Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)

Operable: Users can interact with all controls and interactive elements using the mouse, keyboard, or an assistive device.

Understandable: Content is clear and limits confusion and ambiguity. Robust: A wide range of technologies (including old and new browsers

and assistive technologies) can access the content.

Video InterviewsWebAIM video about students. https://www.youtube.com/watch?v=yx7hdQqf8lE

Two minute video, student testimonials from WebAIM: https://www.youtube.com/watch?v=BEFgnYktC7U

Page | 6

https://www.youtube.com/watch?v=BEFgnYktC7U

http://www.access-board.gov/

http://www.access-board.gov/


State Specifics

Administrative Guide to State Government Policy 1650The Administrative Guide to State Government (Ad Guide) is a set of policies and procedures used by State employees in the course of conducting business. Ad Guide Policy 1650, issued in 2007, is titled “Accessibility and Reasonable Accommodations.” The summary paragraph states, “Departments must ensure that all printed materials, meetings, electronic technology and services are accessible to persons with disabilities, such as employees, applicants, program participants or members of the public participating in Departments’ activities.”

Ad Guide Policy 1650 specifically mentions Departments shall take steps to make materials accessible to the public. Videos made by or distributed by Departments will be made accessible using various methods. And, websites are required to meet accessibility standards.

The Ad Guide can be found on the DTMB website. (http://www.michigan.gov/dtmb/0,1607,7-150-9131_9347---,00.html)

Executive Directive 2014-01Governor Rick Snyder quoted in a press release from October 27, 2014, “My administration is committed to eliminating barriers for those with disabilities who wish to enter the workforce,” Snyder said. “People with disabilities have much to offer our great state and should be provided the same opportunities for employment as everyone else. I expect all state departments and agencies to show leadership and work together to ensure that the disability employment program is successful.”

Governor Snyder also issued Executive Directive 2014-01. This directive addresses his expectations for all Executive Branch departments and agencies relating to eliminating barriers. It is located on Snyder’s Executive Directive webpage. (http://www.michigan.gov/snyder/0,4668,7-277-57577_57630---,00.html)

Two items that the directive specifically mentions:

“It is important that the State of Michigan provide a welcoming environment to those with disabilities and encourage their employment in state government in a competitive integrated setting.”

“(The program shall include…) Working with the Department of Technology, Management, and Budget (DTMB) to develop a long term strategy and plan for all documents, websites, and other printed materials

Page | 7

http://www.michigan.gov/snyder/0,4668,7-277-57577_57630---,00.html

http://www.michigan.gov/snyder/0,4668,7-277-57577_57630---,00.html

http://www.michigan.gov/snyder/0,4668,7-277-57577_57657-340170--,00.html

http://www.michigan.gov/dtmb/0,1607,7-150-9131_9347---,00.html


to comply with Americans with Disabilities Act (ADA) and Americans with Disabilities Act Accessibility Guidelines (ADAAG). This should include both internal and external information.”

SOM Look and Feel StandardsThe "SOM Look and Feel Standards" were documented to ensure that Michigan.gov visitors have a similar experience throughout all state applications, as well as the portal and agency sites. Also included are Section 508 requirements of the Americans with Disabilities Act. The standards are available at the eMichigan website. (http://www.michigan.gov/emichigan/0,4575,7-112-10666---,00.html )

New Applications and Applications undergoing maintenance over 195 hours must:

Follow all State Look and Feel Standards Complete a State of Michigan Look and Feel Review to ensure the

standards are met

Examples at the State MDE Snyder PDFs

Common Issueso Non-readable PDFso Images or objects without alternate texto Non-descriptive link texto Font size not relative (scalable)

Page | 8

http://www.michigan.gov/emichigan/0,4575,7-112-10666---,00.html




o Tab order incorrecto Videos missing alternate captionso Content that forces the use of a mouseo Color contrasto Form fields missing labelso Tables used for layout

Page | 9


Concepts

Web Pages, Word Docs, and PDFs Non-text elements need text in the form of an Alt label

o Alt text needs to be short, clear and meaningfulo City Lights example

Tables are only for data – Use the table tool Hyperlinks are meaningful (Click here = bad)

o Click Here to view 2015 report vs. View 2015 Report Colors

Student Test Accommodations Required

John Doe M-STEP X

Jane Doe M-STEP X


John Doe M-STEP Y

Jane Doe M-STEP N

Color Contrasto Minimum contrast ratio – 4.5 to 1 for AA – 7 to 1 for AAAo Dark colors on white background are best – For example, black on

white contrast ratio is 21 to 1o Color Contrast Checker –

http://webaim.org/resources/contrastchecker/

(This was purposely created incorrectly as an example what not to do.)

Color contrast – the dot test. What number can you see in the image on the UK government’s Accessibility Blog page? (https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/ )

Charts – Two lines – one line should use hash marks or other symbol Dyslexia

Page | 10

https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/



o Avoid long blocks of unbroken paragraphso Avoid italicso Avoid Serif fontso Always use left align – Not justifiedo No double space after periods – Difference between print & webo Webpage showing a dyslexia emulator.

(http://geon.github.io/programming/2016/03/03/dsxyliea )

Page | 11

http://geon.github.io/programming/2016/03/03/dsxyliea


Phone number formatso Proper format uses dashes: 1-517-555-1212 o Do not use parentheses or periods: 1 (517) 555-1212 or 517.555.1212o Siteimprove inventories all styles of phone numbers

Skip Navigationo It is built into Michigan.gov

ARIA Roles (Accessible Rich Internet Application) Forms & Form Labels Captcha (both State of Michigan’s numeric and Google’s image based) Videos

o Closed Captioningo Audio

Font Size Standardso Relative

Purchasing/Procuremento RFPs/RFQs/Statement of Worko WCAG 2.0 AA compliant

Good Document Structure Styles Outlines Headings Paragraph styling

Difference Between Web and Print Brochures

o Graphically designed/pretty do not work well on the web

Mobile Many blind users use smart phones

Page | 12


Demonstrations & Practice

Word Documents

Features:1. Structure is part of the code of the document, not just visual features2. Every non-text element has an Alt text label3. Data tables should be created using the table tool4. Hyperlinks contain meaningful labels that will inform navigation5. Long documents contain a table of contents with links to each section6. The document conveys information effectively:

The language is clear The layout is as simple as possible for its purpose Text is divided into manageable sections There is plenty of white space for the eye to rest

7. Sans serif fonts are recommended based on readability, ability to discern, and clear magnification

8. Examples Arial Verdana

9. Font size 14 point is best practice 12 point is the minimum

10.Ensure adequate color contrast between text and background Minimum contrast ratio – 4.5 to 1 Dark colors on white background are best – black on white contrast ratio is

21 to 1 Color Contrast Checker – http://webaim.org/resources/contrastchecker/


John Doe M-STEP X

Jane Doe M-STEP X


John Doe M-STEP Y

Jane Doe M-STEP N

Page | 13



Structure – Using Styles Styles is a predefined formatting that can be used repeatedly throughout

the document Easily modified – An update to the style updates the rest of the document This is the most important accessibility feature in Word

Purpose Provides structure and logical reading order making reading easier for

all Provides navigation guide for someone using assistive technology Retains structure when exported to PDF or HTML Allows for creation of Table of Contents Title Heading Levels 1-9 Normal List Paragraph Quote Emphasis Keep headings short Keep headings sequential and relational First heading in the document should be a Heading 1 Headings should never be more than one level apart

Paragraphs Avoid using several spaces to indent at the beginning of the paragraph Avoid using the enter key to provide spaces between paragraphs and

headings All of this can be accomplished through creating your own styles

Lists Utilize bulleted or numbered list formatting options when creating lists Repeated tabs or spaces to create indents for a list will render

navigation controls useless

Page | 14


Custom Font type Size Line spacing Spacing between elements Color

Columns Columns should be used as opposed to tables for formatting purposes Issues that arise when using tables for formatting:

o AT user must switch to table mode to reado Cannot use headings for navigatingo When converted to a PDF, the table structure is also convertedo Does not translate well to Braille

Alt Text Alt Text is read by screen readers providing image’s content and function

to those who can’t see it Alt Text should:

o Be accurateo Be succincto Not be redundanto Not use the phrases “image of..” or “graphic of…”

Alt text applies to:o Pictureso Clip Art+o Chartso Tableso Shapeso SmartArt Graphicso Groupso Embedded objectso Inko Video and audio files

Purely decorative images do not need Alt Text – enter “ “

Page | 15


Alt Text Example Must provide clear, concise descriptions of content and function. Caption this image:

(Example text on next page)

Page | 16


Insufficient: “Abandoned House” or “Detroit” Descriptive: “ Abandoned row house in Detroit during winter with

downtown in the background”

Tables, Charts & Graphs Longer text descriptions are often required for tables, charts, and graphs If meaningful text surrounds chart or graph, alt text does not need to be

detailed:o Example “pie chart depicting information described in the

paragraph above” If there is not sufficient info in surrounding paragraphs, provide an

essence of what the table or chart is showing as the description When providing a long description, use the “Title” box for a short

description, followed by full description in “Description” box

2010-2011

2011-2012

2012-2013

2013-2014

30%35%40%45%

Third Grade Reading Proficiency

Students with Disabilities

Title box only needs something if you are entering a long description.

Page | 17


Hyperlinks Assistive technology users can navigate a document from link to link or

can access lists of links Hyperlinks must be meaningful

o Not meaningfulClick Here

o MeaningfulMITS Lending Library

o For electronic and print materials:MITS Lending Library (http://mits.cenmi.org/LendingLibrary.aspx)

When you type or paste a hyperlink, MS Word automatically hyperlinks it. You can immediately press the delete key and it should un-link it. Also, Autolink can be disabled in File -> Options -> Proofing -> Autocorrect Options -> AutoFormat tab -> Replace

Tables in Word Create using table tool and use simple table structure

o Avoid merging cellso Avoid splitting cellso Avoid using blank cells to format your table

Identify a Header Row Verify reading order by tabbing through the cells Use simple language Use true columns Save as .doc format unless you rely on a .docx feature Avoid hyphenation Avoid text boxes – use outside outlines instead

Name Position Salary LocationRick Sr. Dev. $10 B1Joe Jr. Dev $8 B3Vacant Trainer Vacant B7

General concepts to Remember Use simple language Use true columns Save as .doc format unless you rely on a .docx feature Avoid hyphenation Avoid text boxes – use outside outlines instead

Page | 18

http://mits.cenmi.org/LendingLibrary.aspx




http://www.mits.cenmi.org/


Avoid drop caps Avoid image watermarks Avoid floating images – make sure text wraps image Avoid using repeated blank characters Do not fully justify text – adds extra spaces

Page | 19


Check Accessibility in Word Available in Word 2010 and 2013 Issue classifications

o Error – difficult or impossible for people to access, must be corrected

o Warning – likely to cause issues for most, should be looked ato Tip – most people can access, but experience could be improved

Cannot rely solely on accessibility checker Converting to PDF: When saving a document, save it as a PDF Make sure that the option to “Document structure tags for accessibility” is

checked If document was created with accessibility in mind, everything should

transfer

Resources for Creating MS Word Documents University of Washington: Creating Accessible Documents

http://www.washington.edu/accessibility/documents/ University of Washington: Creating PDFs from MS Word

http://www.washington.edu/accessibility/documents/pdf-word/

Page | 20

http://www.washington.edu/accessibility/documents/pdf-word/

http://www.washington.edu/accessibility/documents/


PDF

Scanned PDFs When a document is scanned, it is considered an image and cannot be read

by a screen reader Example of a “Non-Readable” pdf document:

EXECUTIVE ORDER 2009-22http://www.michigan.gov/documents/gov/EO2009-22_277339_7.pdf

It reads: “Empty Document” To make this an accessible document: From Adobe Acrobat, Click: Document > OCR Text Recognition > Recognize

Text Using OCR

Generally, if you can select text with your mouse, it will be read by a screen reader

The ALT attribute is used in PDFs to provide a text equivalent for an object or image. The ALT attribute actually has several tags defined for it, including:

o img o area

Page | 21

http://www.michigan.gov/documents/gov/EO2009-22_277339_7.pdf

http://www.michigan.gov/documents/gov/EO2009-22_277339_7.pdf


o input o applet

Images that include text should include Alternate Text that matches. (Example, image button with the words “Reinventing Michigan” should also have Alternate Text stating “Reinvent Michigan”)

Spell out acronyms.o MiDashboard is pronounced “Me Dashboard”o ICHATo Agribusiness

Make Link Text Descriptive

Blind users rely on tab order to access items logically on the website. It should read Left to Right, Top to Bottom

Color contrast in PDFs

Page | 22


Check Accessibility in Acrobat Pro1. Open the “Creating an Accessible Form PDF”2. Tools -> Accessibility3. Run Form Field Recognition

Excel

IntroExcel has all the same considerations and features as Word.

Avoid merging cells Columns need headers or titles Graphs need alternative text Make sure Sheets have individual, descriptive names

Check Accessibility in Excel Available in Excel 2010 and 2013 Issue classifications

o Error – difficult or impossible for people to access, must be corrected

o Warning – likely to cause issues for most, should be looked ato Tip – most people can access, but experience could be improved

Cannot rely solely on accessibility checker Converting to PDF: When saving a document, save it as a PDF Make sure that the option to “Document structure tags for accessibility” is

checked If document was created with accessibility in mind, everything should

transfer

Page | 23


YouTube, Facebook, and Vimeo Closed Captioning

Types of Captions

Open Captions – Captions that are part of the video image, or picture, and cannot be hidden.

Closed Captions – Captions that are embedded in the video and can be turned on or off.

Audio Description – A narrative description of onscreen actions, visual cues such as characters and costumes, and text appearing in graphics or the video.

Example video with corrected closed captioning; Chicken Flocks video. (https://www.youtube.com/watch?v=BDnWRQynY2w )

Example SRT file:100:02:17,440 --> 00:02:20,375Senator, we're makingour final approach into Coruscant.200:02:20,476 --> 00:02:22,501Very good, Lieutenant.

General Procedure for YouTube1. Upload video to authorized YouTube account.

2. Click agency name/logo button in top right corner then click the “Video Manager” link from the exposed menu.

Page | 24

https://www.youtube.com/watch?v=BDnWRQynY2w


3. Find the video you desire to add captions to and click the arrow next to the “edit” button below the video.

4. Click the “Captions” link from the exposed drop down menu.

5. A screen will appear with a preview of your video and a list of “Available Caption Tracks”. Most YouTube videos will automatically be captioned by their own “Machine Transcription”. You can double check the accuracy of the “Machine Transcription” by clicking the “English” link next to the “green button”.

Page | 25


6. Once you have clicked the “English” link you will be taken to a screen that gives you a second by second breakdown preview of the captioned text. You can scroll through this transcript as well as preview it live on the video on the left.

7. Errors in the machine translated text are very common and something that must be corrected by hand. To do so click the “Download” button located below the “Caption Text” preview.

Page | 26


8. Once the “Download” button has been clicked a “.sbv” file containing the “Machine Transcription” will be downloaded. Open this file in a simple text editor such as notepad.

9. The file will open to reveal a mess of numbers (which are time stamps) and the transcribed text.

Page | 27


10. Line the notepad window and the video you are editing the captions for side by side. Go through line by line, frame by frame and manually correct the errors in the transcript. Be sure to not edit or delete the time stamps in the text. This will cause the captions to show up at the wrong time of the video.

11. Once you are sure the transcript is 100% accurate, save the document. Make sure you are saving the document in the same “.sbv” file format.

12. Return to the “Captions” screen and click the “Add New Captions or Transcripts” button.

13. On the next screen select the “Choose File” button and navigate to the file you just edited and saved.

Page | 28


14. Add a custom name to the file if you want and then click the “Upload” button.

15. At the “Captions” main page you will see a new section under the “Available Caption Tracks” titled “Uploaded Captions”. Underneath that menu should be the file you just uploaded.

16. The newly uploaded file will automatically be an active option for your videos closed captioning. To turn the other transcript off simply click the “Green” button. The button should then go gray indicating that transcript file is not active.

Page | 29


17. Return to the videos page and play the video to test that your closed caption transcript is working correctly. If the closed caption text is not showing, click the “CC” logo button on the videos control tool bar.

Page | 30


18. YouTube also gives you the option on this page to add new transcripts you have created yourself or in other languages. To add these other transcripts you click the “Add New Captions or Transcript” button and follow steps 13-17.

Page | 31


Facebook SRT fileFacebook allows you to upload video files but does not provide auto translation like YouTube. It does allow you to upload .srt files. So, you can download the .srt file from YouTube and upload it to Facebook.

Facebook has very strict naming conventions for SRT files: your file must be named ‘filename.en_US.srt‘. Once you have renamed your caption file, upload your video to Facebook. After uploading, Facebook will prompt you that the video is converting, from here you can ‘Edit Video’ to add captions.

You will now be presented with the ‘Edit Video’ screen. Here you can give your video a title, description and upload your caption file.

Page | 32


VimeoVimeo does not automatically add closed captioning like YouTube. Closed captioning files need to be uploaded separately. Vimeo also has a built in editor. You can edit the caption file from the Vimeo interface. They also have an easy way that a user can pay a 3rd party to caption their videos.

More information about Vimeo’s services can be found on their Captions and Subtitles FAQ. (https://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles)

Page | 33

https://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles

https://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles


Vignette CMA Examples

Headings (H1, H2, H3)Vignette already has a Heading 1 (H1) in its structure. Outlines should start with H2 when copied into the WYSIWYG editor.

Open the Accessibility Practice Document (Follow the instructor’s instructions for location)

Copy all of the text in the practice document & paste into the WYSIWYG editor

Find each section and make the title an H2Before:

Page | 34


After:

Find each subsection and make them H3

Page | 35


Images & alt textPrepare the image before uploading it. Is it sized for the web?

Using the image tool brings the alt text along

Using the URL from the Asset Edit screen does not.

Insert an image using the Image ToolStep one, click the Insert Image icon:

Step two, click Select File:

Page | 36


Step three, select any image from the list and click Insert:

Alt Text is brought along

Page | 37

UnderlinesWhen a user sees underlined text on a website, they will most likely think it is a hyperlink. Some people will try to click on the underlined text to see where it goes.

It is always a good idea to avoid underlining text for emphasis on web pages. When a user attempts to click on the underlined text in order to “see where it goes,” they will be disappointed — and frustrated.

The WYSIWYG editor in Vignette has had the Underline button removed from the formatting row.

Bolding Text using StrongThis element is described as representing "strong importance for its contents." This is an important distinction to make. It is comparable to the next item, Emphasis. Strong is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.")

The WYSIWYG editor has been set up to use the tag versus the tag. The tag provides semantic difference to screen readers, while the tag is merely a presentation tag and does not draw attention to the text.

Select some text and click on the “B” icon. Look at the Source

Emphasis (The old Italics)Emphasis is used to change the meaning of a sentence ("I love carrots" vs. "I love carrots").

The WYSIWYG editor has been set up to use the tag versus the tag. The tag provides semantic difference to screen readers, while the tag is merely a presentation tag and does not draw attention to the text.

Select some text and click on the “I” icon. Look at the Source

Both Strong and Emphasis can be nested to increase the relative degree of importance or stress emphasis.

More HTML Tags for text with stress emphasis for text with semantic importance

Page | 38

<cite> for titles in a citation or bibliography <dfn> for the defining instance of a word <var> for mathematical variables Only use when nothing more suitable is available

Strikethrough <strike> and <s> are deprecated in HTML 4 There is no real good alternative at the moment because screen readers

don’t do anything with the newer HTML tags <del> and <ins>. Current recommendation is to use good grammar and editing techniques

rather than force technology to fit the situation.

This is an example of an old price that has a strikethrough with the new price beside it:$30 $20

Becomes this without strikethrough:Was $30, now reduced to $20.

ColorsBlack text on a white background is the standard for both print and the web. However, this combination is not ideal for all users. Users with very low vision may set the background to black and the text to white or yellow. Users with dyslexia may set the background to an off-white color or light yellow, with black text. Some people with dyslexia lay a clear sheet of tinted plastic over the screen in order to read more effectively.

Some users cannot distinguish colors. To emphasize text—for example, in headings or key phrases within text—so that it won’t be overlooked, use Headings or as well as color. Also be sure that there is sufficient contrast between the background and text on your page. Although contrast is particularly important for vision-impaired users, all users will benefit from greater readability.

WebAIM Color Contrast Checker (http://webaim.org/resources/contrastchecker/ )

Page | 39

TablesTables are for data only. They are no longer used for layout.

Tables need to include:o Caption – a brief descriptive text explains what the data is abouto Header row or header column or botho Singular cells (No spanning)o No blank cells used for spacing

InfographicAn infographic is essentially an image. In the same way that you provide a text alternative that presents the same information and meaning that is conveyed in an image, you need to convey the data in an infographic.

People with color blindness, vision impairments or age-related impairments can often struggle to read text or understand information when there is insufficient contrast between the foreground color and background color. This applies to the contrast between text and its background as well as when color is used to convey information such as in graphs or pie charts.

A complex image that contains a lot of information should use a long text alternative to describe an infographic.

<img src="DTMB_infographic.jpg" alt="Line chart of annual IT data" longdesc="DTMB_ingraphic.txt">

Making your infographic accessible to people with a disability, you also make it accessible to search engines. And, sighted users will not generally be aware that the description is available, even though they could benefit greatly from it.

Resource: WebAIM Web Accessibility for Designers (http://webaim.org/resources/designers/)

GraphsGraphs on the web are pretty much treated the same as images or infographics. Being able to describe the values of the graphs in the text is going to be key.

Page | 40

http://webaim.org/resources/designers/


Resourceshttp:// webaim .org/media/common/video/asd.asx

http://dor.ca.gov/DisabilityAccessInfo/

http://dor.ca.gov/DisabilityAccessInfo/How-do-I-Construct-Accessible-Documents.html

https://dtmbintranet.state.mi.us/dmb/TNT/default.aspx

Page | 41

https://dtmbintranet.state.mi.us/dmb/TNT/default.aspx

http://dor.ca.gov/DisabilityAccessInfo/How-do-I-Construct-Accessible-Documents.html

http://dor.ca.gov/DisabilityAccessInfo/

http://webaim.org/media/common/video/asd.asx