add alt text to tiles page (#2236)

Author: ethanpalm

components/tiles.mdx

@@ -7,14 +7,14 @@ keywords: ["tiles", "visual preview", "grid", "showcase"]
 Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.
 
 <Tile href="/components/accordions" title="Accordion" description="Two variants">
-  <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-  <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+  <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
 </Tile>
 
 ```mdx Tile example
 <Tile href="/components/accordions" title="Accordion" description="Two variants">
-  <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-  <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+  <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+  <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
 </Tile>
 ```
 
@@ -24,32 +24,32 @@ Combine tiles with the [columns component](/components/columns) to create a resp
 
 <Columns cols={3}>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
 </Columns>
 
 ```mdx Grid layout example
 <Columns cols={3}>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
   <Tile href="/components/accordions" title="Accordion" description="Two variants">
-    <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
-    <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
+    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
+    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
   </Tile>
 </Columns>
 ```