Introduction to web development at UNL

Skill Level: 
Beginner

So, you want to know more about web development at UNL. Perhaps you are a new web developer on campus or are simply interested in how we do things. This guide will help you with some of the fundamentals.

The Essentials

Web development at UNL might be slightly different than web development elsewhere, even other universities. The following are some of the most important fundamentals for you to know.

  • The Web Developer Network (WDN) is a community of web developers at UNL. Collectively we help each other and improve UNL's web presence. Learn more about the WDN
  • All websites at UNL are required to use the UNLedu Web Framework, which is developed by the WDN. Learn more about the framework
  • Web accessibility (a11y) is required. All websites and web applications must be useable by people with disabilities. Learn more about a11y

Web Developer Network

The web developer network is a group of web developers at UNL who work together, share ideas and improve UNL's web presence.

Suggested reading and links:

The UNLedu Web Framework

The UNLedu Web Framework is a package of HTML, CSS and JavaScript that all websites at UNL are required to use. The framework allows for consistent user interactions and branding across all UNL web pages and websites. The framework also provides many essentials such as a grid system for responsive design, content styles such as image styles, and widgets such as notices and events widgets.

Many web developers at UNL use UNLcms to host their websites, which is already configured to use the framework. It is important to note that the framework is built so that it can be used by any content management system or programming language and the use of UNLcms is not required (but UNLcms does make things super easy).

Suggested reading:

Web Accessibility (a11y)

Web a11y, or making content usable by people with disabilities is required by law. The word 'a11y' is the short form of accessibility and it means that there are 11 characters between the first and last letters of the word. Per the WDN's 4.1 Style Book - section 0.1 websites are required to meet both the WCAG 2.0 level AA standard for web accessibility as well as the Section 508 standard. It is important to note that the current legal landscape reflects the requirement of these standards. A11y is already baked into the global regions of the framework. All you need to worry about is what you place in the #maincontent area.

Some common accessibility issues that should be a priority to fix include the following. Please be aware that this is just a subset of what needs to be checked. We have an automated auditing tool called UNL WebAudit which scans your sites for accessibility issues (and other things too), but it can't catch everything.

  • Make sure all media has alternate text. For images this means providing meaningful alt text and captions for video. UNL MediaHub makes it easy to host and order captions for your videos. WebAudit will make sure that media has alternative text defined, but can not verify the quality of the alternate text. For example, it is extremely common to see placeholder alt tags which do nothing to help the visually impaired.
  • Make sure that text has a contrast of 4.5:1 to meet the contrast requirements. WebAudit will automatically test for this.
  • Make sure that interactive content such as links, buttons and form controls have textual names. It is common to see form fields without associated labels and buttons and links that have only an image or font icon but no text. WebAudit will automatically check for these.
  • Assitive technology such as screen readers can not read text in images, so avoid placing text in images. Instead, use CSS to position the text above the image wherever possible, which will make the text available to assitive technology. WebAudit can not check for this.
  • Ensure that your HTML follows correct semantics wherever possible. Use HTML regions, ensure that your document outline is correct (based on heading elements)
  • Manually test your sites by just using a keyboard; make sure that every piece of content and interaction can be accessed by just a keyboard. Also test your sites with a screen reader such as Voice Over.

Learn more about a11y

We can't cover everything about web accessibility, so we have curated some materials to help you learn more:

Contributed By: 
IIM