Skip to content

DRAFT: Accessibility fixes #384

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

Open
nichgray wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

DRAFT: Accessibility fixes #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a1ba374
add lang attr to html
nichgray Apr 8, 2026
0bed0ae
add sr-only-clip and back-to-top classes
nichgray Apr 8, 2026
bbddc7e
shift divs to landmarks, add aria-labels and alt text
nichgray Apr 8, 2026
1da8995
shift location of closing body wrapper div tag to fix footer
nichgray Apr 8, 2026
0c99732
remove text-decoration from home_links class
nichgray Apr 8, 2026
569d6c2
adjust nav landmark to match orchid updates
nichgray Apr 8, 2026
6425c55
add aria-current attr to nav
nichgray Apr 8, 2026
420c04c
adjust logo links
nichgray Apr 8, 2026
2dfe4be
remove redundant sr-only text
nichgray Apr 9, 2026
fb9b499
add aria-label to manifestSelect
nichgray Apr 9, 2026
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
75 changes: 75 additions & 0 deletions app/assets/stylesheets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,3 +730,78 @@ textarea {
font-weight: normal;
line-height: 16px;
}

// a11y changes

.back-to-top a {
background: #fff;
text-decoration: none;
font-weight: 500;
border: solid 1px $gray-light;
bottom: 0;
box-shadow: 0px 0px 5px 3px rgba($gray-dark,0.3);
padding: .5rem 2rem 0.5rem 1.25rem; // .1em 1em .3em 1em;
position: fixed;
right: 2%;
z-index: 1000;

&:hover {
color: #000;
background-color: $gray-light;
}

&:after {
content: "\2191";
position: relative;
top: -1px;
left: 6px;
}
}

// sr-only with clip instead of position: absolute
.sr-only-clip {
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); /* other legacy browsers */
clip-path: inset(50%); /* modern browsers */
border: 0;
display: inline-block;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
width: 1px;
}

// clip-path only, no display style
.sr-only-clip-path {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

a {
text-decoration: underline;
}

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

a.btn,
a.btn:hover {
text-decoration: none;
}

.btn {
white-space: initial;
}

a.home_links {
text-decoration: none;
}
2 changes: 1 addition & 1 deletion app/views/document/unit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="container-fluid">

<div class="document_selection">
<select id="manifestSelect"></select>
<select id="manifestSelect" aria-label="manifestSelect"></select>
</div>

<input id="manifest" type="hidden" value="" />
Expand Down
62 changes: 35 additions & 27 deletions app/views/layouts/application.html.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="<%= I18n.locale %>">
<head>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
Expand All @@ -19,15 +19,18 @@


<body class="body_<%= params[:controller] %> body_<%= params[:action] %> <% if current_page? home_path %>home_page<% end %>">

<header class="body_head">
<a href="#content_wrapper" class="sr-only sr-only-focusable">
Skip to main content
</a>
<div id="body_wrapper">
<header id="header" class="body_head">
<%# if statement to only show on home page %>
<% if current_page?(home_path) %>
<div class="header_top">
<div class="header_stuff container">
<div class="site_logo_container">
<div class="site_image">
<%= image_tag 'effigy3.png' %>
<%= image_tag 'effigy3.png', alt: "Photo of an artifact" %>
</div>
<h1 class="header_words header_words_nav">
<span class="head_sp">Salmon Pueblo</span>
Expand All @@ -54,87 +57,92 @@
<%# END if statement %>

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand or collapse main menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<nav class="collapse navbar-collapse" aria-label="Main Menu">
<div class="row">
<ul class="nav navbar-nav">
<% section = @section || params["controller"] %>
<!-- <li class="<%#= active?(home_path) %>">
<%#= link_to "SPARC Home", home_path %>
</li> -->
<li class="<%= active?("explore", section) %>">
<%= link_to "Explore Pueblo", explore_path %>
<%= link_to "Explore Pueblo", explore_path, 'aria-current': (current_page?(explore_path) ? 'page' : nil) %>
</li>
<li class="<%= active?("query", section) %>">
<%= link_to "Query Data", query_path %>
<%= link_to "Query Data", query_path, 'aria-current': (current_page?(query_path) ? 'page' : nil) %>
</li>
<li class="<%= active?("documents", section) %>">
<%= link_to "Documents", documents_path %>
<%= link_to "Documents", documents_path, 'aria-current': (current_page?(documents_path) ? 'page' : nil) %>
</li>
<li class="<%= active?("images", section) %>">
<%= link_to "Image Gallery", gallery_path %>
<%= link_to "Image Gallery", gallery_path, 'aria-current': (current_page?(gallery_path) ? 'page' : nil) %>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="<%= active?("descendants", section) %>">
<%= link_to "Native Descendants", descendants_path %>
<%= link_to "Native Descendants", descendants_path, 'aria-current': (current_page?(descendants_path) ? 'page' : nil) %>
</li>
<li class="<%= active?("about", section) %>">
<%= link_to "About", about_path %>
<%= link_to "About", about_path, 'aria-current': (current_page?(about_path) ? 'page' : nil) %>
</li>
</ul>
</div> <!-- /navbar-collapse -->
</div>
</nav> <!-- /navbar-collapse -->
</div>
</div>
</header>

<div class="container main_content">
<main class="container main_content" id="content_wrapper" tabindex="-1">
<%= yield %>
</main>
</div>

<footer class="project_footer">
<footer id="footer" class="project_footer">
<div class="container">
<p><%= link_to "How To Cite", about_sub_path(name: "how-to-cite"), :class => '' %></p>
<p>The <em>Salmon Pueblo Archaeological Research Collection</em> created by the Center for Digital Research in the Humanities with funding from the National Endowment for the Humanities and in partnership with Archaeology Southwest, the Institute for Advanced Technology in the Humanities, and the San Juan County Archaeological Research Center and Library - Salmon Ruins. Distributed under a <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons License</a>.</p>
<div class="row footer_logos text-center">
<div class="col-md-4">
<div class="logo_sr">
<a href="https://www.salmonruins.com/archaeology-firm.html" alt="san Juan Museum Association">
<%= image_tag 'logo_sr.gif' %>
<a href="https://www.salmonruins.com/archaeology-firm.html" rel="external">
<%= image_tag 'logo_sr.gif', alt: "San Juan Museum Association logo" %>
</a>
</div>
</div>
<div class="col-md-4">
<div class="logo_neh">
<a href="https://www.neh.gov/" alt="The National Endowment for the Humanities">
<%= image_tag 'logo_neh.gif' %>
<a href="https://www.neh.gov/" rel="external">
<%= image_tag 'logo_neh.gif', alt: "National Endowment for the Humanities logo" %>
</a>
</div>
<div class="logo_as">
<a href="https://www.archaeologysouthwest.org/" alt="Archaeology Southwest">
<%= image_tag 'logo_archaeology_southwest.gif' %>
<a href="https://www.archaeologysouthwest.org/" rel="external">
<%= image_tag 'logo_archaeology_southwest.gif', alt: "Archaeology Southwest logo" %>
</a>
</div>
</div>
<div class="col-md-4">
<div class="logo_unl">
<a href="https://cdrh.unl.edu/" alt="The Center for Digital Research in the Humanities at the University of Nebraska–Lincoln">
<%= image_tag 'logo_unl.gif' %>
<a href="https://cdrh.unl.edu/" rel="external">
<%= image_tag 'logo_unl.gif', alt: "University of Nebraska-Lincoln logo" %>
</a>
</div>
<div class="logo_iath">
<a href="http://www.iath.virginia.edu/" alt="The Institute for Advanced Technology in the Humanities at the University of Virginia">
<%= image_tag 'logo_iath.gif' %>
<a href="https://www.iath.virginia.edu/" rel="external">
<%= image_tag 'logo_iath.gif', alt: "Institute for Advanced Technology in the Humanities at the University of Virginia logo" %>
</a>
</div>
</div>
</div>
<div class="back-to-top">
<a href="#body_wrapper">Back to top</a>
</div>
</footer>
</div>
</body>
</html>