improved accessibility

perifacode · Nov 25, 2022 · 49ac479 · 49ac479
1 parent f4e61bc
commit 49ac479
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 46 deletions.
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from "@chakra-ui/react"
+import { Flex, Image, Text, Heading } from "@chakra-ui/react"
 
 export const AboutSection = () => {
   return (
@@ -8,6 +8,7 @@ export const AboutSection = () => {
       h={["80vh", "80vh", "60vh"]}
       justify="center"
       align="center"
+      as="section"
     >
       <Flex 
         bg="white" 
@@ -16,9 +17,12 @@ export const AboutSection = () => {
         px={["1rem", "3rem"]} 
         py={["1rem", "2rem"]}
         mx="1rem"
+        as="article"
       >
-        <Image src="/sobre-grafite.svg" alt="Sobre" w="200px" />
-        <Text>
+        <Heading as="h2" id="about">
+          <Image src="/sobre-grafite.svg" alt="Sobre" w="200px" />
+        </Heading>
+        <Text aria-labelledby="about">
         A perifaCode é uma comunidade de tecnologia que tem com objetivo “desgourmetizar” o mercado digital, preenchido, em sua maioria, por um estereótipo ao qual precisa ser mudado para ser mais inclusivo e com esse propósito a ONG foi criada em 2019 para capacitar, discutir e fazer ouvir a voz da periferia dentro do mercado digital. 
 
         Realizamos diversos eventos presenciais para capacitar esses jovens da periferia e contamos com vários grupos espalhados pelas redes sociais, além de uma comunidade ativa no Discord para discutirmos sobre programação e temas relacionados.

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -33,18 +33,22 @@ export const Footer = () => {
             <IconLink 
               href="https://www.youtube.com/perifacode/" 
               icon={RiYoutubeFill} 
+              aria-label="Youtube"
             />
             <IconLink 
               href="https://www.twitter.com/perifacode/" 
               icon={RiTwitterFill} 
+              aria-label="Twitter"
             />
             <IconLink 
               href="https://www.instagram.com/perifacode/" 
               icon={RiInstagramFill} 
+              aria-label="Instagram"
             />
             <IconLink 
               href="https://www.github.com/perifacode/" 
               icon={RiGithubFill} 
+              aria-label="Github"
             />
           </Flex>
       </Flex>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, Stack, useMediaQuery } from "@chakra-ui/react"
+import { Flex, Icon, Stack, useMediaQuery, IconButton } from "@chakra-ui/react"
 import { useState } from "react"
 import { RiCloseLine, RiMenuLine } from "react-icons/ri"
 import { Logo } from "./Logo"
@@ -9,8 +9,8 @@ export const Header = () => {
   const [isOpen, setIsOpen] = useState(!isMobile)
 
   return (
-    <Flex direction={["column", "column", "row"]}>
-      <Flex as="header"
+    <Flex direction={["column", "column", "row"]} as="header">
+      <Flex 
         bg="brand.primary"
         align="center"
         justify="space-around"
@@ -19,20 +19,26 @@ export const Header = () => {
       >
         <Logo />
         <Stack display={["block", "block", "none"]}>
-          <Icon
-            as={RiMenuLine}
+          <IconButton  
+            icon={<RiMenuLine />} 
             display={isOpen ? "none" : "block"}
             cursor="pointer"
             onClick={() => setIsOpen(true)}
             fontSize="2rem"
+            aria-label="Abrir o menu" 
+            background="transparent"
           />
-          <Icon
-            as={RiCloseLine}
+
+          <IconButton  
+            icon={<RiCloseLine />} 
             display={isOpen ? "block" : "none"}
             cursor="pointer"
             onClick={() => setIsOpen(false)}
             fontSize="2rem"
+            aria-label="Fechar o menu"
+            background="transparent"
           />
+
         </Stack>
       </Flex>
       <Stack

diff --git a/src/components/HeroBanner.tsx b/src/components/HeroBanner.tsx
@@ -19,6 +19,7 @@ export const HeroBanner = ({ title, background, description, buttonLabel, button
       bgSize="cover"
       height="60vh"
       width="100%"
+      as="section"
     >
       <Flex
         direction="column"
@@ -27,6 +28,7 @@ export const HeroBanner = ({ title, background, description, buttonLabel, button
         bg="blackAlpha.700"
         justify="center"
         pl="3rem"
+        as="article"
       >
         <Heading as="h2" color="white">{title}</Heading>
         <Text fontSize="2rem" color="white">{description}</Text>

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,14 +1,26 @@
-import { Flex } from "@chakra-ui/react"
+import { Flex, List, ListItem } from "@chakra-ui/react"
 import { NavItem } from "./NavItem"
 
 export const Navbar = () => {
   return (
-    <Flex as="nav" gap="1.5rem" direction={["column", "column", "row"]}>
-      <NavItem href="/" label="Página inicial" />
-      <NavItem href="/sobre" label="Sobre nós" />
-      <NavItem href="/manifesto" label="Manifesto" />
-      <NavItem href="/coc" label="Código de conduta" />
-      <NavItem href="/mentoria" label="Mentoria" />
+    <Flex as="nav" gap="1.5rem" direction={["column", "column", "row"]} aria-label="Navegação principal">
+      <List display="flex" flexDirection={{base: "column", md: "column", lg: "row"}} gap="1.5rem">
+        <ListItem>
+          <NavItem href="/" label="Página inicial" />
+        </ListItem>
+        <ListItem>
+          <NavItem href="/sobre" label="Sobre nós" />
+        </ListItem>
+        <ListItem>
+          <NavItem href="/manifesto" label="Manifesto" />
+        </ListItem>
+        <ListItem>
+          <NavItem href="/coc" label="Código de conduta" />
+        </ListItem>
+        <ListItem>
+          <NavItem href="/mentoria" label="Mentoria" />
+        </ListItem>
+      </List>
     </Flex>
   )
 }
diff --git a/src/components/OrganizersSlide.tsx b/src/components/OrganizersSlide.tsx
@@ -18,6 +18,7 @@ export const OrganizersSlide = ({ organizers }: OrganizersSlideProps) => {
       h="70vh"
       bg="brand.primary"
       direction="column"
+      as="section"
     >
       <Heading as="h2" py={12} textAlign="center">Organizadores</Heading>
       <Swiper

diff --git a/src/components/SocialSection.tsx b/src/components/SocialSection.tsx
@@ -1,30 +1,44 @@
-import { Flex, Heading } from "@chakra-ui/react"
+import { Flex, Heading, List, ListItem } from "@chakra-ui/react"
 import { RiGithubFill, RiInstagramFill, RiTwitterFill, RiYoutubeFill } from 'react-icons/ri'
 import { IconLink } from "./IconLink"
 
 export const SocialSection = () => {
   return (
-    <Flex py="5rem" align="center" direction="column" rowGap="2rem">
+    <Flex py="5rem" align="center" direction="column" rowGap="2rem" as="section">
       <Heading as="h2" fontSize="3rem" maxW={480} textAlign="center">
         Da PERIFERIA para o mundo da TECNOLOGIA.
       </Heading>
-      <Flex gap="2rem">
-        <IconLink 
-          href="https://www.youtube.com/perifacode/" 
-          icon={RiYoutubeFill} 
-        />
-        <IconLink 
-          href="https://www.twitter.com/perifacode/" 
-          icon={RiTwitterFill} 
-        />
-        <IconLink 
-          href="https://www.instagram.com/perifacode/" 
-          icon={RiInstagramFill} 
-        />
-        <IconLink 
-          href="https://www.github.com/perifacode/" 
-          icon={RiGithubFill} 
-        />
+      <Flex  as="nav" aria-label="Redes Sociais">
+        <List display="flex" gap="2rem">
+          <ListItem>
+            <IconLink 
+              href="https://www.youtube.com/perifacode/" 
+              icon={RiYoutubeFill} 
+              aria-label="Youtube"
+            />
+          </ListItem>
+          <ListItem>
+            <IconLink 
+              href="https://www.twitter.com/perifacode/" 
+              icon={RiTwitterFill} 
+              aria-label="Twitter"
+            />
+          </ListItem>
+          <ListItem>
+            <IconLink 
+              href="https://www.instagram.com/perifacode/" 
+              icon={RiInstagramFill} 
+              aria-label="Instagram"
+            />
+          </ListItem>
+          <ListItem>
+            <IconLink 
+              href="https://www.github.com/perifacode/" 
+              icon={RiGithubFill} 
+              aria-label="Github"
+            />
+          </ListItem>
+        </List>
 
       </Flex>
     </Flex>

diff --git a/src/pages/coc.tsx b/src/pages/coc.tsx
@@ -7,9 +7,9 @@ import { BasicPageProps } from "../types/BasicPageProps"
 
 const Coc = ({ title, content }: BasicPageProps) => {
   return (
-    <Container maxW={1180} my="2rem">
+    <Container maxW={1180} my="2rem" as="main">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>
-      <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
+      <section className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
     </Container>
   )
 }

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,6 +6,7 @@ import { OrganizerProps } from '../components/Organizer';
 import { OrganizersSlide } from '../components/OrganizersSlide';
 import { SocialSection } from '../components/SocialSection';
 import { graphcms } from '../services/graphcms';
+import { VisuallyHidden } from '@chakra-ui/react';
 
 interface HomeProps {
   heroBanner: HeroBannerProps
@@ -14,7 +15,8 @@ interface HomeProps {
 
 const Home = ({heroBanner, organizers}: HomeProps) => {
   return (
-    <>
+    <main>
+      <VisuallyHidden as='h1'>Perifacode</VisuallyHidden>
       <HeroBanner 
         title={heroBanner.title}
         background={heroBanner.background}
@@ -25,7 +27,7 @@ const Home = ({heroBanner, organizers}: HomeProps) => {
       <SocialSection />
       <AboutSection />
       <OrganizersSlide organizers={organizers}/>
-    </>
+    </main>
   )
 }
 

diff --git a/src/pages/manifesto.tsx b/src/pages/manifesto.tsx
@@ -9,9 +9,9 @@ import { BasicPageProps } from "../types/BasicPageProps"
 
 const Manifesto = ({ title, content }: BasicPageProps) => {
   return (
-    <Container maxW={1180} my="2rem">
+    <Container maxW={1180} my="2rem" as="main">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>
-      <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
+      <section className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
     </Container>
   )
 }

diff --git a/src/pages/mentoria.tsx b/src/pages/mentoria.tsx
@@ -7,9 +7,9 @@ import { BasicPageProps } from "../types/BasicPageProps"
 
 const Mentoria = ({ title, content }: BasicPageProps) => {
   return (
-    <Container maxW={1180} my="2rem">
+    <Container maxW={1180} my="2rem" as="main">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>
-      <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
+      <section className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
     </Container>
   )
 }

diff --git a/src/pages/sobre.tsx b/src/pages/sobre.tsx
@@ -7,9 +7,9 @@ import { BasicPageProps } from "../types/BasicPageProps"
 
 const Sobre = ({ title, content }: BasicPageProps) => {
   return (
-    <Container maxW={1180} my="2rem">
+    <Container maxW={1180} my="2rem" as="main">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>
-      <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
+      <section className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
     </Container>
   )
 }