Skip to content

Commit 6d0f8fc

Browse files
committed
Aria labels for images
1 parent 67aee91 commit 6d0f8fc

11 files changed

Lines changed: 59 additions & 23 deletions

File tree

public/data/projects.json

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,32 @@
99
"name": "Controls / Localization",
1010
"resources": ["ROS2", "Rviz", "Matlab"],
1111
"description": "The localization team focuses on the getting information side of the competition. Using algorithms such as SLAM, which uses various sensors such as a lidar and an imu, we try to map out the surroundings around us to find out where to go next. This team interacts a lot with the physical robot, as precise tuning of the sensors is necessary to achieve optimal and accurate readings. Now that we have a sense of where we are in the competition circuit, it's up to the controls team to control what happens next. Using mission planners decision trees, this team determines how we complete the various tasks of the competition. Additionally, there are a lot of factors underwater that make navigation quite difficult when there is a precise end location that we want to get to. This team deals with the various controls systems that make that navigation possible, such as PID.",
12-
"image": "/images/projects_software_controls.png"
12+
"image": "/images/projects_software_controls.png",
13+
"alt": "Robot arrows for vectors in simulation software"
1314
},
1415

1516
{
1617
"name": "Simulation",
1718
"resources": ["Gazebo", "Blender", "Rviz"],
1819
"description": "Given the nature of our competition, it can be hard to get access to a large body of water every single day. To mitigate that, we have a team dedicated to creating a realistic simulation that anybody can have access to at any time. The main goal is to make a parallel simulation that could be interswapped with the real thing at any time. This involves creating realistic hydrodynamic physics simulations, creating a realistic environment of the competition course, and various other tasks. Occasionally, we have to create models ourselves, so people with a diverse toolset of skills are encouraged.",
19-
"image": "/images/projects_software_simulation.png"
20+
"image": "/images/projects_software_simulation.png",
21+
"alt": "Robot model in simulation software"
2022
},
2123

2224
{
2325
"name": "Computer Vision",
2426
"resources": ["YOLOv11"],
2527
"description": "We use the YOLOv11 object detection model and Intel Realsense RGB camera to detect labels underwater. We trained our YOLO model in two stages: first on images with game labels placed on the surface, then on images with game labels placed underwater. We used image augmentation techniques (saturation, cropping, zoom, etc.) to diversify our training dataset on each training epoch. We also sampled a portion of training data from the Blender environment that simulates game conditions. Finally, we validate our model on a custom real world dataset collected in the pool.",
26-
"image": "/images/projects_software_computer_vision.png"
28+
"image": "/images/projects_software_computer_vision.png",
29+
"alt": "Image detection algorithm successfully detecting hard-to-see underwater image"
2730
},
2831

2932
{
3033
"name": "DevOps",
3134
"resources": ["Docker"],
3235
"description": "DevOps builds the pipelines, tools, and interfaces to integrate the software components into a whole package. One of our main focuses is making our ROS stack easier to use. We set up Dockerfile and GitHub Actions to build Docker images on every commit. The ROS environment is now as simple as pulling a container and running it, while CI checks each commit and catches bugs early. We also made day-to-day operation friendlier by introducing a graphical dashboard, instead of using a command line. A graphical console built with Lichtblick and OliveTin allows click controls and see live telemetry and vision streams. Beyond the big projects, we invest in quality-of-life improvements: an internal network so everyone can connect to the robot at the same time, and autorun service to automatically trigger pre-determined routines on power-up.",
33-
"image": "/images/projects_software_devops.jpg"
36+
"image": "/images/projects_software_devops.jpg",
37+
"alt": "Computer running devOps software"
3438
}
3539
]
3640
},
@@ -45,14 +49,16 @@
4549
"name": "Electronics",
4650
"resources": ["Altium/KiCAD", "SPICE"],
4751
"description": "Without power, the robot is just a floating (or sinking) hunk of metal in the water. Our robot needs power to run all the electronics in the robot. One of the main focuses of our team is to supply power to the components. We design a battery management system that monitors the conditions of the battery during operation and charging and to design a power distribution board to convert the battery voltage to the required operating voltages of the electronics. We also work with other sub-teams to aid designing and integrating circuitry to add other features such as depth sensors, cameras, and motor controllers.",
48-
"image": "/images/projects_electrical_electronics.jpg"
52+
"image": "/images/projects_electrical_electronics.jpg",
53+
"alt": "Main internal electrical components of Steelhead"
4954
},
5055

5156
{
5257
"name": "Sound Localization",
5358
"resources": ["Altium/KiCAD"],
5459
"description": "In order to locate some of the tasks at Robosub, we are developing a system that will allow us to locate underwater pingers emitting sounds at known frequencies. In order to do that, we are designing circuits to process signals coming out of a hydrophone (underwater microphone) and researching a variety of techniques to use those signals for localization. This project is one of the more challenging and well rounded projects on the team, involving a wide range of design topics from analog circuitry to firmware/software. The high level diagram featured above shows one of the architectures we are currently considering for our system.",
55-
"image": "/images/projects_electrical_sound_localization.jpg"
60+
"image": "/images/projects_electrical_sound_localization.jpg",
61+
"alt": "5 Hydrophones in an array"
5662
}
5763
]
5864
},
@@ -67,21 +73,24 @@
6773
"name": "Torpedo Launcher",
6874
"resources": ["Onshape", "Arduino"],
6975
"description": "A key part of the competition is our robot's ability to identify targets and launch projectiles through them. To achieve this, we designed our spring-loaded torpedo launcher. Its spring-based operation allows it to launch its projectiles with sufficient speed and accuracy while minimizing the system's complexity and without compromising safety. The torpedoes themselves were fabricated using stereolithography (SLA) 3D-printing, making them durable and dense enough to glide through the water without prematurely surfacing.",
70-
"image": "/images/projects_mechanical_torpedo.jpg"
76+
"image": "/images/projects_mechanical_torpedo.jpg",
77+
"alt": "Torpedo launcher with holes for water intake"
7178
},
7279

7380
{
7481
"name": "Claw",
7582
"resources": ["Onshape", "Arduino"],
7683
"description": "Every year's competition includes a task that involves moving target objects to specific locations. Our mechanical claw was created with these tasks in mind, with versatility and reliability at the core of its design. The claw's gear-based mechanism, driven by a high-performance servo motor, is a robust design that is easily controlled through a pulse-width modulation (PWM) control program. Its soft gripper pads are designed to conform to any object they come into contact with, and the angle of its arms are manually adjustable for even greater versatility.",
77-
"image": "/images/projects_mechanical_claw.jpg"
84+
"image": "/images/projects_mechanical_claw.jpg",
85+
"alt": "3D printed grippy claw"
7886
},
7987

8088
{
8189
"name": "Dropper",
8290
"resources": ["Onshape", "Arduino"],
8391
"description": "During the competition, our robot needs to drop “markers” in specific locations. Our solution to this was a gravity-based mechanism that drops the markers using the same servo motor that controls the claw. Opening the claw allows the first marker to fall, while simultaneously blocking the second marker. Once the claw closes again, the second marker moves into place for deployment. This design allows each marker to be deployed independently with minimal increases to cost or control complexity. The markers themselves were designed with hydrodynamics in mind to facilitate a reliable downward trajectory.",
84-
"image": "/images/projects_mechanical_dropper.jpg"
92+
"image": "/images/projects_mechanical_dropper.jpg",
93+
"alt": "3D printed torpedo dropper"
8594
}
8695
]
8796
}

src/components/Footer/Footer.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@
147147

148148
.navigator {
149149
flex: 1.5 1 0;
150+
151+
.navigator-right {
152+
gap: 20px;
153+
}
150154
}
151155

152156
.content {
@@ -172,7 +176,7 @@
172176
flex: 1 1 0;
173177

174178
.navigator-right {
175-
gap: 20px;
179+
display: none;
176180
}
177181
}
178182

src/components/ProjectItem/ProjectItem.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ interface ProjectItemStruct {
88
name: string;
99
image: string;
1010
description: string;
11-
resources: string[]
11+
resources: string[];
12+
alt: string;
1213
}
1314

1415

@@ -49,7 +50,7 @@ function ProjectItem({ projects }: projectItemProps) {
4950

5051
<div className="option-display">
5152

52-
<img className="display" src={currentProject.image} />
53+
<img className="display" src={currentProject.image} alt={currentProject.alt} />
5354
<div className="content">
5455
<h3>{currentProject.name}</h3>
5556

src/components/SponsorCatalog/SponsorCatalog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function SponsorCard({ sponsor }: sponsorCardProps) {
9393
return (
9494
<div className="sponsor-card">
9595
<div className="display">
96-
<img src={`./images/logos/${sponsor.logo}`} />
96+
<img src={`./images/logos/${sponsor.logo}`} alt={sponsor.name} />
9797
<div className="underline" />
9898
</div>
9999

src/components/Sponsors/HighlightPanel.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,5 +134,16 @@
134134
svg {
135135
height: 25px !important;
136136
}
137+
138+
.panel-display {
139+
140+
.content {
141+
142+
img {
143+
width: auto;
144+
height: 40px !important;
145+
}
146+
}
147+
}
137148
}
138149
}

src/components/Sponsors/HighlightPanel.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function HighlightPanel() {
3939
</div>
4040

4141
<div className="panel-display">
42-
<img src="/images/pulling_steelhead_out_of_water.jpg" />
42+
<img src="/images/pulling_steelhead_out_of_water.jpg" alt="Man pulling robot out of pool" />
4343
<div className="content-mask" />
4444

4545
<div className="content">
@@ -50,7 +50,13 @@ function HighlightPanel() {
5050
currentHover < sponsors.length
5151
? "images/logos/" + sponsors[currentHover].logo
5252
: ""
53-
}
53+
}
54+
alt={
55+
currentHover !== null &&
56+
currentHover >= 0 &&
57+
currentHover < sponsors.length
58+
? "images/logos/" + sponsors[currentHover].name
59+
: ""}
5460
/>
5561

5662
<p>

src/pages/Home/Home.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,10 @@
363363
.card-content {
364364
transform: translateY(0%) !important;
365365
opacity: 1 !important;
366+
367+
svg {
368+
height: 30px !important;
369+
}
366370
}
367371
}
368372

src/pages/Home/Home.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ function Home() {
150150

151151
<div className="subteam-card" onClick={() => navigate("/projects")}>
152152
<div className="card-display">
153-
<img src="/images/rviz.jpg" />
153+
<img src="/images/rviz.jpg" alt="Rviz software simulation of robot in underwater conditions" />
154154
<div className="img-mask"></div>
155155
</div>
156156
<div className="card-content">
@@ -161,7 +161,7 @@ function Home() {
161161

162162
<div className="subteam-card" onClick={() => navigate("/projects")}>
163163
<div className="card-display">
164-
<img src="/images/soldering_pcb.jpg" />
164+
<img src="/images/soldering_pcb.jpg" alt="Hands soldering a component on a PCB" />
165165
<div className="img-mask"></div>
166166
</div>
167167
<div className="card-content">
@@ -172,7 +172,7 @@ function Home() {
172172

173173
<div className="subteam-card" onClick={() => navigate("/projects")}>
174174
<div className="card-display">
175-
<img src="/images/steelhead_upshot.jpg" />
175+
<img src="/images/steelhead_upshot.jpg" alt="Steelhead robot frame on table" />
176176
<div className="img-mask"></div>
177177
</div>
178178
<div className="card-content">

src/pages/Members/Members.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183
background: rgba(0, 0, 0, 0.4);
184184
border-radius: 100%;
185185
display: flex;
186-
flex-direction: column;
186+
flex-direction: row;
187187
align-items: center;
188188
justify-content: center;
189189
gap: 10px;

src/pages/Members/Members.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function Members() {
5656
</div> */}
5757

5858
<div className="content">
59-
<img src="/images/team_photo.jpg" />
59+
<img src="/images/team_photo.jpg" alt="Photo of subbots members wearing black or dark colors" />
6060
<div className="img-mask" />
6161
<h2>Meet <strong>The Team</strong></h2>
6262
<p className="content-text-large">
@@ -104,7 +104,7 @@ function MemberItem({ member }: MemberItemProps) {
104104
return (
105105
<div className="member-item">
106106
<div className="member-image-wrapper">
107-
<img src={member.image !== "" ? `/images/members/${member.image}` : '/images/members/placeholder.png'} />
107+
<img src={member.image !== "" ? `/images/members/${member.image}` : '/images/members/placeholder.png'} alt={`Profile picture of ${member.firstName} ${member.lastName}`} />
108108
{links.length > 0 && (
109109
<div className="member-overlay">
110110
{links.map(link => (
@@ -164,7 +164,7 @@ function MemberFactory({ team, members }: MemberFactoryProps) {
164164
<section className="factorygen-member-section-inner">
165165

166166
<div className="header">
167-
<img src="/images/pulling_steelhead_out_of_water.jpg" />
167+
<img src="/images/pulling_steelhead_out_of_water.jpg" alt="Man pulling robot out of the pool" />
168168
<div className="img-mask" />
169169
<h1>{team.toUpperCase()}</h1>
170170

0 commit comments

Comments
 (0)