Disclosing Generative AI Use in Digital Humanities Research

Project Developers

• Rongqian Ma (Indiana University Bloomington) email
• Xuhan Zhang (University of Missouri-Columbia) email
• Adrian S. Wisnicki (University of Nebraska-Lincoln) email

Page Overview

The project developers have designed this site to incorporate a variety of accessibility features. The sections that follow describe each of these features. We welcome additional suggestions for making the site more accessible.

Semantic HTML & Structure

• lang="en" attribute on all pages
• Semantic landmarks: <main>, <nav>, <footer>, <section>, <figure>, <figcaption>
• Proper heading hierarchy (h1–h4) with unique IDs
• <section aria-labelledby="..."> linking sections to their headings
• <ul role="list"> for explicit list semantics
• Semantic table markup with <thead>, <tbody>, <th scope="col">

ARIA Attributes

• aria-label on all external links, email links, chart containers, and interactive buttons
• aria-expanded on hamburger menu button, toggled dynamically via JS
• role="img" with descriptive aria-label on Plotly chart containers
• aria-labelledby connecting <main> and <section> elements to their headings

Screen Reader Support

• .sr-only utility class (1px clip, off-screen positioning)
• Screen-reader-only data tables for every interactive chart
• Table <caption> elements describing chart data

Skip Link

• "Skip to main content" link, hidden off-screen until focused

Keyboard & Focus

• Global *:focus outline (2px solid white, 2px offset)
• Custom focus styles on hamburger button, close button, select dropdowns, figure links
• Skip link visible on focus with z-index 1000
• scroll-padding-top: 6.5rem to account for fixed nav on anchor jumps

Color & Contrast

• WCAG AAA contrast ratios (7:1+) across all text/background combinations
• Custom ::selection colors for readable text highlighting

Responsive Design

• Viewport meta tag with width=device-width, initial-scale=1.0
• Nine CSS media query breakpoints (400px–1200px)
• Responsive font sizes in rem units scaling across breakpoints
• Body line-height 1.8 for readability
• Responsive padding adjustments per viewport

Responsive Images

• srcset with nine width variants (320w–2732w) and sizes attribute
• loading="lazy" and decoding="async" on below-fold images
• Descriptive alt text on all images

Touch Device Accessibility

• window.matchMedia('(any-hover: hover)') detection for hover capability
• Tap-to-toggle info panels replacing tooltips on touch-only devices
• hovermode: false on Plotly charts for touch devices
• Adequate touch target sizing on mobile nav items

Form Accessibility

• <label for="..."> associated with filter <select> controls
• Focus border color change on select inputs

External Link Security

• rel="noopener noreferrer" on all target="_blank" links
• referrerpolicy="no-referrer" on external resources

Structured Data / Schema.org

• JSON-LD ScholarlyArticle schema with accessibility properties:
  • accessMode: ["textual", "visual"]
  • accessModeSufficient: ["textual"]
  • accessibilityFeature: ["structuralNavigation", "readingOrder", "alternativeText", "tableOfContents"]
  • accessibilityHazard: "none"

Performance & Resource Loading

• <link rel="preload"> for stylesheet, <link rel="preconnect"> for font/CDN origins
• SRI hashes (integrity attribute) on external CSS/JS
• crossorigin="anonymous" on third-party resources
• display=swap on Google Fonts for flash-of-unstyled-text prevention

Typography

• Noto Serif for headings, Source Sans Pro for body (both with system fallbacks)
• box-sizing: border-box globally applied
• -webkit-text-size-adjust: 100% preventing mobile text inflation

Navigation

• Mobile hamburger menu with aria-label, overlay dismiss, and close button
• Table of contents ("Contents" box) for in-page section navigation
• Plotly mode bar hidden (displayModeBar: false) to reduce UI clutter