added alt tag

Author: nickbristow

storybook/src/assets/images/find-dhs-form.jpg

@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as AltTagStories from './AltTagDemo.stories';
+
+<Meta of={AltTagStories} title="Images/Alt Tags" />
+
+# Alt Tag Best Practices
+
+Alt tags are essential for making images accessible to screen readers and when images fail to load. Here are some key guidelines:
+
+- Use empty alt tags (`alt=""`) for decorative images
+- Don't use phrases like "Image of" or "Picture of" - screen readers already announce that it's an image
+- Be concise but descriptive
+- Focus on the purpose and content of the image
+
+## Examples
+
+### Decorative Image
+
+When an image is purely decorative and doesn't convey meaningful content, use an empty alt tag:
+
+<Story name="Examples" args={{ altType: 'decorative' }} />
+
+```html
+<img src="../assets/find-dhs-form.png" alt="" />
+```
+
+### Descriptive Image
+
+When an image contains important information, provide a clear, concise description:
+
+<Story name="Examples" args={{ altType: 'descriptive' }} />
+
+```html
+<img
+  src="../assets/find-dhs-form.png"
+  alt="Hand holding a pen writing on a printed piece of paper"
+/>
+```

storybook/src/stories/AltTagDemo.mdx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AltTagDemo } from './AltTagDemo';
+
+const meta = {
+  title: 'Images/Alt Tags',
+  component: AltTagDemo,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    altType: {
+      control: 'radio',
+      options: ['decorative', 'descriptive'],
+      description: 'Type of alt tag to demonstrate',
+    },
+  },
+} satisfies Meta<typeof AltTagDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Examples: Story = {
+  args: {
+    altType: 'descriptive',
+  },
+};

storybook/src/stories/AltTagDemo.stories.tsx

@@ -0,0 +1,36 @@
+import findDhsForm from '../assets/images/find-dhs-form.jpg';
+
+interface AltTagDemoProps {
+  altType: 'decorative' | 'descriptive';
+}
+
+export const AltTagDemo = ({ altType }: AltTagDemoProps) => {
+  if (altType === 'decorative') {
+    return (
+      <div>
+        <img
+          src={findDhsForm}
+          alt=""
+          style={{ width: 'auto', height: '200px' }}
+        />
+        <p>
+          This decorative image uses an empty alt tag: <code>alt=""</code>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <img
+        src={findDhsForm}
+        alt="Screenshot of DHS form search interface showing search filters and results"
+        style={{ width: 'auto', height: '200px' }}
+      />
+      <p>
+        This descriptive image uses a meaningful alt tag that describes the
+        content
+      </p>
+    </div>
+  );
+};

storybook/src/stories/AltTagDemo.tsx

@@ -2,20 +2,34 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ColorContrastDemo } from './ColorContrastDemo';
 
 const meta = {
-  title: 'Example/Color Contrast',
+  title: 'Color/Color Contrast',
   component: ColorContrastDemo,
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
   argTypes: {
     textColor: {
       control: { type: 'color' },
       description: 'Color of the headings',
+      name: 'Text Color',
     },
     backgroundColor: {
       control: { type: 'color' },
       description: 'Background color of the container',
+      name: 'Background Color',
+    },
+    paragraphFontSize: {
+      control: { type: 'number', min: 8, max: 96, step: 1 },
+      description: 'Font size of the paragraph',
+      name: 'Paragraph Font Size',
+      defaultValue: 16,
+    },
+    paragraphFontWeight: {
+      control: { type: 'number' },
+      description: 'Font weight of the paragraph',
+      name: 'Paragraph Font Weight',
+      defaultValue: 400,
     },
   },
 } satisfies Meta<typeof ColorContrastDemo>;
@@ -27,5 +41,7 @@ export const Default: Story = {
   args: {
     textColor: '#000000',
     backgroundColor: '#ffffff',
+    paragraphFontSize: 16,
+    paragraphFontWeight: 400,
   },
 };

storybook/src/stories/Button.stories.ts

@@ -37,6 +37,8 @@ const getContrastRatio = (color1: string, color2: string) => {
 interface ColorContrastDemoProps {
   textColor: string;
   backgroundColor: string;
+  paragraphFontSize: number;
+  paragraphFontWeight: number;
 }
 
 // Add new component for contrast info
@@ -92,9 +94,16 @@ const ContrastInfo = ({
       </div>
       {fontSize && weight && (
         <div>
-          Font size: <strong>{fontSize.em}</strong>em /{' '}
-          <strong>{fontSize.rem}</strong>rem / <strong>{fontSize.px}</strong>px
-          • Font weight: <strong>{weight}</strong>
+          <ul>
+            <li>
+              Font size: <strong>{fontSize.em}</strong>em /{' '}
+              <strong>{fontSize.rem}</strong>rem /{' '}
+              <strong>{fontSize.px}</strong>px
+            </li>
+            <li>
+              Font weight: <strong>{weight}</strong>
+            </li>
+          </ul>
         </div>
       )}
     </p>
@@ -104,6 +113,8 @@ const ContrastInfo = ({
 export const ColorContrastDemo = ({
   textColor = '#000000',
   backgroundColor = '#ffffff',
+  paragraphFontSize = 16,
+  paragraphFontWeight = 400,
 }: ColorContrastDemoProps) => {
   const containerStyle = {
     padding: '20px',
@@ -244,7 +255,13 @@ export const ColorContrastDemo = ({
             <hr />
           </div>
         ))}
-        <p style={headingStyle}>
+        <p
+          style={{
+            ...headingStyle,
+            fontSize: `${paragraphFontSize}px`,
+            fontWeight: `${paragraphFontWeight}`,
+          }}
+        >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -255,9 +272,18 @@ export const ColorContrastDemo = ({
         </p>
         <ContrastInfo
           contrastRatio={contrastRatio}
-          requiredRatio={4.5}
-          fontSize={{ em: 1, rem: 1, px: 16 }}
-          weight={400}
+          requiredRatio={
+            (paragraphFontSize > 18.66 && paragraphFontWeight >= 700) ||
+            paragraphFontSize >= 24
+              ? 3
+              : 4.5
+          }
+          fontSize={{
+            em: paragraphFontSize / 16,
+            rem: paragraphFontSize / 16,
+            px: paragraphFontSize,
+          }}
+          weight={paragraphFontWeight}
         />
       </div>
     </>