This training will address web accessibility for web editors and content creators.
According to the World Health Organization, approximately 1.3 billion people worldwide
have a significant disability. That is approximately 17% of the population.
As people age, the likelihood that they develop a disability increases. For people 65 and over,
half the population has some form of disability.
This training will begin with a brief overview. We will discuss accessibility,
why it is important, and your role in creating accessible content.
By the end of this training, you should understand the importance of and know how
to implement headings, the H1 tag, alt text, images, link text, lists,
video captions, and transcripts. You should also understand accessibility best practices.
Let's dive in. What is accessibility?
So what is accessibility? Accessibility means that
everyone regardless of ability can have an equivalent experience. Accessibility
is about removing barriers. It's about creating opportunities for everyone.
Think about this sentence. Accessibility is about turning I can't moments into I
can moments. When people struggle with and become frustrated by a website,
they leave the site. As a web editor, you need to turn the I can't moments into I
can moments. If people are successful on your website, they will return to the site.
Why is accessibility important?
When a website is accessible, everyone can use the website. Following accessibility principles
while building web pages opens the web up to people who use assistive or adaptive technology.
Assistive or adaptive technology allow people with disabilities that affect seeing, hearing,
motor skills, or cognitive abilities to use the web.
Disabilities can be temporary, situational, or permanent.
A person caring for a child, using a cellular device in bright sunshine, or being in a very
loud environment would be examples of situational disabilities. Someone with a broken arm or an eye
infection would be an example of a temporary disability. A person with complete blindness,
dyslexia, or Parkinson's disease would be examples of permanent disabilities.
As a web editor, the accessible content that you create will allow people who rely on
assistive or adaptive technology to use your website. Examples of permanent disabilities
include complete or partial blindness, deafness, ADHD, and essential tremor.
Assistive and adaptive technology allow people with disabilities to access the web
in various ways. Examples of assistive and adaptive technology include screen readers,
screen magnification, captions, transcripts, mouth wands, text to braille conversion, speech-to-text
and text-to-speech. One final reason to ensure an accessible website is that accessibility
is the law. The Americans with Disability Act applies to websites. The curb cuts on sidewalks
and the ramps on businesses are equivalent to alt text and semantic code on a website.
In April of 2024, the Department of Justice released new guidelines
for website accessibility and referenced both section 508 of the Rehabilitation Act of 1973
and the website content accessibility guidelines as a reference for accessibility best practices.
What can you do? Accessibility is the responsibility of everyone who works on
a website. As a content creator or website editor,
you need to ensure that all the content that you add to a website is accessible.
Website accessibility training.
WCAG 2 introduced four user focused principles for achieving website accessibility. These
principles are perceivable, operable, understandable, and robust, which spell
out the acronym POUR. By understanding and implementing the POUR principles,
website editors can remove barriers to website use for people with disabilities.
We will look at each of the POUR principles and the requirements. Then we will ask
questions relative to the content. Perceivable content can be accessed by anyone. Content is
presented in more than one way. The questions to ask. Have I included captions? Do I have
alt text? Are there transcripts? Operable - Content can be accessed with different
technologies. Can someone using a screen reader understand this web page? Do the
links make sense? Understandable - Content can be understood by anyone. The questions,
is this written at a 6th to 8th grade reading level? Is the content well organized? Have I
used the proper code for each element on the page? Robust - Information is accessible across devices
and web browsers. Will this content present equally on a phone, tablet, or desktop computer?
Let's move into the training and learn about headings and the H1 tag. Headings bring order
to a web page. You can think of a web page like a newspaper. There are titles and subtitles or
headings and subheadings. Heading levels range from H1, the page title to H6. Heading tags need
to follow in order H1, H2, H3, H4, H5, and H6. Although not all tags will be used on all pages,
The page title is the H1 heading. Every page needs a title,
an H1 tag. Titles need to be unique. If you have multiple pages with the same title,
it will be confusing to a person using a screen reader.
For this page, let's decide which headings are needed for the content. The page title,
the H1 tag, is the Help Hub. Heading level two,
the H2 would be Here to Support You. And heading level three, the H3 is Help Hub Dropbox.
Now we will build a web page using proper headings. Look at the content for this
web page. The page is about primates. It discusses both old and new world
monkeys. It also discusses individual monkeys within these categories. Which
headings do you think are needed on this page? Primates is the page title, the H1.
New World Monkeys and Old World Monkeys are the second level headings, the H2. Finally,
Grey Legged Night Monkeys, Colombian Red Howler, and Allen's Swamp Monkeys are all H3s.
The HTML code for a heading tag uses the opening and closing angle brackets and
the heading designation. Between the opening and closing heading tags, you write the title. A web
developer will use CSS or cascading style sheets to differentiate the importance of each tag.
They will assign the individual headings various font weights,
sizes, and sometimes colors to create the different heading levels.
Best practices for headings. Web page style is created using CSS,
so headings should not be used to affect page design. Don't skip from H2 to H4 or
H5 for aesthetic reasons. Headings are one way to navigate a page using a screen
reader. It is important that the headings are structured properly. As screen readers
read aloud the headings on the page, proper order order of headings limits confusion.
Alt text and Images.
Alternative text (alt text) is used by screen readers. Alt text is also
displayed if images are not available. Images that are decorative only should
you have null alt text and images that convey meaning need descriptive alt text.
So what is descriptive alt text? Alt text should accurately describe the image or
the information contained within the image. The alt text should be clear and concise. To
determine the alt text, look at the image and ask questions. Who, what, where, why,
and how. Then decide which answers provide critical information. The
alt text for complex graphs, maps, and diagrams will require greater detail.
How do you write descriptive alt text? You begin by asking questions. What is
this? A river. What river? The Colorado River. Where is it?
In Moab, Utah. The Colorado River in Moab, Utah would work as descriptive alt text for this image.
To code an image, you use the image tag, which is a self-closing tag. The parameters needed for
the tag are the source or image file name, alt the alt text, the width and height. So,
null alt text has alt followed by the equal sign and empty quotation marks. Descriptive
alt text has alt followed by the equal sign and a description within the quotation marks.
So, the best practices for images and alt text. Alt text should not contain the words "image of",
"picture of", or "photograph of" the screen reader alerts the user that an image is being described.
If the phrase "image of" is used in the alt text, the screen reader will say image of image of.
Ideally, images will not have any words embedded in the image file. If words are part of the image,
all the words must be included in the alt text. Images should have human readable
file names. If alt text is missing, a screen reader will default to the image file name.
What is a human readable file name? The images on the left all have computer
or iPhone generated file names. If these names were read aloud by a screen reader,
the person hearing the file name would not know what the image contained. The images
on the right side of the screen have human readable file names. If a screen reader read
snowy trees aloud, the person using the screen reader would understand the image.
Now let's discuss link text.
Link text, also known as hyperlinks. Link text is the text you click to move to another web page,
website, or to open a doc document. Link text needs to be descriptive and
have meaning for someone using a screen reader. Quality link text is important as
it lets the user know where each link leads. If all the links on the page are click here,
a person using a screen reader will hear click here, click here, click here as they listen to
the links on the page and they will not understand where any of the links lead.
Choosing link text. Link text could be the title for an article or a sentence from a paragraph.
It is important to read through your sentences and choose the
best text to include include within the link.
Let's examine some link text examples. Kickoff Cookout, Welcome New Faculty,
Fine Arts and Book Fair Details and Curious Creators a Hopeful Journey
are all article titles and are examples of good link text. Read more, read more,
read more, and read more are examples of poor link text.
Determining link text. Read the following paragraph. What text do you think would make good
link text? Endangered animals can be listed as critically endangered, endangered, or vulnerable.
The World Wildlife Fund maintains a species directory for endangered animals. Endangered
animals? The World Wildlife Fund? Species directory for endangered animals? Or learn
more? Species directory for endangered animals makes the best link text for this content.
Lists.
Lists provide structure and order to content. A screen reader will announce
the list and the number of items in a list. List lists need to use the list
tag and the list item tag. Avoid using numbers and dashes to make
the content look like a list. Lists can be ordered, unordered, or description lists.
An ordered list has a defined sequence of steps. When doing a load of laundry,
you need to sort your clothes before adding them to the washer.
So, as you can see, washing clothes, you sort the laundry, you add the clothes,
you add the soap, choose settings, start washer. And to write the code,
you use the opening ordered list tag, the list item tags, and then the closing ordered list tag.
An unordered list has no specific order. When creating a shopping list,
there isn't any defined order. Shopping might be
easier if the list follows the layout of the store, but it isn't necessary.
So, looking at the code for the unordered list, you see that the unordered list uses the ul in
the opening and closing tags and then the list items li with it for the items within the list.
Description lists. A description list provides a list of terms with descriptions of the terms.
In this description list, we have dog, animal that barks, cat, animal that meows, and a cow,
animal that moos. If you look at the code for the description list, it starts with the
opening description list tag, the DL. And then it goes into a term name tags, which is the DT,
and then the term descriptor tags, the DD tag. And then again, it another term name tag,
and another term descriptor tag. And it closes with the closing descriptor list tag or the
DL closing tag. Building a list. Let's build a list. Content: vacuum the house. Wash the car.
Break. Make dinner. Rake the leaves. Which list type is best suited for this content?
This looks like Saturday chores. An unordered list will do. Using the
UL or unordered list opening and closing tags and the list item tags, let's build the list.
Videos, captions, transcripts, and title attribute.
Videos, captions, and transcripts.
Adding transcripts and captions to videos allows deaf people to understand the audio content in a
video. Captions also help people with cognitive disabilities follow along with the audio output.
Captions. This video has captions overlaid on the video. Captions need to be accurate to the
audio content. If captions are auto-generated, you will need to edit the captions for accuracy.
This video has a transcript playing beside the video content. Transcripts need to be accurate
to the actual verbal content. Videos the title attribute. If pulling the embed code from YouTube,
change the title attribute to be more descriptive of the video. YouTube will
add YouTube video player as the title for all videos. If there are multiple videos on a page,
each video should have a unique title. Now, on to accessibility best practices.
So, many people are color blind, one in 12 males and one in 200 females. To aid people with color
blindness or color deficiencies, use visual cues on graphs and tables to better display
the data. Various pattern fills can be used to differentiate between the data points.
Also, the use of data labels and headers will make graphs and tables more accessible.
Content should be clear, concise, and understandable. It is advisable to aim
for a 6th to 8th grade reading level for website content. All PDFs, Word docs,
and PowerPoints added to the site must also be accessible. To maintain visual contrast,
allow the CSS to dictate the font and background colors. Avoid adding special colors to the web
page. When adding content to a web page, always use proper HTML tags, known as semantic HTML.
And a couple more accessibility best practices. Content that has been copied from a Word document
may have deprecated tags when it is pasted into the editor field of a CMS or content management
system. Check the source code to ensure that bold text uses the tag and
not the tag. Also ensure that italicized text uses the tag and not the tag.
To draw attention to the content, it is preferable to use either the or the tag. Using
all capital letters can be confusing to someone with a cognitive disability. Also,
underlining the text may cause people to click where there isn't a link. Thank