Across K-12 educational portfolios, we are seeing considerable requirement for timeline feature. With a holistic business approach digital environment demanded standardized solution that can be scaled across all programs such Social Studies, Science, Math.
Enriching Digital Learning Assets
6-12 Social Study sector was the first portfolio to request digital timeline build. At first it was a simple one level concept with responsive behavior that provided user with consistent visual experience across Print and Digital complements. Video below shows responsive behavior.
Demonstration of Development
With pedagogical progress of Middle School World component, editorial needed more complex two level timeline comparing World events to other locations such as: Ancient Greece or The Americas.
Templatized “drag and drop” solution within Habitat environment was the best method to provide scalable solution that allows non-coding designers to customize this element. HTML custom patterns allow to author any timeline with easy functionality of “drag and drop” patterns. Take a look at the example of custom build in the following video:
Accessibility in Mind
By making web content accessible, I am ensuring that all of the potential users, including people with disabilities, have a decent user experience and are able to easily access the information to gain the best learning experience.
Timeline element is wrapped in an article tag instead of div. The article tag is one of the semantic elements introduced with HTML5. According to the HTML5 specification : The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. It is not supported by all screen readers yet but it does have semantic value.
To support students with tunnel vision that may miss some or all of the content due to the passibility of large white space first encountered on the left side of the screen in certain builds. The timeline is wrapped in a color container, so tunnel vision users know there is more.
To comply with WCAG 2.0 Contrast and Color Requirements all text and background meets the necessary ratio for color blind or low vision users to be able to have a user experience that does not effects their learnings.
abbr title="circa" - The aabr HTML element is used to represent an abbreviation of the c. which stands for circa, it's a standard in Social Studies curriculum. This html tag help screen reader users to have a shared understanding on the abbreviation.
Reflowable design provides same pedagogical content flow regardless of the device and orientation being used.
Each major element within the timeline feature is contained within a header to sustain logical semantics and to provide screen reader users with the ability to navigate within the timeline. Adding h tags allows students to jump navigate using headers instead of being forced to read it in a linear way.
“A child without education is like a bird without wings.” —Tibetan Proverb