Website ADA Compliance – Accessibility at UH /access Wed, 17 Apr 2019 18:51:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 1. Small tag used to alter text size /access/2019/04/17/1-small-tag-used-to-alter-text-size/ Wed, 17 Apr 2019 18:34:58 +0000 http://www.hawaii.edu/access/?p=681

Small tag example

Description: Do not use the ‘small’ tag to alter text size. If the page is written in HTML5, this issue can be ignored.

Context:HTML tags should denote semantic meaning instead of just styling. In HTML5 it is acceptable to use the tag to denote things like disclaimers, caveats, legal restrictions, or copyrights, however the tag should not be used for subheaders.

<small>
   Office of Planning and Facilities
</small>

How to fix it: Use semantic elements to indicate emphasis or structure, and CSS to handle styling.

<h4>
   Office of Planning and Facilities
</h4>

Techniques: G115, G140, H49

]]> 2. Aria-labelledby has incorrect (ID) reference /access/2019/04/17/aria-labelledby-has-incorrect-id-reference/ Wed, 17 Apr 2019 18:36:38 +0000 http://www.hawaii.edu/access/?p=683 , , , ,

ARIA-labelledby example

Description:The WAI-ARIA ‘aria-labelledby’ attribute has a reference to an ID that does not exist or an ID that is not unique.

Context:All ARIA tags must reference elements that exist on the page, an ID should only be used once on any given page.

<a id="advanceddegree" href="content/advanced-degree-institutional-learning-objectives-ilo" aria-labelledby="advanceddegreeinstitutionallearningobjectives">
   Read more...
</a>

How to fix it:Make sure the ID referred by ‘aria-labelledby’ exists on the page and that the referred ID is only used on one element on the same page.

<a id="advanceddegree" href="content/advanced-degree-institutional-learning-objectives-ilo" aria-labelledby="advanceddegreeinstitutionallearningobjectives">
   Read more...
</a>
<p id="advanceddegreeinstitutionallearningobjectives">See more learning objectives</p>

Techniques:,,,,

]]> 3.Aria-describedby has incorrect (ID) reference /access/2019/04/17/3-aria-describedby-has-incorrect-id-reference/ Wed, 17 Apr 2019 18:39:40 +0000 http://www.hawaii.edu/access/?p=686 ,

ARIA-describedby example

Description:The WAI-ARIA ‘aria-describedby’ attribute has a reference to an ID that does not exist or an ID that is not unique.

Context:All ARIA tags must reference elements that exist on the page, an ID should only be used once on any given page.

<table class="table table-responsive" aria-describedby="summary">
   <caption>
     鶹ýMānoa Materials Deadlines
   </caption>
</table>

How to fix it:Use semantic elements to indicate emphasis or structure, and CSS to handle styling.

<table class="table table-responsive" aria-describedby="summary">
   <caption>
     鶹ýMānoa Materials Deadlines
   </caption>
</table>
<p id="summary">A table of material deadlines for 鶹ýMānoa</p>

Techniques:,,

]]> 4. s or “strike” tags used to format text /access/2019/04/17/4-s-or-strike-tags-used-to-format-text/ Wed, 17 Apr 2019 18:41:51 +0000 http://www.hawaii.edu/access/?p=688

Incorrect strike example

Description:Do not use the ‘s’ or ‘strike’ tags.

Context: In HTML5 the ‘del’ tag has been semantically designated for text that should be removed instead of ‘s’ or ‘strike’. The ‘ins’ tag is used to indicate recently inserted, or replacements for deleted text.

<div align="center">
   <font color="red">
     <strike>$20</strike>
   </font>
   $10
</div>

How to fix it:Use semantic elements to indicate deletion, and CSS to handle styling.

<div>
   <del>$20</del>
   <ins>$10</ins>
</div>

Techniques:,

]]> 5. Big tag used to alter text size /access/2019/04/17/5-big-tag-used-to-alter-text-size/ Wed, 17 Apr 2019 18:43:39 +0000 http://www.hawaii.edu/access/?p=690

Incorrect big tag example

Description: Do not use the ‘big’ tag to alter text size.

Context: In HTML 5 the ‘big’ tag has been deprecated, the CSS property ‘font-size’ should be used to handle any text size adjustments that are not related to headers and other navigational elements. Text used to divide content should be placed in header tags.

<big>
   What is the Freshman Seminars Program?
</big>

How to fix it: Use semantic elements to indicate deletion, and CSS to handle styling.

<h3>
   What is the Freshman Seminars Program?
</h3>

Techniques: ,,

]]> 6. Bold tag used to format text /access/2019/04/17/6-bold-tag-used-to-format-text/ Wed, 17 Apr 2019 18:45:41 +0000 http://www.hawaii.edu/access/?p=692

Incorrect bold tag example

Description: The ‘bold’ tag is used to highlight text.

Context: Screen-readers and other assistive technology cannot understand the context of a bold tag (as bolded text can play numerous roles). Using semantic elements such as “header” or “strong” tags can help readers understand page structure correctly.

<b>
   Are you attending classes this Summer? Join us here at Student Housing!
</b>
<br> 
Student Housing Services offers on-campus housing for students enrolled in credit courses during
<b>Summer I</b> (May 18, 2019 - June 29, 2019),
<b>Summer II</b> (June 29, 2019 - August 10, 2019),
<b>Summer III</b> - Combined Sessions (May 18, 2019 - August 10, 2019), and
<b>Varied Term</b>

How to fix it: Consider the following: If the text should be emphasized semantically, use the ‘strong’ tag instead. If the text is a heading, an ‘H’ tag (such as H1, H2, H3…) should be used instead. If the text is highlighted as a visual effect, CSS should be used to do this.

<h3>
   Are you attending classes this Summer? Join us here at Student Housing!
</h3>
<br> 
Student Housing Services offers on-campus housing for students enrolled in credit courses during
<strong>Summer I</strong> (May 18, 2019 - June 29, 2019),
<strong>Summer II</strong> (June 29, 2019 - August 10, 2019),
<strong>Summer III</strong> - Combined Sessions (May 18, 2019 - August 10, 2019), and
<strong>Varied Term</strong>

Techniques: , ,

]]> 7. Center tag used to format content /access/2019/04/17/7-center-tag-used-to-format-content/ Wed, 17 Apr 2019 18:47:16 +0000 http://www.hawaii.edu/access/?p=694

Incorrect center tag example

Description:The HTML center tag has been used to center content. HTML should not be used for presentational purposes, but only for semantics to allow for different presentations of the content.

Context:Styling-specific tags are discouraged for ADA-compliance, adjustments to appearance strictly for aesthetics should be restricted to CSS.

<center>
   <table width="148" border="0" cellspacing="0" cellpadding="0">
     <tbody>
       <!--Content-->
     </tbody>
   </table>
</center>

How to fix it:Use semantic elements to indicate emphasis or structure, and CSS to handle styling.

<table width="148" border="0" cellspacing="0" cellpadding="0" class="center">
   <tbody>
     <!--Content-->
   </tbody>
</table>

.center {
   text-align: center;
}

Techniques: ,,

]]> 8.Font tag used to format text /access/2019/04/17/8-font-tag-used-to-format-text/ Wed, 17 Apr 2019 18:49:03 +0000 http://www.hawaii.edu/access/?p=696

Incorrect font tag example

Description:Do not use the ‘font’ tag to create changes in typography.

Context:Styling-specific tags are discouraged for ADA-compliance, adjustments to appearance strictly for aesthetics should be restricted to CSS.

<font color="#000000" size="2" face="Arial">
    Deans of the
    <br>
    Colleges of Arts &amp; Sciences
</font>

How to fix it: Use semantic elements to indicate emphasis or structure, and CSS to handle styling.

<div class="deans">
    Deans of the
    <br>
    Colleges of Arts &amp; Sciences
</div>

.deans {
    font: 10px Arial;
}

Techniques:,,

]]> 9.Access key is not unique /access/2019/04/17/9-access-key-is-not-unique/ Wed, 17 Apr 2019 18:50:07 +0000 http://www.hawaii.edu/access/?p=699

Incorrect access key example

Description:The same access key is used for several items on the page.

Context:Any properties used to assist in navigation (ID’s, access keys, tab orders, etc) must be unique for readers to navigate through the page properly.

<a href="https://kahualike.manoa.hawaii.edu/horizons" title="Mānoa Horizons" accesskey="1">Journal Home</a>

<!--Content-->
                            
<a href="https://kahualike.manoa.hawaii.edu" title="Home page" accesskey="1">Home</a>

How to fix it:Access keys must be unique. Using standards like this helps user agent render content properly to the user.

<a href="https://kahualike.manoa.hawaii.edu/horizons" title="Mānoa Horizons" accesskey="1">Journal Home</a>

<!--Content-->
                            
<a href="https://kahualike.manoa.hawaii.edu" title="Home page" accesskey="2">Home</a>
]]> 10.HTML is used to format content /access/2019/04/17/10-html-is-used-to-format-content/ Wed, 17 Apr 2019 18:51:09 +0000 http://www.hawaii.edu/access/?p=701

HTML format incorrect example

Description:Presentational attributes such as ‘border’, ‘align’, or ‘bgcolor’ are used. CSS should be used for styling instead.

Context:To prevent extraneous text from being read by screen readers, it is best practice to keep the HTML as uncluttered as possible, including removing in-line styling. However, in some cases removing in-line tags can be impractical, as they are generated by plugins or vendors that you have no control over. This should be evaluated on a case-by-case basis.

<img src="images/spacer.gif" alt="University of Hawaii at Manoa" width="200" height="100" border="0">

How to fix it:It’s important to review these issues and determine if they can be fixed by moving the presentational attributes to your CSS. It’s not always practical to make these changes, but should be made when possible.

<img src="images/spacer.gif" alt="University of Hawaii at Manoa" id="spacer">

#spacer{
    width="200" height="100" border="0"
}

Techniques:

]]>