WCAG A Standards
"Error occurs when same text is used for links pointing to different destinations."
For instance an error will occur if the text "Admissions" is used twice on your webpage
and it is linked to different destinations. Here is how that can happen:
First "Admissions" link is pointing to Office Admissions root directory at:
/departments/admissions/
While the second "Admissions" link is pointing to the index.html file at:
/departments/admissions/index.html
Although they are going to the same location, some reader applications will treat
the links as pointing to a different destinations.
- Always make sure to create links using OU dependency tags pointing to the destination
website root directory instead of pointing directly to the index file.
- If you are linking to separate destination sources then make sure internet users utilizing
a screen reader can distinguish between the links by doing one of the following:
- Link text is unique. For example "Undergraduate Admissions" & "Graduate Admissions" instead of "Admissions".
- Using aria-label* attribute to place a descriptive text label on your link object.
- In addition to using aria-label make sure your link title is using a unique value.
* What is aria-label?
aria-label helps readers override the text supplied within the link.
"All images including presentational images should include alt tag. If image is linked then the alt tag should state the purpose of the link."
An error will occur if you are missing the alternative text attribute in your image
tag. For instance:
Presentational images:
<img src="myimage.jpg" />
Non-presentational (linked) images:
<a href="mypage.html" title="visit the setup page"><img src="myimage.jpg" /></a>
Presentational images:
<img src="myimage.jpg" alt="" />
Non-presentational (linked) images:
<a href="mypage.html" title="visit the setup page"><img src="myimage.jpg" alt="go
to the setup page" /></a>
"Error occurs when presentational attributes are used in html tags instead of CSS."
For instance an error will occur if "align", "bgcolor" and "border" presentational
attributes are used within html tag like "table" or "img". Here is an example:
<img src="myimage.jpg" border="0px" />
- Use CSS instead.
- Contact Web Services if you need assistance.
"Please avoid using the html bold tag 鈥渂鈥� on your webpages. Instead you may use the html 鈥渟trong鈥� tag. Our CMS Editor automatically uses the 鈥渟trong鈥� tag when you select to make a word bold."
<b>Hello</b>
How to fix the error:
Should change to
<strong>Hello</strong>
"Please avoid using the html italic tag 鈥淚鈥� on your webpages. Instead you may use the html 鈥淓M鈥� tag. Our CMS Editor automatically uses the 鈥淓M鈥� tag when you select to make a word italic."
<i>Hello</i>
How to fix the error:
Should change to
<em>Hello</em>
Header Nesting
"Headings should be used to structure the page and not just for formatting. <H2> should follow <H1> and if the size is not correct, apply an appropriate style like <H2><span class="Alternate-H3"> to control the size."
Example of correct header nesting:
<H1>
<H2>
<H3>
<H3>
<H2>
<H3>
Example of incorrect header nesting:
This often occurs when the user is tempted to use inappropriate headings for styling.
<H1>
<H3>
<H5>
<H5>
How to fix the error:
Instead use a styled heading to control the size and styling of the font to achieve
the same look but achieve appropriate header nesting:
<H1>
<H2><span class="Alternative-H3">
<H3><span class="Alternative-H5">
<H3><span class="Alternative-H5">
<H2><span class="Alternative-H3">
<H3><span class="Alternative-H5">