Jri’s a11y review
jri.rf.gd
CRUCIAL: alt
attribute mismatch
The alt
attribute on <img>
helps screen reader users know what the image is about. This doesn’t mean that saying “this is an image” is useful.
Moreover, when texts was present in an image, the alt
attribute should contain these texts.
In: <img src="infin_admi.png" alt="Button Image" style="cursor: pointer" width="40%" height="100%">
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <a href="#help" class="button-link">Need some help?</a>
In: <a href="https://jmail.rf.gd" class="button-link">Visit JriMail</a>
In: <a href="https://freesearch.rf.gd" class="button-link">Visit FreeSearch</a>
And other 4 occurrences
In: <footer>...</footer>
CRUCIAL: :hover
only
It’s important to keep in mind that :hover
is for mouses only, and one should also use :focus
to ensure that keyboard users are not left behind.
In: <a href="#help" class="button-link">Need some help?</a>
In: <a href="https://jmail.rf.gd" class="button-link">Visit JriMail</a>
In: <a href="https://freesearch.rf.gd" class="button-link">Visit FreeSearch</a>
And other 4 occurrences
WARNING: No skip links present
Skip links helps keyboard users go to the main content directly without having to tab through other areas namely the navigation menus.
1 occurrence
RECOMMENDED: Missing aria-label
on multiple <section>
s
When multiple HTML5 anchors was on the page, it’s recommended to have them identified with aria-label
or aria-labelledby
.
Note: It’s not strictly required in this case as the <section>
s are already identified with the <h2>
s inside them.
In: <section class="hero">...</section>
In: <section id="jmail" class="section">...</section>
In: <section id="freesearch" class="section">...</section>
And other 5 occurrences
help.jri.rf.gd
CRUCIAL: Mismatched <label>
s
<label>
s must connect with the input fields explicitly.
One can use the for
attribute on <label>
, aria-label
or aria-labelledby
attribute on <input>
and alikes, or simply put the input fields inside a <label>
.
In: <input type="text" name="title" required>
In: <textarea name="content" rows="5" required></textarea>
CRUCIAL: :hover
only
It’s important to keep in mind that :hover
is for mouses only, and one should also use :focus
to ensure that keyboard users are not left behind.
In: <a href="index.php" class="button">Refresh Forums</a>
In: <a href="https://jmail.rf.gd/web_interface" class="button">Return to JriMail</a>
WARNING: Missing placeholder
Input fields should have a placeholder
attribute to compliment them. It’s not strictly required if a label is present, so one should look at the labels first.
In: <input type="text" name="title" required>
In: <textarea name="content" rows="5" required></textarea>
RECOMMENDED: <a>
as buttons
While <a>
elements can be focused by keyboards by default, it’s best that buttons should just be <button>
s and not anything else.
In: <a href="index.php" class="button">Refresh Forums</a>
In: <a href="https://jmail.rf.gd/web_interface" class="button">Return to JriMail</a>
freesearch.rf.gd
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <button type="submit" class="search-button">Search</button>
In: <div class="result-owner">...</div>
CRUCIAL: Label not present
Lables helps screenreader users know about what an input field is about, which should always be present.
In: <select id="sort-by" class="sort-dropdown">...</select>
jmail.rf.gd
Public facing page
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <h1>Welcome to JriMail</h1>
In: <a href="https://jmail.rf.gd/tos.html" class="redbtn">Terms of Service</a>
In: <a href="https://jmail.rf.gd/login" class="btn">Login</a>
In: <a href="https://jmail.rf.gd/register" class="btn">Register</a>
CRUCIAL: alt
attribute mismatch
The alt
attribute on <img>
helps screen reader users know what the image is about. This doesn’t mean that saying “this is an image” is useful.
Moreover, when texts was present in an image, the alt
attribute should contain these texts.
In: <img src="logo.png" alt="JMail Logo" class="logo">
In: <img src="infin_admi.png" alt="Button Image" style="cursor: pointer" width="40%" height="100%">
Login page
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <h1>Login to JriMail</h1>
Web interface (Light)
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <button onclick="..." class="...">Refresh</button>
In: <button type="submit" name="send" class="...">Send Message</button>
CRUCIAL: :hover
only
It’s important to keep in mind that :hover
is for mouses only, and one should also use :focus
to ensure that keyboard users are not left behind.
In: <button onclick="..." class="...">Toggle Theme</button>
In: <a href="..." class="...">Need Help?</a>
In: <button type="submit" name="logout" class="logout-button">Logout</button>
And other 3 occurrences
In: <button onclick="..." class="...">Reply</button>
In: <button type="submit" name="delete" class="...">Delete</button>
RECOMMENDED: <a>
as buttons
While <a>
elements can be focused by keyboards by default, it’s best that buttons should just be <button>
s and not anything else.
In: <a href="..." class="...">Need Help?</a>
Web interface (Dark)
Since dark mode is mostly about the colors, we’ll focus on only issues that involves colors here.
CRUCIAL: Insufficient contrast
Having enough contrast against the background ensures that sighted users can properly recognize the texts.
Large texts should have a contrast level of at least 3.0 and small text should have 4.5.
In: <div class="...">*Date*</div>
In: <button onclick="..." class="...">Reply</button>
In: <button type="submit" name="delete" class="...">Delete</button>
Disclaimer: This is a very basic review. You may want to consult an expert for more accurate advices.