Skip to content

Fix WCAG 2 AA a11y issues on the homepage #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
etagwerker wants to merge 1 commit into
base: ci/add-build-workflow
Choose a base branch
from
Draft

Fix WCAG 2 AA a11y issues on the homepage #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 28 additions & 26 deletions source/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,32 @@ title: "Philly.rb | The One and Only Philadelphia Ruby User Group"
---

<section class="hero">
<img class="hero-photo" src="images/philly-header.jpg" alt="" aria-hidden="true">
<div class="hero-scrim" aria-hidden="true"></div>
<div class="wrapper">
<h1>Philly.rb is the one and only user group in Philadelphia dedicated to helping Ruby enthusiasts learn, network, and socialize.</h1>
<hr>
<h1>Check us out on <a href="https://www.meetup.com/phillyrb" target="_blank">Meetup</a> to join our next event</h1>
<h2>Check us out on <a href="https://www.meetup.com/phillyrb" target="_blank" rel="noopener noreferrer">Meetup</a> to join our next event</h2>
</div>
</section>

<div class="wrapper">
<section class="next-event">
<section class="next-event" aria-label="Next event">
<article class="next-event-information"></article>
<div id="map" class="next-event-map"></div>
<div id="map" class="next-event-map" aria-hidden="true"></div>
</section>

<ul class="about-phillyrb">
<li class="network">
<h1>Network</h1>
<h2>Network</h2>
<p>Gain access to a growing community of Ruby programmers and enthusiasts. </p>
</li>
<li class="learn">
<h1>Learn</h1>
<h2>Learn</h2>
<p>Our monthly presentations are great for gaining in-depth knowledge on current Ruby and Rails topics. </p>
</li>
<li class="socialize">
<h1>Socialize</h1>
<h2>Socialize</h2>
<p>Between pub nights and our lunches, we have plenty of chances to get together and shoot the shit.</p>
</li>
</ul>
Expand All @@ -35,48 +37,48 @@ title: "Philly.rb | The One and Only Philadelphia Ruby User Group"

<ul class="connect-with">
<li>
<h1>#phillyrb on PhillyDev Slack</h1>
<p>Chat with some of our community members on our PhillyDev Slack channel. <a href="http://phillydev.org/">Join PhillyDev Slack</a></p>
<h2>#phillyrb on PhillyDev Slack</h2>
<p>Chat with some of our community members on our PhillyDev Slack channel. <a target="_blank" rel="noopener noreferrer" href="http://phillydev.org/">Join PhillyDev Slack</a></p>
</li>
<li>
<h1>@phillyrb</h1>
<p>All community updates and new events are promoted from our twitter account. <a href="http://twitter.com/phillyrb">Follow @phillyrb</a></p>
<h2>@phillyrb</h2>
<p>All community updates and new events are promoted from our twitter account. <a target="_blank" rel="noopener noreferrer" href="http://twitter.com/phillyrb">Follow @phillyrb</a></p>
</li>
<li>
<h1>Meetup</h1>
<p>We announce all meetups over here: <a href="https://www.meetup.com/phillyrb/">Join Philly.rb on Meetup</a></p>
<h2>Meetup</h2>
<p>We announce all meetups over here: <a target="_blank" rel="noopener noreferrer" href="https://www.meetup.com/phillyrb/">Join Philly.rb on Meetup</a></p>
</li>
</ul>

<hr />

<section class="sponsors">
<h1>Please thank our sponsors. Without them this all wouldn&rsquo;t be possible.</h1>
<section class="sponsors" aria-label="Sponsors">
<h2>Please thank our sponsors. Without them this all wouldn&rsquo;t be possible.</h2>
<ul>
<li class="sponsor ombulabs"><a href="https://www.ombulabs.ai">OmbuLabs.ai</a></li>
<li class="sponsor code"><a href="https://podcast.drbragg.dev">Code and the Coding Coders who Code It Podcast</a></li>
<li class="sponsor ombulabs"><a target="_blank" rel="noopener noreferrer" href="https://www.ombulabs.ai">OmbuLabs.ai</a></li>
<li class="sponsor code"><a target="_blank" rel="noopener noreferrer" href="https://podcast.drbragg.dev">Code and the Coding Coders who Code It Podcast</a></li>
<li class="contact"><p>Looking to become a sponsor or host? <a href="mailto:ernesto@ombulabs.com">Contact us</a></p></li>
</ul>
</section>

<hr />

<section class="badges">
<h1>Throw one of these badges up on your site and show your membership with pride.</h1>
<section class="badges" aria-label="Membership badges">
<h2>Throw one of these badges up on your site and show your membership with pride.</h2>
<ul>
<li><img src="/images/member-badge-full-color.png" alt="" /></li>
<li><img src="/images/member-badge-red.png" alt="" /></li>
<li><img src="/images/ruby-bell-full-color.png" alt="" /></li>
<li><img src="/images/ruby-bell-red.png" alt="" /></li>
<li><img src="/images/member-badge-full-color.png" alt="Philly.rb member badge, full color" /></li>
<li><img src="/images/member-badge-red.png" alt="Philly.rb member badge, red" /></li>
<li><img src="/images/ruby-bell-full-color.png" alt="Philly.rb ruby bell, full color" /></li>
<li><img src="/images/ruby-bell-red.png" alt="Philly.rb ruby bell, red" /></li>
</ul>
</section>
</div>

<script type="text/html" id="event-tmpl">
<header>
<h1>Our Next Event</h1>
<h2>{{ event.name }}</h2>
<h3><time>{{ event.time }}</time></h3>
<h2>Our Next Event</h2>
<h3>{{ event.name }}</h3>
<h4><time>{{ event.time }}</time></h4>
</header>
<h4><a href="{{ event.mapUrl }}">{{ event.venueName }}</a></h4>
<p class="address">{{ event.address }}</p>
Expand All @@ -88,7 +90,7 @@ title: "Philly.rb | The One and Only Philadelphia Ruby User Group"

<script type="text/html" id="event-map-tmpl">
<header>
<h1>{{ event.venueName }}</h1>
<h2>{{ event.venueName }}</h2>
</header>
<p class="address">{{ event.address }}</p>
</script>
Expand Down
12 changes: 8 additions & 4 deletions source/layouts/_footer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<footer class="main">
<p>Organized by <a href="https://bsky.app/profile/etagwerker.bsky.social">@etagwerker</a> and <a href="https://bsky.app/profile/drbragg.dev">@drbragg</a> </p>
<p>Site and logo design by <a href="http://twitter.com/thoughtbot">@thoughtbot</a></p>
<h1>Philly.rb</h1>
<footer class="main" aria-label="Site footer">
<img class="footer-photo" src="/images/philly-skyline.jpg" alt="" aria-hidden="true">
<div class="footer-scrim" aria-hidden="true"></div>
<div class="footer-content">
<p>Organized by <a target="_blank" rel="noopener noreferrer" href="https://bsky.app/profile/etagwerker.bsky.social">@etagwerker</a> and <a target="_blank" rel="noopener noreferrer" href="https://bsky.app/profile/drbragg.dev">@drbragg</a> </p>
<p>Site and logo design by <a target="_blank" rel="noopener noreferrer" href="http://twitter.com/thoughtbot">@thoughtbot</a></p>
<p class="wordmark" aria-hidden="true">Philly.rb</p>
</div>
</footer>

20 changes: 10 additions & 10 deletions source/layouts/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<header class="main">
<nav>
<h1 class="logo">
<a href="/">Philly.rb</a>
</h1>
<nav aria-label="Primary">
<div class="logo">
<a href="/" aria-label="Philly.rb home">Philly.rb</a>
</div>

<ul class="social-links">
<li><a target="_blank" href="https://bsky.app/profile/phillyrb.org">Bluesky</a></li>
<li><a target="_blank" href="http://twitter.com/phillyrb">Twitter</a></li>
<ul class="social-links" aria-label="Social">
<li><a target="_blank" rel="noopener noreferrer" href="https://bsky.app/profile/phillyrb.org">Bluesky</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/phillyrb">Twitter</a></li>
</ul>

<ul class="engagement">
<li><a target="_blank" href="https://ombulabs.typeform.com/to/xYAdO8" target="_blank">Submit talk</a></li>
<li><a target="_blank" href="http://www.meetup.com/Phillyrb/">Upcoming Events</a></li>
<ul class="engagement" aria-label="Get involved">
<li><a target="_blank" rel="noopener noreferrer" href="https://ombulabs.typeform.com/to/xYAdO8">Submit talk</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="http://www.meetup.com/Phillyrb/">Upcoming Events</a></li>
</ul>
</nav>
</header>
Expand Down
8 changes: 5 additions & 3 deletions source/layouts/layout.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
Expand All @@ -22,11 +22,13 @@

<body class="<%= page_classes %>">

<a class="skip-link" href="#main-content">Skip to main content</a>

<%= partial "layouts/header" %>

<section class="main">
<main id="main-content" class="main" tabindex="-1">
<%= yield %>
</section>
</main>

<%= partial "layouts/footer" %>

Expand Down
67 changes: 66 additions & 1 deletion source/stylesheets/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,77 @@ a {
color: $hover-link-color;
}

&:active, &:focus {
&:active, &:focus-visible {
color: $hover-link-color;
outline: 2px solid $base-accent-color;
outline-offset: 3px;
border-radius: 1px;
}

&:focus {
outline: none;
}
}

// Inline links inside body paragraphs need a non-color distinguisher.
// Axe rule "link-in-text-block" flagged the unstyled inline links.
p a,
li > p a,
h1 a,
h2 a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;

&:hover {
text-decoration-thickness: 2px;
}
}

// Respect prefers-reduced-motion: disable animations + transitions for users
// who request reduced motion, AND enable automated a11y testers to bypass
// timing-sensitive animations that otherwise interfere with contrast detection.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}

// Skip-to-main link — hidden off-screen until keyboard-focused.
.skip-link {
position: absolute;
top: 0;
left: 0;
background: $base-accent-color;
color: #fff;
padding: 0.75rem 1.25rem;
font-family: $header-font-family;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transform: translateY(-150%);
transition: transform 0.18s ease-out;
z-index: 1000;

&:focus,
&:focus-visible {
transform: translateY(0);
color: #fff;
outline: 2px solid #fff;
outline-offset: -4px;
}
}

// Main landmark accepts focus from the skip-link; never show its own ring.
main#main-content:focus {
outline: none;
}

hr {
border-bottom: 1px solid $base-border-color;
border-left: none;
Expand Down
9 changes: 6 additions & 3 deletions source/stylesheets/base/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@ $base-border-radius: em(5);

$red: #dc4036;
$blue: #1f5b98;
$dark-gray: #787878;
$medium-gray: #999;
$light-gray: #bcbcbc;
// Darkened for WCAG AA contrast on white bg.
// $dark-gray was #787878 (~4.45:1, just below 4.5) → #5e5e5e (~6.55:1)
// $light-gray was #bcbcbc (~1.9:1, large fail) → #6b6b6b (~5.17:1)
$dark-gray: #5e5e5e;
$medium-gray: #808080;
$light-gray: #6b6b6b;
$light-red: #FBE3E4;
$light-yellow: #FFF6BF;
$light-green: #E6EFC2;
Expand Down
2 changes: 1 addition & 1 deletion source/stylesheets/index/_badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
padding-left: 2em;
padding-right: 2em;

h1 {
h2 {
margin-bottom: 1em;
text-align: center;
}
Expand Down
2 changes: 1 addition & 1 deletion source/stylesheets/index/_extends.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
margin-bottom: 0;
};

h1 {
h2 {
text-align: center;

@include media(min-width $small-screen max-width $medium-screen) {
Expand Down
51 changes: 48 additions & 3 deletions source/stylesheets/index/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,37 @@
.hero {
background: image-url('philly-header.jpg') no-repeat 80%;
background-size: cover;
// The photo is rendered as an <img> element so axe-core does not pick it up
// when computing background contrast for the text content. A separate
// solid-color .hero-scrim div darkens the photo without using a CSS gradient
// (which axe also treats as ambiguous bg).
position: relative;
background-color: #141414;
padding: 4em 2em;
text-align: center;
overflow: hidden;

.hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% center;
z-index: 0;
pointer-events: none;
}

.hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(20, 20, 20, 0.6);
pointer-events: none;
}

.wrapper {
position: relative;
z-index: 2;
}

@include media($medium-screen) {
padding: 8em 2em;
Expand All @@ -17,7 +46,8 @@
@extend %fade-in;
animation-delay: .4s;
@include outer-container;
color: rgba(#fff, .9);
// Solid white instead of rgba(...0.9) so axe doesn't have to alpha-blend.
color: #fff;
letter-spacing: -1px;
line-height: 1.1em;

Expand All @@ -26,4 +56,19 @@
max-width: em(1000, 36);
};
}

h2 {
color: #fff;

a {
// Link inside the dark hero needs an explicit light color, else inherits
// the global $blue link color which fails contrast on the dark scrim.
color: #fff;
text-decoration: underline;

&:hover {
color: rgba(#fff, 0.85);
}
}
}
}
2 changes: 1 addition & 1 deletion source/stylesheets/index/_news.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@include row;
@extend %section-vertical-padding;

h1 {
h2 {
@extend %section-header;
}
}
Expand Down
Loading