Pattern Library

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">&copy <script>document.write(new Date().getFullYear())</script> Leonard N. Stern School of Business&nbsp; | <a href="https://www.nyu.edu/footer/accessibility.html"> &nbsp; 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

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:

Best Practices

Unordered Lists
  • Item
  • Item
  • Item
  • Item
Ordered Lists
  1. Item 1
  2. Item 2
  3. Item 3
  4. 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

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

Protected Files

Create and submit secure files encrypted for privacy and extra security. You can also view your files via our secure network.

CFE Evaluations

View your current and past CFE evaluations submitted by your peers.

New Courses

Need help? We built this course to solve your problems. Automate testing your code by creating your own custom testing framework!.

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

Conversion Instructions

  1. Log out of SternLife, Stern gmail, everywhere including mobile devices.
  2. Log out of all Stern systems and applications.
  3. Close all web browsers.
  4. Shutdown all Stern computers and laptops that you use.