diff --git a/.eslintrc.js b/.eslintrc.js
index e9e85b22..f14066a0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@next/next/recommended',
+    'plugin:jsx-a11y/strict',
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -16,7 +17,11 @@ module.exports = {
     sourceType: 'module',
   },
   ignorePatterns: ['/build/*'],
-  plugins: ['react', 'import'],
+  plugins: [
+    'react',
+    'import',
+    'jsx-a11y',
+  ],
   settings: {
     react: {
       version: 'detect',
@@ -106,5 +111,14 @@ module.exports = {
 
     // Are you sure | is not a typo for || ?
     'no-bitwise': ['error'],
+
+    // bandaid fix; see the following github issues
+    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/402
+    // https://github.com/vercel/next.js/issues/5533
+    'jsx-a11y/anchor-is-valid': [ 'error', {
+      components: [ 'Link' ],
+      specialLink: [ 'hrefLeft', 'hrefRight' ],
+      aspects: [ 'invalidHref', 'preferButton' ],
+    }],
   },
 };
diff --git a/components/Navbar.js b/components/Navbar.js
index 74199fbb..7c323822 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -77,6 +77,8 @@ export default class Navbar extends React.Component {
 						</ul>
 					</div>
 					<div className="nav-section right" id="mobile-nav">
+						{/* TODO: resolve this by refactoring the navbar */}
+						{/* eslint-disable-next-line jsx-a11y/label-has-for */}
 						<label htmlFor="menu-toggle">
 							<div className="hamburger-icon">
 								<div className="bar" id="top-bar" />
diff --git a/package-lock.json b/package-lock.json
index b14685dd..41030477 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,16 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@axe-core/react": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.2.2.tgz",
+      "integrity": "sha512-qmh/1DGFrN9G7NqTNARA4aT1k37mUfyb5syWkEQN7iqo77VoO2GCsvVyfLystr8uwJYYihW17+Lgl0UTiz8q2Q==",
+      "dev": true,
+      "requires": {
+        "axe-core": "^4.2.3",
+        "requestidlecallback": "^0.3.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -1242,9 +1252,9 @@
       }
     },
     "core-js-pure": {
-      "version": "3.16.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.1.tgz",
-      "integrity": "sha512-TyofCdMzx0KMhi84mVRS8rL1XsRk2SPUNz2azmth53iRN0/08Uim9fdhQTaZTG1LqaXHYVci4RDHka6WrXfnvg==",
+      "version": "3.16.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.2.tgz",
+      "integrity": "sha512-oxKe64UH049mJqrKkynWp6Vu0Rlm/BTXO/bJZuN2mmR3RtOFNepLlSWDd1eo16PzHpQAoNG97rLU1V/YxesJjw==",
       "dev": true
     },
     "core-util-is": {
@@ -4528,6 +4538,12 @@
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
       "dev": true
     },
+    "requestidlecallback": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
+      "integrity": "sha1-b7dOBzP5DfP6pIOPn2oqX5t0KsU=",
+      "dev": true
+    },
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
diff --git a/package.json b/package.json
index ef4816c2..4c1323df 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,11 @@
     ]
   },
   "devDependencies": {
+    "@axe-core/react": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.0",
     "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
diff --git a/pages/_app.js b/pages/_app.js
index 7eb2d565..7a7d04be 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,7 @@
 import { config } from '@fortawesome/fontawesome-svg-core';
 import Head from 'next/head';
-import React from 'react';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import '../styles/App.scss';
@@ -8,6 +9,12 @@ import '../styles/App.scss';
 config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
 export default function App({ Component, pageProps}) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      const axe = require('@axe-core/react');
+      axe(React, ReactDOM, 1000);
+    }
+  }, []);
   return (
       <>
         <Head>
diff --git a/pages/about.js b/pages/about.js
index c922a566..3c5a7fb8 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -39,7 +39,7 @@ function About() {
 					<div className={`${styles.ornament} ${styles['square-ornament']}`}>
 						{/* TODO: resolve next/image issue */}
 						{/* eslint-disable-next-line @next/next/no-img-element */}
-						<img className={styles['square-splash']} src='/images/about1.png' alt="a picture of acm students at our annual CS BBQ!"/>
+						<img className={styles['square-splash']} src='/images/about1.png' alt="ACM students at our annual CS BBQ!"/>
 						{/* TODO: use next image without breaking deploy */}
 						<div className={styles['square-small']} />
 						<div className={styles['square-tiny']} />
diff --git a/styles/components/Navbar.scss b/styles/components/Navbar.scss
index 5dc84167..783e0fd5 100644
--- a/styles/components/Navbar.scss
+++ b/styles/components/Navbar.scss
@@ -14,7 +14,7 @@
     height: 60px;
     width: 180px;
   }
- 
+
   #navbar-inner {
     margin: auto;
     max-width: 1000px;