Our Approach to Accessibility
All of Elore's online resources have been designed and constructed with accessibility as a foundational value, not an afterthought. We are dedicated to a goal of meeting the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA — the internationally recognized standard for online accessibility. To meet this aim we actively work to ensure that our site is perceivable, operable, understandable, and robust for as broad a base of users as possible.
Semantic HTML Structure
Every page is built using proper, meaningful HTML. We use the correct elements for the correct purposes:
<header> for the page header, <nav> for navigation, <main>
for primary content, <article> for self-contained editorial content, <aside>
for complementary content, <section> for grouped content areas, and <footer>
for the page footer. This semantic structure allows screen readers and assistive technologies to present the page
accurately and navigate it efficiently.
Headings follow a strict hierarchy: one <h1> per page, followed by <h2>
for major sections and <h3> for subsections. This hierarchy is never skipped, ensuring a logical
reading order that assistive technologies can convey meaningfully.
ARIA Landmarks and Labels
We use ARIA (Accessible Rich Internet Applications) attributes throughout the site to supplement HTML semantics
where needed. Every major region of the page is identified with an aria-label or linked to a visible
heading via aria-labelledby. Navigation elements carry descriptive aria-label attributes
to distinguish them from one another (for example, "Primary navigation" and "Legal navigation" in the footer).
Interactive elements such as the mobile menu button use aria-expanded to communicate their current state.
Decorative elements — ornamental symbols, separator graphics, and purely visual icons — are hidden from assistive
technologies using aria-hidden="true", preventing screen readers from announcing meaningless characters.
Keyboard Navigation
The entire site is navigable by keyboard alone. All interactive elements — links, buttons, form fields, and
dropdown menus — are reachable and operable using the Tab, Enter, Space, and arrow keys. Our dropdown navigation menus
open on both hover and keyboard focus-within, ensuring that keyboard users can access all navigation options. We never
remove default focus outlines; instead, we enhance them with a clearly visible gold ring (outline: 2px solid
#c9a33c) that meets WCAG contrast requirements.
Contact Modals and Focus Management
Our contact form modals implement proper focus management. When a modal opens, focus moves to the first
interactive element inside it. When a modal closes, the page background scroll is restored. The Escape key closes
any open modal. Modals carry role="dialog", aria-modal="true", and are linked to their
title via aria-labelledby, giving screen reader users immediate context.
Images and Alternative Text
Every content image carries a meaningful alt attribute that describes what the image depicts and
why it is relevant. Images that are purely decorative — used only for visual composition — carry an empty
alt="" attribute, which instructs screen readers to skip them without announcement. We avoid the use
of text embedded in images for essential content. All <figure> elements that need visible
captions use <figcaption>.
Hero and other large display images employ the <picture> element with <source>
tags to serve appropriately sized images at different viewport widths, reducing load times on mobile devices and
improving the experience for users on slower connections.
Color and Contrast
We maintain high contrast ratios throughout the site. Primary body text (ivory on near-black) exceeds the WCAG AA requirement of 4.5:1 for normal text. Our gold accent color on dark backgrounds meets or exceeds the 3:1 contrast threshold for large text and interactive elements. We do not rely on color alone to convey information — interactive states (hover, focus, active) also include structural changes such as border additions or underlining.
Responsive Design and Zoom
The Elore sites are fully responsive, adapting fluidly to screens of all sizes — from large desktop monitors to
tablets and mobile phones. Layouts are built with CSS Grid and relative units (rem, clamp(),
percentages) rather than fixed pixel values, which means that pages scale gracefully when users increase their
browser's text size or zoom level. The site remains fully functional at 200% zoom without horizontal scrolling or
content overlap.
Form Accessibility
All form fields carry explicit <label> elements linked to their inputs via matching
for and id attributes. Required fields are marked with the required
attribute, which browsers and screen readers announce appropriately. Status messages (success and error) use
aria-live="polite" so that screen reader users are notified of updates without losing their place
in the form.
Reporting Accessibility Issues
We are committed to ongoing improvement. If you encounter any accessibility barrier on our site, please tell us about it. Contact us with a description of the issue and the page where you encountered it. We will investigate and respond as quickly as possible.
an environment the self-motivated learner finds it challenging to focus and thrive. Cultural history and traditional
lore provide a vital antidote to the flood of ephemeral media and synthetic content. The narratives, customs, beliefs,
and artistic expressions of past civilizations and diverse communities, provide independent learners a wealth of
knowledge and wisdom distilled from actual human experience.