Instructional – Accessibility at UH /access Wed, 06 May 2020 00:28:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 1. Text alternative to images /access/2019/04/19/1-text-alternative-to-images/ Fri, 19 Apr 2019 00:23:58 +0000 http://www.hawaii.edu/access/?p=796

Small tag example

Description: If an image has words in it that are important to understanding the content, then the PDF must have text alternative to describe the image. It does not need to describe the visuals but the text must convey the same meaning.

How to fix:

Techniques:

]]> 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. Using bookmarks /access/2019/04/19/2-using-bookmarks/ Fri, 19 Apr 2019 00:31:33 +0000 http://www.hawaii.edu/access/?p=798

2.4.5

Example table of contents

Description: Users must be able to locate content using bookmarks. An overview of the document helps persons with disabilities navigate the document without traversing through all the pages.

How to fix:

Techniques:

]]> 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. Correct tab and reading order /access/2019/04/19/3-correct-tab-and-reading-order/ Fri, 19 Apr 2019 00:33:48 +0000 http://www.hawaii.edu/access/?p=800

, , ,

Example of wrong tab order

Description: Users must be able to navigate through content in a logical order that is consistent with the meaning of the content with the tab key.
For sighted users, the logical order of the content is the visual order on the screen.
For keyboard and assistive technology users, the tab through order determines the order the users navigate through the content. Tabbing through must reflect the logical order of the document.

How to fix:

Example of correct tab orderTechniques: , ,

]]> 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. Indicate required form controls /access/2019/04/19/4-indicate-required-form-controls/ Fri, 19 Apr 2019 00:34:38 +0000 http://www.hawaii.edu/access/?p=802

, ,

Example of no required fields

Description: Notify the user when a required field must be completed has not been completed in the PDF form. An alert dialog must describe the error if a required field is not completed.

How to fix:

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. Table Elements /access/2019/04/19/5-table-elements/ Fri, 19 Apr 2019 00:34:59 +0000 http://www.hawaii.edu/access/?p=804

Example of a table

Description: Tables must be recognized by assistive technology. When a user tabs through the data in the table, the information must preserve relationship between the row and the column headers.

How to fix:

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: ,,

]]>