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