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.
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.
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)
Do not use URLs as the link text.
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:
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:
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.
Images that are distinct and communicate information to the user, must be described.
Here is an example:
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 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.
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.
Use resources that can help improve web accessibility throughout your website or web page. Continue to learn and gain more knowledge.
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.
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.
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.
Institutional Web Developer
University of Arkansas
Phone Number: 479.575.7954