Download Accessible by Design Web Pages

Accessible by Design
Web Pages
Overview
Education is changing rapidly. Many classes are now taught as hybrids or online, and
individual user experience varies depending on technology used to access the course.
Website usability is not a function of the visual design; a usable web page is effective if
it meets the needs of the end user.
Creating accessible web pages can be easier than expected when making it
accessible by design. The purpose of this guide is to pinpoint the most important steps
to add to your workflow when designing or revising web pages
1. Provide Structure with Headings.
2. Add Alternate Text to Images.
3. Add Descriptive Text to Hyperlinks.
Provide Structure With Headings
Use Headings
Navigating a webpage with assistive technology can either be quick and efficient or
frustrating. Headings provide a way for users of assistive technology to navigate and
search a website effectively.
• It is better to use native heading HTML mark-up, i.e. <h1>
• Don’t skip heading levels. Stay within a hierarchy, where Heading 1 is the highest
level of heading.
• Do not use headers to achieve visual results only, i.e. emphasize an element or
phrase on your webpage.
HTML Coding for Headings
For example: HTML coding used below is: <h2>Using Headings for Content
Structure</h2>:
Using Headings for Content Structure
When encountering a lengthy web page, sighted users often scroll the page
quickly and look for big, bold text (headings) to get an idea of the structure and
content of the page.
Back to the Top
Add Alternate Text to Images
Improving user experience can be accomplished by first making a determination if a
graphic conveys meaning, important to the web page content or simply decorative for
creating an appealing site. Alt text should be explicit, describing the function of the
image. Properly coded graphics can be read or skipped by the end user, increasing
their ability to navigate and making for a better user experience.
Alternative text is not to be confused with the image name.
Where to Use Alternate Text
Alternate text should be added to all non-text elements, including:




Pictures
Graphs
SmartArt
Charts
Writing Good Alternate Text
Alt Text provided to the user must present the content and function of the images
within a web page. WebAim (web accessibility in mind) offers the following suggestions
when trying to determine what should beused for alt texts:
 Be accurate and equivalent in presenting the same content and function of 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.
 Don’t use the phrases "image of ..." or "graphic of ..." to describe the image. It
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. If the fact that an image is a
photograph or illustration, etc. is important content, it may be useful to include
this in alternative text.
 If the image is decorative or used as a placeholder remember that it is helpful to
use a null alt tag (alt=””) rather than simply leave the alt tag blank.
HTML Coding for Alternative Text
Provide text equivalents for all meaningful graphics and any text included within the
image.
For example:
class="seal"
alt="Great Seal of the State of Arizona, 1912 Ditat Deus"
Alt text for decorative images or images used as placeholders contain meaningless
information and should be labelled with alt=””, the null alt text.
Back to the Top
Descriptive Hyperlinks
Links can sound confusing to a listener, as well as look confusing to visual learners,
especially if there are a lot of random characters in the address. Screen reader users
often scan a document for hyperlinks, so it is important to make sure your links make
sense without their surrounding content.
For example, a link should say “Readings for the week of February 14” rather than
“Readings for the week of February 14. Click here.”
In addition, links are underlined as a visual clue. Consider removing any underlines
used for purposes other than hyperlinks.
Back to the Top