Environment
PeopleSoft
Issue
The Peoplesoft Text Box allows you to add rich content to your views. The following document is not a style guide, but will help you ensure that your text will be meaningful to all users.
Resolution
Setting up
Add the following markup to the text box.
<code sample>
Your content will go in between the <x> brackets. What do you put in there? Simple is always best. Some rules follow.
It is all about the meaning
The HTML markup that you can add needs to be semantically meaningful. Use the appropriate element always. Here is a brief glossary
A paragraph:
use <p>Your content here</p>
An unordered list where order is immaterial:
<ul><li>list item</li> <li>list item</li></ul>
An ordered list where order is important:
<ol><li>list item</li> <li>list item</li></ol>
Give your text structure
Headings
Use headings to organize extended text. PeopleSoft views ordinarily have a Heading 1 (<h1>) so start with an <h2>. Subdivisions of h2 content will have <h3> headings. An example may help: The Calculate Ret. Contribution view has:
<h1>Calculate Ret. Contribution</h1>
In your textbox you can add:
<h2>University of Michigan Retirement Plan</h2>
<h3>IRS Maximum Contribution Projection for 403(b) Plan</h3>
Tables
Use them only for tabular data, never for layout. These are a bit fussy: here are some rules to ensure that the table has visual and logical structure.
Always make the first row a row with column headers (<th scope=”col”>).
If there is a cell in the data rows that could be construed as the “subject” of that row, make it a <th scope=”row”>
Use a caption.
<table>
<caption>The name of this table</table>
<tr>
<th scope="col">Column head 1</th>
<th scope="col">Column head 2</th>
<th scope="col">Column head 3</th>
<th scope="col">Column header 4</th>
</tr>
<tr>
<tr>
<th scope="row">Row head</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
..... more rows here
</table>
Make your links obvious
If your links do not underline automatically, add a style=”” attribute with style information that will produce a link that stands out:
color: blue;
text-decoration: underline;
font-weight: bold;
So for example <a style=”color: blue; text-decoration: underline; font-weight: bold;”....etc
Style your text semantically
You want a bold section title?: Use an appropriate heading (<h2>, <h3>)
You want to highlight some text?: Use <strong> for bold, <em> for emphasis
You want to really highlight some text?: Use <span style=””> - the value of style will depend on your needs. But never rely on color alone. Some possibilities:
color: red; < do not leave it at this!
text-decoration: underline;
font-weight: bold;
The best addition to highlight text is a simple added word:
"Note/Important/Attention: here is the text I want to call attention to"
Which by now you know you can get via:
<strong>Note:</strong> here is the text I want to call attention to
Things to avoid
Using paragraphs or line breaks for spacing
Instead of:
<p>Some text</p>
<p></p> or <br>
<p>Some other text</p>
use:
<p style="margin-bottom:2em">Some text</p>
<p>Some other text</p>
Do not use semantically meaningless elements
For example
<div>Some text</div>
will give you something that looks like a paragraph, but has no meaning. Better to use a paragraph, or adding a paragraph inside:
<div><p>Some text</p></div>
Do not write invalid HTML
Your code might get complicated and mistakes can creep in. Validate it with a service found in the supporting documentation.
Additional Information
Digital accessibility is about ensuring that all members of our community have access to and can engage with digital products, tools, information, and resources in a way that’s equitable, inclusive, and empowering.
Supporting Documentation
List of links that expand further on things touched upon briefly in this document.
Contact ITS Accessibility if you have any accessibility questions or concerns.
Need additional information or assistance? Contact the ITS Service Center.