# Accessibility Audit - 20251123-092506
== Missing alt attributes on images ==
None found

== Missing aria-labels on interactive elements ==
src/components/layout/TheFooter.vue:53:              <a href="mailto:info@coppertone.tech" class="hover:text-white transition-colors">
src/components/layout/Navbar.vue:92:        <button
src/components/layout/Navbar.vue:102:    <button
src/components/layout/Navbar.vue:237:          <button
src/components/TheWelcome.vue:20:    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
src/components/TheWelcome.vue:31:    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
src/components/TheWelcome.vue:33:    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
src/components/TheWelcome.vue:35:    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
src/components/TheWelcome.vue:38:    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
src/components/TheWelcome.vue:40:    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
src/components/TheWelcome.vue:42:    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
src/components/TheWelcome.vue:47:    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
src/components/TheWelcome.vue:58:    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
src/components/TheWelcome.vue:59:    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
src/components/TheWelcome.vue:60:    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
src/components/TheWelcome.vue:61:    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
src/components/TheWelcome.vue:63:    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
src/components/TheWelcome.vue:74:    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
src/components/TheWelcome.vue:76:    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
src/components/TheWelcome.vue:79:    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
src/components/TheWelcome.vue:81:    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
src/components/TheWelcome.vue:93:    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
src/components/HelloWorld.vue:12:      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
src/components/HelloWorld.vue:13:      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
src/components/trustBusiness/QuestionnaireSection.vue:36:      <button
src/components/trustBusiness/QuestionnaireSection.vue:45:      <button
src/components/trustBusiness/QuestionnaireSection.vue:52:      <button
src/components/trustBusiness/GeneratedOutputs.vue:6:        <button
src/components/trustBusiness/WebsiteCopyGenerator.vue:11:        <button
src/components/trustBusiness/WebsiteCopyGenerator.vue:17:        <button
src/components/trustBusiness/WebsiteCopyGenerator.vue:23:        <button
src/components/trustBusiness/WebsiteCopyGenerator.vue:34:          <button
src/components/trustBusiness/QuestionnaireSidebar.vue:42:      <button
src/components/trustBusiness/QuestionnaireSidebar.vue:79:      <button
src/components/trustBusiness/QuestionnaireSidebar.vue:85:      <button
src/components/trustBusiness/QuestionnaireSidebar.vue:98:        <button
src/components/trustBusiness/BusinessPlanGenerator.vue:11:        <button
src/components/trustBusiness/BusinessPlanGenerator.vue:17:        <button
src/components/trustBusiness/BusinessPlanGenerator.vue:23:        <button
src/components/trustBusiness/GovernanceCharterGenerator.vue:11:        <button
src/components/trustBusiness/GovernanceCharterGenerator.vue:17:        <button
src/components/trustBusiness/GovernanceCharterGenerator.vue:23:        <button
src/components/ui/CtaButton.vue:2:  <button>
src/components/ui/ToastContainer.vue:34:          <button
src/views/StaffDashboardView.vue:14:              <button
src/views/StaffDashboardView.vue:25:              <button
src/views/StaffDashboardView.vue:53:            <button
src/views/StaffDashboardView.vue:147:            <button
src/views/StaffDashboardView.vue:154:            <button
src/views/StaffDashboardView.vue:176:              <button

== Missing form labels ==
src/components/trustBusiness/QuestionInput.vue:13:    <input
src/components/trustBusiness/QuestionInput.vue:25:    <textarea
src/components/trustBusiness/QuestionInput.vue:37:    <select
src/components/trustBusiness/QuestionInput.vue:58:        <input
src/components/trustBusiness/QuestionInput.vue:71:        <input
src/components/trustBusiness/QuestionInput.vue:81:        <input
src/components/trustBusiness/QuestionInput.vue:93:    <input
src/components/trustBusiness/QuestionInput.vue:107:      <input
src/components/trustBusiness/GovernanceCharterGenerator.vue:423:    .replace(/^- \[ \] (.+)$/gm, '<li class="ml-4"><input type="checkbox" class="mr-2" disabled> $1</li>')
src/views/StaffDashboardView.vue:351:              <input
src/views/StaffDashboardView.vue:360:              <textarea
src/views/StaffDashboardView.vue:368:              <select
src/views/StaffDashboardView.vue:382:                <select
src/views/StaffDashboardView.vue:394:                <input
src/views/ProjectsView.vue:183:                    <input v-model="newProject.name" required type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
src/views/ProjectsView.vue:187:                    <textarea v-model="newProject.description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
src/views/ProjectsView.vue:191:                    <select v-model="newProject.status" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
src/views/ProjectsView.vue:223:                    <input v-model="projectRequest.name" required type="text" placeholder="e.g., Website Redesign" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" />
src/views/ProjectsView.vue:227:                    <textarea v-model="projectRequest.description" required rows="4" placeholder="Tell us about your project requirements, goals, and any specific features you need..." class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"></textarea>
src/views/ProjectsView.vue:254:                <textarea v-model="rejectionReason" required rows="3" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" placeholder="e.g., Scope unclear, budget constraints, etc."></textarea>
src/views/LoginView.vue:37:            <input
src/views/LoginView.vue:49:            <input
src/views/ProjectDetailView.vue:84:                    <input v-model="newTask.title" required type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
src/views/ProjectDetailView.vue:88:                    <textarea v-model="newTask.description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
src/views/InvoicesView.vue:97:                    <input v-model="newInvoice.invoiceNumber" required type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="INV-2025-001" />
src/views/InvoicesView.vue:101:                    <select v-model="newInvoice.projectId" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
src/views/InvoicesView.vue:110:                    <input v-model.number="newInvoice.totalAmount" required type="number" step="0.01" min="0" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="0.00" />
src/views/InvoicesView.vue:114:                    <input v-model="newInvoice.dueDate" required type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
src/views/InvoicesView.vue:118:                    <textarea v-model="newInvoice.description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
src/views/InvoicesView.vue:235:                  <select v-model="paymentData.method" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
src/views/InvoicesView.vue:249:                  <input v-model="paymentData.transactionHash" type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="0x..." />
src/views/AdminDashboardView.vue:254:                <input
src/views/AdminDashboardView.vue:354:              <input
src/views/AdminDashboardView.vue:363:              <textarea
src/views/AdminDashboardView.vue:371:              <select
src/views/TrustBusinessView.vue:13:            <select
src/views/TrustBusinessView.vue:55:              <input
src/views/TrustBusinessView.vue:136:        <input
src/views/RegisterView.vue:55:            <input
src/views/RegisterView.vue:68:            <input
src/views/RegisterView.vue:81:            <input
src/views/ContactView.vue:33:            <input
src/views/ContactView.vue:49:            <input
src/views/ContactView.vue:65:            <input
src/views/ContactView.vue:78:            <input
src/views/ContactView.vue:91:            <textarea

== Color contrast issues (inline color styles) ==
src/components/WelcomeItem.vue:34:  color: var(--color-text);
src/components/WelcomeItem.vue:41:  color: var(--color-heading);
src/components/trustBusiness/QuestionnaireSection.vue:111:  color: #f5e6d3;
src/components/trustBusiness/QuestionnaireSection.vue:114:  background-color: #b87333;
src/components/trustBusiness/QuestionnaireSection.vue:117:  background-color: #a66629;
src/components/trustBusiness/QuestionnaireSection.vue:120:  background-color: #8a5622;
src/components/trustBusiness/QuestionnaireSection.vue:123:  background-color: #8a5622;
src/components/trustBusiness/GeneratedOutputs.vue:63:.bg-copper-600 { background-color: #b87333; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:488:    h1 { font-size: 28px; margin-bottom: 16px; color: #1f2937; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:489:    h2 { font-size: 22px; margin-top: 32px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; color: #b87333; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:490:    h3 { font-size: 18px; margin-top: 24px; color: #374151; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:491:    blockquote { border-left: 4px solid #b87333; padding-left: 16px; font-style: italic; color: #6b7280; margin: 16px 0; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:493:    .placeholder { background-color: #fdf8f3; color: #b87333; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:516:.text-copper-100 { color: #f5e6d3; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:517:.text-copper-700 { color: #996633; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:518:.bg-copper-50 { background-color: #fdf8f3; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:519:.bg-copper-600 { background-color: #b87333; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:520:.hover\:bg-copper-700:hover { background-color: #996633; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:521:.border-copper-600 { border-color: #b87333; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:522::deep(.text-copper-700) { color: #996633; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:523::deep(.border-copper-500) { border-color: #b87333; }
src/components/trustBusiness/WebsiteCopyGenerator.vue:524::deep(.bg-copper-50) { background-color: #fdf8f3; }
src/components/trustBusiness/QuestionInput.vue:166:  color: #b87333;
src/components/trustBusiness/QuestionInput.vue:169:  --tw-ring-color: #b8733380;
src/components/trustBusiness/QuestionInput.vue:172:  border-color: #b87333;
src/components/trustBusiness/QuestionnaireSidebar.vue:170:  color: #b87333;
src/components/trustBusiness/QuestionnaireSidebar.vue:173:  color: #996633;
src/components/trustBusiness/QuestionnaireSidebar.vue:176:  background-color: #fdf8f3;
src/components/trustBusiness/QuestionnaireSidebar.vue:179:  background-color: #b87333;
src/components/trustBusiness/QuestionnaireSidebar.vue:182:  border-color: #e8d4c0;
src/components/trustBusiness/QuestionnaireSidebar.vue:185:  background-color: #fdf8f3;
src/components/trustBusiness/BusinessPlanGenerator.vue:352:          blockquote { border-left: 3px solid #b87333; padding-left: 15px; font-style: italic; color: #666; }
src/components/trustBusiness/BusinessPlanGenerator.vue:370:.text-copper-100 { color: #f5e6d3; }
src/components/trustBusiness/BusinessPlanGenerator.vue:371:.bg-copper-600 { background-color: #b87333; }
src/components/trustBusiness/BusinessPlanGenerator.vue:372:.hover\:bg-copper-700:hover { background-color: #996633; }
src/components/trustBusiness/BusinessPlanGenerator.vue:373::deep(.text-copper-700) { color: #996633; }
src/components/trustBusiness/BusinessPlanGenerator.vue:374::deep(.border-copper-500) { border-color: #b87333; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:464:          blockquote { border-left: 3px solid #b87333; padding-left: 15px; font-style: italic; color: #666; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:489:.text-copper-100 { color: #f5e6d3; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:490:.bg-copper-600 { background-color: #b87333; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:491:.hover\:bg-copper-700:hover { background-color: #996633; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:492::deep(.text-copper-700) { color: #996633; }
src/components/trustBusiness/GovernanceCharterGenerator.vue:493::deep(.border-copper-500) { border-color: #b87333; }
src/components/ui/Spinner.vue:27:  color: 'primary',
src/components/ui/Spinner.vue:56:  border-top-color: transparent;
src/components/ui/Spinner.vue:57:  border-right-color: transparent;
src/components/ui/Spinner.vue:88:  border-bottom-color: #3b82f6;
src/components/ui/Spinner.vue:89:  border-left-color: #3b82f6;
src/components/ui/Spinner.vue:93:  border-bottom-color: #6b7280;
src/components/ui/Spinner.vue:94:  border-left-color: #6b7280;