”“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: http://curry.virginia.edu/about/diversity-at-curry

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 <h1>

through <h6>, which in the editor appear as

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 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 – ExampleHeading 1 – Curry School of Education (the site)Heading 2 – Graduate Admissions (the page)Heading 3 – Graduate DegreesHeading 4 – Degree 1<Content>Heading 4 – Degree 2<Content>Heading 3 – Graduate Licensure and/or Endorsement Non-degree Programs<Content>

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

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 --> http://www.michaelmoore.com• 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: http://webaim.org/techniques/alttext/

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: http://webaim.org/techniques/alttext/

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