Accessible Footnote Proof of Concept: Mobile Footnote References (Only Test with Mobile Device)
Introduction
The purpose of this page is to enhance the one-to-one and many-to-one accessible footnote soltuions by providing a modal dialog that contains the footnote information for mobile platforms (phone or tablet). This modal overlay has the advantage of not causing the viewport to scroll all the way down a potentially very long page and then back up. This example is a Proof of Concept and is NOT approved for use at State Farm at this time.
Accessibility Features:
- Programmatic connection between the footnote reference and the footnote: The programmatic connection present in the desktop view is unchanged. However, in a mobile view, a modal overlay is added to display the footnote content instead of moving the focus down to the bottom of the page and then back up. When the modal is closed, focus returns to the footnote reference in the content.
- Screen reader context: CSS is used to add additional content to each link for screen reader users. The footnote reference link is prepended with the word "Footnote". The footnote number link is prepended with the phrase "Return to reference".
Concept insprired by Wikipedia with accessibility added.
Accessible Footnote Demonstration
In 2012, The Walt Disney Company[6] acquired Lucasfilm for $4.06 billion and announced three new Star Wars films; the first film of that trilogy, Star Wars: The Force Awakens, was released on December 18, 2015.[5] 20th Century Fox retains the physical distribution rights to the first two Star Wars trilogies, owning permanent rights for the original 1977 film[6] and holding the rights to Episodes I–III, V and VI until May 2020.[5] The Walt Disney Studios[6] owns digital distribution rights to all the Star Wars films, excluding A New Hope.[5]
Gosh darn really really long disclaimer.[7]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur enim vitae erat gravida commodo. Aliquam in mollis urna. Fusce at mauris nec sem tempor tristique. Maecenas interdum volutpat dui eget feugiat. Nullam egestas finibus tellus, nec convallis magna aliquam vitae. Morbi sollicitudin non tortor at ornare. Phasellus velit ex, suscipit id pellentesque sit amet, dictum at augue. Vivamus eu magna iaculis leo scelerisque suscipit. Morbi convallis tincidunt feugiat. Donec at leo porta, placerat lectus et, condimentum ipsum. Proin a blandit tortor, eu vehicula elit. In mollis ullamcorper neque, in varius est ullamcorper nec. Nam neque risus, tristique a tellus vel, laoreet mattis massa. Aliquam eleifend ipsum erat, sed sodales lectus luctus et.
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur enim vitae erat gravida commodo. Aliquam in mollis urna. Fusce at mauris nec sem tempor tristique. Maecenas interdum volutpat dui eget feugiat. Nullam egestas finibus tellus, nec convallis magna aliquam vitae. Morbi sollicitudin non tortor at ornare. Phasellus velit ex, suscipit id pellentesque sit amet, dictum at augue. Vivamus eu magna iaculis leo scelerisque suscipit. Morbi convallis tincidunt feugiat. Donec at leo porta, placerat lectus et, condimentum ipsum. Proin a blandit tortor, eu vehicula elit. In mollis ullamcorper neque, in varius est ullamcorper nec. Nam neque risus, tristique a tellus vel, laoreet mattis massa. Aliquam eleifend ipsum erat, sed sodales lectus luctus et.
Nulla consectetur enim vitae erat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur enim vitae erat gravida commodo. Aliquam in mollis urna. Fusce at mauris nec sem tempor tristique. Maecenas interdum volutpat dui eget feugiat. Nullam egestas finibus tellus, nec convallis magna aliquam vitae. Morbi sollicitudin non tortor at ornare. Phasellus velit ex, suscipit id pellentesque sit amet, dictum at augue. Vivamus eu magna iaculis leo scelerisque suscipit. Morbi convallis tincidunt feugiat. Donec at leo porta, placerat lectus et, condimentum ipsum. Proin a blandit tortor, eu vehicula elit. In mollis ullamcorper neque, in varius est ullamcorper nec. Nam neque risus, tristique a tellus vel, laoreet mattis massa. Aliquam eleifend ipsum erat, sed sodales lectus luctus et.
Aliquam in mollis urna
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur enim vitae erat gravida commodo. Aliquam in mollis urna. Fusce at mauris nec sem tempor tristique. Maecenas interdum volutpat dui eget feugiat. Nullam egestas finibus tellus, nec convallis magna aliquam vitae. Morbi sollicitudin non tortor at ornare. Phasellus velit ex, suscipit id pellentesque sit amet, dictum at augue. Vivamus eu magna iaculis leo scelerisque suscipit. Morbi convallis tincidunt feugiat. Donec at leo porta, placerat lectus et, condimentum ipsum. Proin a blandit tortor, eu vehicula elit. In mollis ullamcorper neque, in varius est ullamcorper nec. Nam neque risus, tristique a tellus vel, laoreet mattis massa. Aliquam eleifend ipsum erat, sed sodales lectus luctus et.
Fusce at mauris nec sem tempor tristique
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur enim vitae erat gravida commodo. Aliquam in mollis urna. Fusce at mauris nec sem tempor tristique. Maecenas interdum volutpat dui eget feugiat. Nullam egestas finibus tellus, nec convallis magna aliquam vitae. Morbi sollicitudin non tortor at ornare. Phasellus velit ex, suscipit id pellentesque sit amet, dictum at augue. Vivamus eu magna iaculis leo scelerisque suscipit. Morbi convallis tincidunt feugiat. Donec at leo porta, placerat lectus et, condimentum ipsum. Proin a blandit tortor, eu vehicula elit. In mollis ullamcorper neque, in varius est ullamcorper nec. Nam neque risus, tristique a tellus vel, laoreet mattis massa. Aliquam eleifend ipsum erat, sed sodales lectus luctus et.
References
-
Return to reference [5] Schou, Solvej (December 21, 2012). "Mickey meets 'Star Wars': Walt Disney Co. completes acquisition of Lucasfilm". Entertainment Weekly. Retrieved December 22, 2012.
-
Return to reference [6] Masters, Kim (October 30, 2012). "Tangled Rights Could Tie Up Ultimate 'Star Wars' Box Set (Analysis)". The Hollywood Reporter. Retrieved November 12, 2012.
-
Return to reference [7] The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. The appearance of external links on this World Wide Web site does not constitute endorsement by the Department of Commerce/National Oceanic and Atmospheric Administration of external Web sites or the information, products or services contained therein. For other than authorized activities, the Department of Commerce/NOAA does not exercise any editorial control over the information you may find at these locations. These links are provided consistent with the stated purpose of this Department of Commerce/NOAA Web site. Test end.
Sample Page Footer Content
Navigation links
Soical icons
Copyright info