Skip to navigation content (Press Enter).

Perceivable Guidelines

Lesson 3 of Section 3

Information and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

This section requires quite a bit of knowledge to fully comprehend it. While this guide will cover basic concepts of the section, you should also check up on Success Criterion 1.3.1

If you are unsure of whether or not your webpage has proper presentation, you can always provide an alternate text version of the information you are relaying for accessibility purposes. The following is a summary of proper coding that you should adopt.

  • Use <p> tags to organize your text content.
    <p>If you are unsure of whether or not your webpage has proper
    presentation, you can always provide an <em>alternate text version</em> of
    the information you are relaying for accessibility purposes. The following is a
    summary of proper coding that you should adopt.</p>
  • Use <em> and <strong> tags to emphasize content. If you are highlighting or using font color for emphasis, you should still use the <em> or <strong> tags with a CSS class to maintain this emphasis using markup. Using a color attribute with a <font> tag is bad markup!
    Using a <em>color</em> attribute with a <font> tag is 
    <strong class="highlight-me">bad markup!</strong>
  • Always use CSS to style your page. Only use HTML markup to set up the content of your page in an organized manner.
  • Create accessible tables with designated header cells using <th> tags and proper scope attributes. WebAIM has a useful tutorial on creating accessible tables.
  • Use the <label> tags or title attribute to label input fields for a form. Only use the title attribute when the <label> tag can't be used.
    <fieldset><legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" 
    type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" 
    type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
    type="text" size="4" value="" >
    </fieldset>
  • Group together radio selection or checkbox options using the <fieldset> tag. The selections will be grouped visually into a box with a label that can be set with the <legend> tag.
    <form action="http://example.com/adduser" method="post">
    <fieldset>
       <legend>Residential Address</legend>
       <label for="raddress">Address: </label>
       <input type="text" id="raddress" name="raddress" />
       <label for="rzip">Postal/Zip Code: </label>
       <input type="text" id="rzip" name="rzip" />
    </fieldset>
    <fieldset>
       <legend>Postal Address</legend>
       <label for="paddress">Address: </label>
       <input type="text" id="paddress" name="paddress" />
       <label for="pzip">Postal/Zip Code: </label>
       <input type="text" id="pzip" name="pzip" />
    </fieldset>
    </form>
  • Group together different option selections using the <optgroup> tag. This allows quicker selection for screenreaders since they can pick a category before selecting a particular item. Also note that you can sort the options in alphabetical order for extra ease-of-use.
    <select name="ingredient" id="ingredient"><optgroup label="Fruit">
      <option name="ingredient" value="apple">Apple</option>
      <option name="ingredient" value="pear">Pear</option>
    </optgroup><optgroup label="Vegetable">
      <option name="ingredient" value="broccoli">Broccoli</option>
      <option name="ingredient" value="carrot">Carrot</option>
    </optgroup></select>
  • Use <ol>, <ul>, and <dl> tags and their children tags for lists or groups of links.
  • Use <h1> through <h6> tags to identify headings properly. Remember that a heading tag identifies "sections" of the webpage. You should use <h2> to identify a subsection under the <h1> tag, and so on.
    <h1>This is the heading of a section</h1>
      <p>Content goes here</p>
    <h2>This is the subheading of the above section</h2>
      <p>More content goes here</>

Test your knowledge!

Take the test or continue to the next lesson.

Sources

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at www.mcmaster.ca/uts/macid

Service Desk

Client Self Service:
https://servicedesk.mcmaster.ca
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Email: uts@mcmaster.ca
Location: Main Campus BSB Rm. 245
Service Catalogue:
http://www.mcmaster.ca/uts

Great Idea Site

Great Idea