Accessibility fixes
This commit is contained in:
@@ -95,283 +95,248 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container faq">
|
||||
<nav aria-label="Breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li aria-current="page">Email Setup & Help</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="text-center">Welcome to Email from mifi Ventures</h1>
|
||||
<div class="intro">
|
||||
<strong>Let's get your inbox ready! 📬</strong><br />
|
||||
<p>
|
||||
Friendly help for setting up your email—works with Outlook,
|
||||
Apple Mail, Thunderbird, phones, and more.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
<div class="content">
|
||||
<main id="main-content" class="container faq">
|
||||
<nav aria-label="Breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li aria-current="page">Email Setup & Help</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="text-center">Welcome to Email from mifi Ventures</h1>
|
||||
<div class="intro">
|
||||
<strong>Let's get your inbox ready! 📬</strong><br />
|
||||
<p>
|
||||
Friendly help for setting up your email—works with
|
||||
Outlook, Apple Mail, Thunderbird, phones, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="general-settings"
|
||||
aria-label="General Email Settings"
|
||||
>
|
||||
<h2>General Settings (All Clients)</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Email Address</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password</td>
|
||||
<td>(your email password)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Incoming Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Outgoing Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMAP Port</td>
|
||||
<td>993 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP3 Port</td>
|
||||
<td>995 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SMTP Port</td>
|
||||
<td>587 (STARTTLS) or 465 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Authentication</td>
|
||||
<td>Required (use same as incoming)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Encryption</td>
|
||||
<td>SSL/TLS or STARTTLS</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="tip"
|
||||
>Tip: Always use your <b>full email address</b> as your
|
||||
username!</span
|
||||
<section
|
||||
class="general-settings"
|
||||
aria-label="General Email Settings"
|
||||
>
|
||||
</section>
|
||||
|
||||
<div class="accordion" id="helpAccordion">
|
||||
<!-- Outlook -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Microsoft Outlook
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Go to <b>File → Add Account</b></li>
|
||||
<li>Enter your full email address</li>
|
||||
<li>
|
||||
Choose <b>Advanced options</b> → check “Set up
|
||||
manually”
|
||||
</li>
|
||||
<li>Select <b>IMAP</b> (recommended) or POP</li>
|
||||
<li>
|
||||
Incoming server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>993</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Outgoing server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>587</b> (STARTTLS) or <b>465</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Username: full email address; Password: your
|
||||
password
|
||||
</li>
|
||||
<li>Click <b>Connect</b></li>
|
||||
</ol>
|
||||
<span class="tip"
|
||||
>If sending fails, make sure “Require logon using
|
||||
SPA” is <b>unchecked</b>.</span
|
||||
>
|
||||
</div>
|
||||
<h2>General Settings (All Clients)</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Email Address</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password</td>
|
||||
<td>(your email password)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Incoming Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Outgoing Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMAP Port</td>
|
||||
<td>993 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP3 Port</td>
|
||||
<td>995 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SMTP Port</td>
|
||||
<td>587 (STARTTLS) or 465 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Authentication</td>
|
||||
<td>Required (use same as incoming)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Encryption</td>
|
||||
<td>SSL/TLS or STARTTLS</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="tip"
|
||||
>Tip: Always use your <b>full email address</b> as your
|
||||
username!</span
|
||||
>
|
||||
</section>
|
||||
|
||||
<!-- Apple Mail -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Apple Mail (macOS, iOS)
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>
|
||||
Add Account → <b>Other Mail Account</b>
|
||||
</li>
|
||||
<li>Enter your name, email, and password</li>
|
||||
<li>
|
||||
Incoming/Outgoing server:
|
||||
<code>mail.mifi.holdings</code>
|
||||
</li>
|
||||
<li>
|
||||
IMAP port: <b>993</b> (SSL); SMTP port:
|
||||
<b>587</b> (STARTTLS) or <b>465</b> (SSL)
|
||||
</li>
|
||||
<li>Use full email address for username</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thunderbird -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Thunderbird
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Menu → Account Settings → Add Mail Account</li>
|
||||
<li>Fill in your name, email, and password</li>
|
||||
<li>
|
||||
Click “Configure manually” and use settings
|
||||
above
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> iOS / Android Mail / Gmail
|
||||
App
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>Add Account → Other</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>
|
||||
Manual setup: <code>mail.mifi.holdings</code>,
|
||||
correct ports, SSL/TLS required
|
||||
</li>
|
||||
<li>
|
||||
Gmail app: tap profile → Add account → Other,
|
||||
fill in details, use IMAP
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> FAQ / Troubleshooting
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<div class="faq-q">Q: My email won’t send?</div>
|
||||
<div class="faq-a">
|
||||
Check that you’re using your full email address for
|
||||
both incoming and outgoing username, and that the
|
||||
port is 587 or 465.
|
||||
<div class="accordion" id="helpAccordion">
|
||||
<!-- Outlook -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Microsoft Outlook
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Go to <b>File → Add Account</b></li>
|
||||
<li>Enter your full email address</li>
|
||||
<li>
|
||||
Choose <b>Advanced options</b> → check “Set
|
||||
up manually”
|
||||
</li>
|
||||
<li>Select <b>IMAP</b> (recommended) or POP</li>
|
||||
<li>
|
||||
Incoming server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>993</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Outgoing server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>587</b> (STARTTLS) or
|
||||
<b>465</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Username: full email address; Password: your
|
||||
password
|
||||
</li>
|
||||
<li>Click <b>Connect</b></li>
|
||||
</ol>
|
||||
<span class="tip"
|
||||
>If sending fails, make sure “Require logon
|
||||
using SPA” is <b>unchecked</b>.</span
|
||||
>
|
||||
</div>
|
||||
<div class="faq-q">Q: SSL/TLS errors?</div>
|
||||
<div class="faq-a">
|
||||
Ensure SSL or STARTTLS is enabled for both incoming
|
||||
and outgoing mail.
|
||||
</div>
|
||||
<div class="faq-q">Q: Still stuck?</div>
|
||||
<div class="faq-a">
|
||||
Contact
|
||||
<a href="mailto:postmaster@mifi.holdings"
|
||||
>postmaster@mifi.holdings</a
|
||||
>.<br />
|
||||
Please include any error messages, your mail app,
|
||||
and a screenshot if you can!
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Pro Tips -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Pro Tips & Advanced
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>
|
||||
<b>IMAP syncs</b> your mail everywhere—choose
|
||||
IMAP unless you know you want POP3.
|
||||
</li>
|
||||
<li>
|
||||
Your login is always your
|
||||
<b>full email address</b>.
|
||||
</li>
|
||||
<li>
|
||||
Check your Spam/Junk folder for misfiled good
|
||||
emails.
|
||||
</li>
|
||||
<li>
|
||||
Advanced: IMAP path prefix =
|
||||
<b>(leave blank)</b>; SMTP authentication is
|
||||
always required.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Email from mifi Ventures · Help Page – © 2025
|
||||
mifi Ventures, LLC
|
||||
</div>
|
||||
<!-- Apple Mail -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Apple Mail (macOS, iOS)
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>
|
||||
Add Account → <b>Other Mail Account</b>
|
||||
</li>
|
||||
<li>Enter your name, email, and password</li>
|
||||
<li>
|
||||
Incoming/Outgoing server:
|
||||
<code>mail.mifi.holdings</code>
|
||||
</li>
|
||||
<li>
|
||||
IMAP port: <b>993</b> (SSL); SMTP port:
|
||||
<b>587</b> (STARTTLS) or <b>465</b> (SSL)
|
||||
</li>
|
||||
<li>Use full email address for username</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thunderbird -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Thunderbird
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>
|
||||
Menu → Account Settings → Add Mail Account
|
||||
</li>
|
||||
<li>Fill in your name, email, and password</li>
|
||||
<li>
|
||||
Click “Configure manually” and use settings
|
||||
above
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> iOS / Android Mail /
|
||||
Gmail App
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>Add Account → Other</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>
|
||||
Manual setup:
|
||||
<code>mail.mifi.holdings</code>, correct
|
||||
ports, SSL/TLS required
|
||||
</li>
|
||||
<li>
|
||||
Gmail app: tap profile → Add account →
|
||||
Other, fill in details, use IMAP
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> FAQ / Troubleshooting
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<div class="faq-q">Q: My email won’t send?</div>
|
||||
<div class="faq-a">
|
||||
Check that you’re using your full email address
|
||||
for both incoming and outgoing username, and
|
||||
that the port is 587 or 465.
|
||||
</div>
|
||||
<div class="faq-q">Q: SSL/TLS errors?</div>
|
||||
<div class="faq-a">
|
||||
Ensure SSL or STARTTLS is enabled for both
|
||||
incoming and outgoing mail.
|
||||
</div>
|
||||
<div class="faq-q">Q: Still stuck?</div>
|
||||
<div class="faq-a">
|
||||
Contact
|
||||
<a href="mailto:postmaster@mifi.holdings"
|
||||
>postmaster@mifi.holdings</a
|
||||
>.<br />
|
||||
Please include any error messages, your mail
|
||||
app, and a screenshot if you can!
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pro Tips -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Pro Tips & Advanced
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>
|
||||
<b>IMAP syncs</b> your mail
|
||||
everywhere—choose IMAP unless you know you
|
||||
want POP3.
|
||||
</li>
|
||||
<li>
|
||||
Your login is always your
|
||||
<b>full email address</b>.
|
||||
</li>
|
||||
<li>
|
||||
Check your Spam/Junk folder for misfiled
|
||||
good emails.
|
||||
</li>
|
||||
<li>
|
||||
Advanced: IMAP path prefix =
|
||||
<b>(leave blank)</b>; SMTP authentication is
|
||||
always required.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
// Native accessible accordion
|
||||
document.querySelectorAll('.accordion-trigger').forEach((btn) => {
|
||||
btn.addEventListener('click', function () {
|
||||
const section = btn.closest('.accordion-section')
|
||||
const expanded =
|
||||
btn.getAttribute('aria-expanded') === 'true'
|
||||
document
|
||||
.querySelectorAll('.accordion-section')
|
||||
.forEach((s) => {
|
||||
if (s === section) {
|
||||
s.classList.toggle('open', !expanded)
|
||||
btn.setAttribute(
|
||||
'aria-expanded',
|
||||
String(!expanded)
|
||||
)
|
||||
const content = btn.nextElementSibling
|
||||
content.style.maxHeight = !expanded
|
||||
? content.scrollHeight + 40 + 'px'
|
||||
: '0px'
|
||||
} else {
|
||||
s.classList.remove('open')
|
||||
s.querySelector(
|
||||
'.accordion-trigger'
|
||||
).setAttribute('aria-expanded', 'false')
|
||||
s.querySelector(
|
||||
'.accordion-content'
|
||||
).style.maxHeight = '0px'
|
||||
}
|
||||
})
|
||||
})
|
||||
// Allow arrow navigation
|
||||
btn.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
const triggers = Array.from(
|
||||
document.querySelectorAll('.accordion-trigger')
|
||||
)
|
||||
let idx = triggers.indexOf(e.target)
|
||||
if (e.key === 'ArrowDown')
|
||||
idx = (idx + 1) % triggers.length
|
||||
else idx = (idx - 1 + triggers.length) % triggers.length
|
||||
triggers[idx].focus()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<footer class="footer">
|
||||
Email from mifi Holdings · Help Page · ©
|
||||
2025<span id="current-year"></span>
|
||||
mifi Ventures, LLC
|
||||
</footer>
|
||||
<script defer src="/assets/js/current-year.js"></script>
|
||||
<script defer src="/assets/js/accordion.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user