It's The Simple Things

Web Accessibility

Hello! I am VoiceOver, a screen reader for Mac OS. I read content to individuals who need assistance in receiving information. One of the areas I specialize in is, web pages! In order for me to be effective, I need your help. In this presentation web page, I will be showing you the simple but effective features and points to improve accessibility within your webpages. The features are simple but when used incorrectly or ineffectively they can be a nightmare for keyboard and screen reader users. The browser I will be using is Google Chrome.

Hyperlinks

Hyperlinks provide a way for web users to navigate from page to page.

Creating Effective Hyperlinks

It is important that you provide the name of the page the link will take the user.

For example, when I notice a link, here is what I will say to the user, University of Arkansas. It is not neccessary to provide, "Link To The University of Arkansas". Doing so, will provide redundant information. I will let them know when a link is present. A good rule of thumb is to name your links the same as the title of the page that you are linking to. It will greatly help users in knowing that they are on the right page.

Linking Document

If you are linking to a document such as a pdf, provide the name of the document along with the extension type in parenthesis. For example if you create a link to a pdf document called, "Faculty Handbook". It is helpful to the user when I say, Faculty Handbook (.pdf)

Non Accessible Hyperlinks

Do not use URLs as the link text.

Example: https://www.uark.edu

When creating hyperlinks, don't use, Click Here or Download, I am not able to tell the user the name of the the page they are going to or document. A page may have many links to different pages and I will have to read to the user, Click Here.

The users will be very annoyed and frustruated if I have to read to them a list:

Click Here
Click Here
Click Here
Click Here

Images

All images on a web page must have alternative text. You also may know them as alt tags. Alt tags provide short descriptive information about an image. I use the it to communicate information to users. Whenever an image or multiple images are presented on a web page without an alternative text, I have no choice but to read the file name of the image to the user.

Here is an example:

To Be Decorative Or Not To Be Decorative

After hearing an example of an image without an alt tag, we can see why it is very important, especially when image file name can be listed as given.

When placing an image on your web page, you have to determine whether the image is decorative or informative. This determines whether the alt tag should contain text or not.

Informative Images

Images that are distinct and communicate information to the user, must be described.

Keep them simple, but descriptive.

Here is an example:

Arkansas

Decorative Images

When you place a decorative image or images on a web page, you are saying that the image serves no specific purpose. It is only for presentational purposes. Basically to bring some visuals to make the page look good, nothing more.

When an image is decorative, simply place an image tag without any text. When I see the image, I will look for the alt tag. When I see the alt tag with no text, I will ignore it and skip over it and continue on.

Here is an example:

If your using a screen reader, I have skipped over a decorative image. If you see the screen reader focus border, you will see it skip over the image and continue on.

Headings

Headings provides a way for users to skim a page to get an overall impression of the web content. Users can hear an outline of the page main ideas, then jump from heading to heading to parts that they are most in interested in. Drawback: Too many pages lack headings.

DON'T SKIP HEADINGS
AVOID CREATING YOUR OWN HEADING CSS SELECTORS
AVOID ALTERING THE FONT SIZE AND BOLDNESS

Create a Logical Heading Structure

The heading levels range from h1 to h6. The h1 element is the most important element of a page being that it serves as the title of the page.

All web pages should have one h1 element per page.

Resources

Use resources that can help improve web accessibility throughout your website or web page. Continue to learn and gain more knowledge.

References

Wuhcag

Wuchag is a site created by Luke McGrath, an accessibility consultant. He has a simplified checklist of the WCAG 2.0 Conformance Levels descriptions. It is a great resource for individuals in the beginning process of understanding accessibility.

WebAIM

A great resources to help improve understanding of web accessibility and creating accessible content.

W3C – Web Accessibility Initiative

I use this site for research and to read their latest updates to see if I can further improve accessibility within my role.

Find resources that you can use to test your website or webpages to improve web accessibility.

Don’t trust yourself.

Free Tool

WAVE (Web Accessibility Evaluation) tool

The WAVE, created by WebAIM, is a great free online tools that check pages for accessibility.

The tool is also available as a WAVE Chrome Extension within Google Chrome that you can add to your toolbar for quick access to check webpages.

University of Arkansas Webfirst

Webfirst

Webfirst is the University of Arkansas’ source for web information.

An Accessibility page is available that provides information on web accessibility. Articles are also provided on the site that gives information on ways to improve and receive a better understand of accessibility within webpages, documents, and closed caption videos.

Contact

Byron Burns

Institutional Web Developer

University of Arkansas


Email: bcburns@uark.edu

Phone Number: 479.575.7954