verified_user Protected Files
Create and submit secure files encrypted for privacy and extra security. You can also view your files via our secure network.
Structure
This pattern library is built with the focus on making sure that the elements and structure used to build our applications are in accordance with the WCAG 2.0 guidelines. This focus can improve the usability for all, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments or situational disabilities. We have followed the best practice of using pure native HTML 5 elements whenever possible, as well as using ARIA (Accessible Rich Internet Applications) attributes to buttress the layout to provide support for dynamic content that has no HTML equivalent.
Base Layout
You can download this base template to set the structure for your application. It has the bare essentials to make the template display correctly, but you will need to apply your scripts to make it fully functional. Here is an example of the base layout template.
HTML Header Snippet
HTML Main Content Snippet
HTML Footer Snippet
<footer role="contentinfo" id="main-footer">
<div class="container">
<div class="copy-right">© <script>document.write(new Date().getFullYear())</script> Leonard N. Stern School of Business | <a href="https://www.nyu.edu/footer/accessibility.html"> Accessibility</a> <span class="push-right"><a href="https://www.nyu.edu/"> New York University</a></span> </div>
</div>
</footer>
<!-- JS Scripts --->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../js/main.js"></script>
</body>
</html>
Headings
Headings are a crucial part of a site's or application's visual hierarchy, they provide structure and appropriate division of sections and subsections. Both sighted and non sighted users use headings to quickly scan content. More importantly, screen readers use headings and ARIA landmarks to bypass blocks of content of a site or application.
Best Practices
- Headings SHOULD NOT skip hierarchical levels:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>. - The beginning of the main content SHOULD start with a heading level 1:
<h1>. - Text that does not act as a heading visually or structurally SHOULD NOT be marked as a heading.
- Headings MUST be accurate and informative for the sections that they are describing.
Heading 1,
Heading 2,
Heading 3,
Heading 4,
Heading 5,
Heading 6
Lists
User research has proven that people generally scan websites/applications until they find someting of interest, then they stop and read. We have to build applications that support this preference. Lists are a great way to create applications that are scannable and easy to navigate. Additionally, lists also help blind users know what items on the page are lists and how many are there. Giving lists the correct semantics helps give blind users an equivalent experience. There are three main types of lists in HTML:
- Unordered lists
<ul>- used when a set of items can be placed in any order. - Ordered lists
<ol>- used when the list items need to be placed in a specific order. - Definition lists or Description lists in HTML5
<dl>- used to pair a term with its definition or a name with a value.
Best Practices
- Lists MUST be constructed using the appropriate semantic markup.
- Individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists.
- Use different types of lists to group information according to the nature of the content.
Unordered Lists
- Item
- Item
- Item
- Item
Ordered Lists
- Item 1
- Item 2
- Item 3
- Item 4
Definition Lists
- Coffee
- - black hot drink
- Milk
- white cold drink
Tables
Tables are used to provide organization and structure for data that are related. Users with the benefit of sight can easily see these relationships but users without sight or low vision cannot (screen reader users). In order to be accessible to all users tables MUST use the correct mark up. When tables are not marked up properly, screen reader users will probably find it difficult to understand the data relationships.
Best Practices
- Tabular data SHOULD be represented in a
<table>tag. - Use
<th>for table headers (with appropriate scope attributes). - Tables SHOULD NOT be used for page layouts.
- If the table is not used for tabular data, but instead for layout of content, use the
role="presentation"on the table element. - Data tables MUST have an accessible name to identify the purpose of the table. An accessible name for a data table enables people using assistive technologies to identify the purpose of the table and to differentiate among multiple data tables on the same page.
- Any of the following techniques can be used to assign an accessible name to a data table:
- Use
captionelement to provide an accessible name for a data table. - Use
summaryattribute to provide an accessible name for a data table. - Use
titleattribute to provide an accessible name for a data table. - Use
aria-labelattribute to provide an accessible name for a data table. - Use
aria-labelledbyattribute to provide an accessible name for a data table.
- Use
search
| Column header 1 | Column header 2 | Column header 3 | Column header 4 |
|---|---|---|---|
| Row item 1 | Row item 1 | Row item 1 | Row item 1 |
| Row item 2 | Row item 2 | Row item 2 | Row item 2 |
| Row item 3 | Row item 3 | Row item 3 | Row item 3 |
| Row item 4 | Row item 4 | Row item 4 | Row item 4 |
| Row item 5 | Row item 5 | Row item 5 | Row item 5 |
HTML Table code snippet
Cards
Cards are UI components that allow users to preview content composed of different element (multimedia, text, links, graphs, and captions). Cards are great for mobile responsive layouts, they are also a great way to organize disparate elements into one cohesive content block. Additionally, cards are better suited for users who prefer to browse rather than search.
Best Practices
- Don’t present multiple ideas in one card. Instead, present each idea as its own card.
- Keep it simple, don’t overload cards with extra information or actions.
- Limit the amount of text in your card, for example don’t add paragraphs of text.
- Use good quality images and good typography.
question_answer CFE Evaluations
View your current and past CFE evaluations submitted by your peers.
local_library New Courses
Need help? We built this course to solve your problems. Automate testing your code by creating your own custom testing framework!.
assignment Departments
HTML Card Code Snippet
Call Out Box
A Call-Out box is a great UI pattern that can be used to draw the user's attention to an important piece of content. It breaks up the monotony of the layout and highlights areas where you want to direct the user's focus.
Best Practices
- Don't be verbose.
- Content SHOULD be clear, simple and easy to understand.
- Use sparingly. Use only for special cases, using this pattern liberally will undermine its benefit.
Conversion Instructions
- Log out of SternLife, Stern gmail, everywhere including mobile devices.
- Log out of all Stern systems and applications.
- Close all web browsers.
- Shutdown all Stern computers and laptops that you use.