” “ Our quest is to create and sustain a learning community that purposefully and strategically acknowledges and values diversity and is committed to.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Chapter 3 – Web Design Tables & Page Layout
Communicative Writing Week 8 MMC120 Instructed by Hillarie Zimmermann MMC120 Instructed by Hillarie Zimmermann.
Writing for the Web: Quick Tips for Friendlier Pages Robyn Ness & Beth Snapp July 2014.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
Cascading Style Sheets
ADA Compliant Websites & Documents What the heck am I supposed to do?
Hints and tips for good web content. The University’s web presence To clearly inform prospective students, their influencers, researchers, potential members.
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
FrontPage Express By John G. Summerville Ph.D.©, RN.
NSU Web Services Website Guidelines & Creating Accessible Website Content.
Internal information 1 EPi/Policy training UK September 12, 2008.
XX/XX/XX Presenter names Position Title Accessibility “How to”
How to Make a Web Page: A Crash Course in HTML programming.
Assignment 1 Pointers ● Be sure to use all tags properly – Don't use a tag for something it wasn't designed for – Ex. Do not use heading tags... for regular.
Basic HTML All About Me - Your Name Information for display.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Accessible Word Document Training Microsoft Word 2010.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Electronic Communication and Web Accessibility Workshop.
Adding metadata to web pages Please note: this is a temporary test document for use in internal testing only.
An Introduction to Content Management. By the end of the session you will be able to... Explain what a content management system is Apply the principles.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® WRITING FOR THE WEB.
Wikispaces in Education Tutorial Jennifer Carrier Dorman
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
What is Museum Box? A Museum box is a way of presenting information that allows you to create a cube project that can be shared with others. You can use.
Website Publishing Guidelines How to write website content to optimise traffic.
Targeted Training, LLC. APPLYING STYLES DOWNLOAD FREE TRIAL OF ADOBE CONTRIBUTE ADOBE CONTRIBUTE CONNECTION WIZARD ENTERING EDIT MODE WEB PUBLISHING PROCESS.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
What is YouTube? - Why YouTube? - 8 Tips for Optimizing YouTube for SEO - How to Post to YouTube - Anatomy of a YouTube Upload Page - Video Content.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Accessible Word and PDF documents
Mrs. Knopp Library Media Specialist.  The term wiki comes from the phrase Wiki- Wiki which is the Hawaiian word for quick.  A wiki is a website that.
Wikispaces in Education Tutorial Fatema Kashoob Nawal ALKathiri
HTML/XHTML Structure Building a basic web page using notepad.
Creating Accessible PDFs Professional Development Day Fall 2015.
Videos, the More Tag, Permalinks, and Shortlinks.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Notes: Animation (yes or no): Text/Audio Narration: Title: Scene Graphics (yes or no) : Audio (yes or no): Slide number: Skill or Concept:
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Elizabeth Pyatt, Blockers: What do I REALLY Need to Fix?
Accessible Word Document Creation Using Microsoft Word 2010.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
ADA 508 Compliance in Online Classes Presenter: Tahiya Marome.
Easy WP Guide V2.6 for WordPress 3.8. easywpguide.com Adding Tags within your Post Adding Tags whilst editing your Post, will automatically assign those.
Wikis in Education: Part III Wiki Basics University School of Milwaukee.
Online Copywriting eMarketing: The Essential Guide to Online Marketing
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
Accessibility and Teaching Online Beth Case Program Manager for Digital, Emerging, and Assistive Technologies University of Louisville, Delphi Center.
Group work Create your Wiki with Wikispaces.com.
How People with Disabilities Access the Web
Uppingham Community College
Creating Accessible PDFs from Word Docs
Creating ADA Compliant Resources
A guide to HTML.
Module 6: Creating Web Pages and Working with Channels
Creating Accessible PowerPoint Slides
WRITING FOR THE WEB ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
ADA Compliant Website & Documents
Introduction to Web Accessibility
Web content management
Presentation transcript:

” “ Our quest is to create and sustain a learning community that purposefully and strategically acknowledges and values diversity and is committed to preparing educators and other professionals who will, through teaching, research, and service, contribute to a body of knowledge that will result in improved outcomes for all learners. Source:

STRUCTURE

Scanability People want to find information as fast as possible Sections of content help people scan to reach their desired information quickly Adding appropriate paragraphs and bulleted or numbered lists further break up content

Scanability – 2 This leads toward more concise copy Which helps people who have visual processing issues. And this makes text more searchable for people who use assistive technology.

Headings HTML has six heading tags through, which in the editor appear as Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Headings – in Practice People weight headings in importance accordingly. Screen readers will jump through headings much the way a sighted user would. If headings are out of order or improperly nested, it can confuse someone who cannot see the visual flow of the page.

Headings – Structure Heading 1 says the most about the content under it and has the most content under it, Heading 2 is next and so forth down the line. Heading 1 is thus used for the site as a whole. So think of Curry School of Education as the Heading 1 tag. Heading 2 is used for the title of the page so it might be Graduate Admissions, or Sheila Johnson Center. Start breaking up your content with Heading 3.

Headings – Bold is not Enough Just using Bold, Italics, or Underline to designate a heading will work for sighted users but screen readers won’t know anything more than that the words are bold (italic or underlined) Using the HTML headings makes this clear to all users. You can set a heading by highlighting the text and choosing the appropriate heading using the Format drop down.

Headings – Example Heading 1 – Curry School of Education (the site) Heading 2 – Graduate Admissions (the page) Heading 3 – Graduate Degrees Heading 4 – Degree 1 Heading 4 – Degree 2 Heading 3 – Graduate Licensure and/or Endorsement Non-degree Programs

Headings – Images Whenever possible, don’t make an image a header. Use clear concise text instead. If an image is in a header and you add spacing around it, Expression Engine may add empty Header tags instead of empty Paragraph tags

Empty Head(er)s Sighted users will skip over the white space, but a screen reader will try to read each empty header. Twelve in a row or even two would be annoying Check this by looking at the Format ( ) drop down in the editor. It will show you the type of formatting applied to where your curser’s location e.g., or (regular paragraph text) If the Format shows a heading, but is empty of text, highlight the area and use the Format drop down to set the area back to “Normal” text.

Lists If you have an actual list of information or list-like information. This not only visually sets the items apart, but also wraps the items in code that screen readers can understand. Plus it tends to simplify content and make it more concise

Text Content

Links Link text is one of the most important Accessibility (and Search Engine Optimization) activities you can work on. It’s even caused George W. Bush and Michael Moore to agree on something: The Power of Link Text

In 2006 a search on Google, Yahoo, or MSN for “miserable failure” would bring up the official biography of George W. Bush as #1. All because a large number of people linked to that page using the words “miserable failure”. miserable failure --> The search engines have since fixed their algorithms to impede such “google bombing”, but the power of links in search algorithms and, thereby, what people expect when they click on a link is clear.

Where do I click? For something awesome, click here. Something awesome.

Link Text Some screen reader users navigate just between links. “Click here” tells you nothing about what you’ll get when you click on the link, and can be confusing to screen reader users “Something awesome” gives you at least tentative information about what that link links to. Removing “click here” type link text also gets rid of extraneous, superfluous words

Duplicate Link Text Super Awesomeness -> curry.virginia.edu Super Awesomeness -> twinkies.com Try not to have the same link text go to different places This also applies if the links eventually end at the same place e.g., a shorter url redirect Awesome -> curry.virginia.edu/awesome Awesome -> curry.virginia.edu/research/awesome Awesome -> bit.ly/awesome

Copy Long sentences are usually bad on the web, for instance if you begin to ramble on about how great a program is or talk about what students have done with that degree or the opportunities they had because of that program, you’ll get well beyond the length a sentence should be and get into what I like to call “crazy town” where a single sentence reaches onto the ninth line.

Copy – 2 Clear, concise sentences work best for everyone. Paragraphs should be about one subject and avoid rambling. The words used should be understandable to a wide audience yet still show that the work we are doing is top notch.

Images & Media

Alternative Text Screen readers can’t understand images In order to fix this you need to add alternative text to any image you put on the website The benefits are two fold –Screen readers have something to read to their users –Search Engines can utilize the alternative text and get an idea for what the image is about

Alternative Text – Do Be accurate and equivalent in presenting the same content and function as presented by the image. Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. Source:

Alternative Text – Don’t Be redundant or provide the exact same information as text within the context of the image. Use the phrases "image of..." or "graphic of..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. Source:

Adding Alt Text – New Image Place your cursor where you want the image to go Click the Image button: Browse Server/Upload your image as normal Fill in the Alternative Text Field Click Ok when finished

Adding Alt Text – Existing Image Right click image and choose “Image Properties” to open the image dialog box Fill in the Alternative Text Field Click Ok when finished

Transcripts If you’re putting up audio or video on the site, please provide a transcription of the content This could be an additional file in a Resource or linked to separately Deaf/hard-of-hearing users will not be able to understand the content if no transcription is supplied Transcripts also benefit ESL learners and students with information processing difficulties