Accessibility Audit

A

1. Screen reader issues ( Refer to the demo video)

   1. Annotation is missing. for eg, Headings, logos, and images must be coded semantically as <h1> tags

   2. The contents of the page are not appropriately named. For eg, page title is named as ‘Title' instead of ‘Seeding rate calculator’ and the logo is named as SCCC (abbreviation) instead of 'Southern cover crop council logo’ in HTML code.

   3. Parts of the navigation bar are listed as buttons, even if they cannot be clicked or are disabled.

• Add relevant annotations for content such as headings, subheadings, notes, decorative media, images, and other media, etc.
  Example of Annotation in HTML: <h1>Seeding rate calculator</h1; <h2>Tell us about your planting site</h2>

• The names of all components across the screen should be properly named and any empty component should be removed so as to make the screen easily readable by a screen reader.

2. Keyboard navigation

• The content on the page is currently not navigable by only the keyboard.

• The navigation across the page should be navigable entirely by keyboard keys.

• The sequence of keyboard navigation should be of logical navigational order on the page.

Open

,.

3. Skip to content

• There is a need to provide a way to skip to the main content of the page.
  (Many users of assistive technology are only able to experience content sequentially - that is, they must step through each part of the page, one part at a time.Most web pages have a header containing branding and navigation on every page. Stepping through this repetitive part of the page can be hugely frustrating for users of assistive technology.)

Methods

• The skip to content link is usually hidden from users unless selected with an assistive tech, so it doesn't need to compromise the look of your page.

  Alternatively, you can use the <main> HTML landmark: <main>
  <h1>Welcome to this page</h1>

• If the page has less than 500 visible characters, it does not require a "skip to content" link.

• The link must appear before 500 visible characters of text in the page.

AA

4. Contrast ratio

• The contrast ratio for small text(10.5 pt) does not meet the required 4.5:1 ratio.

• Increase text contrast a lot to make it a 4.5:1 ratio.

5. Insufficient Form Control Contrast

Open

• Form controls must appear sufficiently distinct from their surroundings, so that people with visual impairments are still able to clearly see them.

• Either the border or the form control itself must have a 3:1 colour contrast with the surrounding area.

6. Interactive Component Size

• Buttons on the page are not large enough to be easily used by people with motor impairments.

• The size of the target for pointer inputs should be at least 24 by 24 CSS pixels. Ensure targets meet a minimum size or have sufficient spacing around them. (explained in image below)

Open

Open

A

1. Screen reader issues ( Refer to the demo video)

   1. Annotation is missing. for eg, Headings, logos, and images must be coded semantically as <h1> tags

   2. The contents of the page are not appropriately named. For eg, page title is missing and the logo is named as button instead of 'Precision Sustainable Agriculture logo’ in HTML code.

   3. Parts of the navigation bar are listed as buttons, even if they cannot be clicked or are disabled.

   4. Every Button is coded with three annotation, a button, a paragraph and creates confusion about its function.

2. Keyboard navigation

• The content on the page is currently not navigable by only the keyboard.

3. Skip to content

• There is a need to provide a way to skip to the main content of the page.
  (Many users of assistive technology are only able to experience content sequentially - that is, they must step through each part of the page, one part at a time.Most web pages have a header containing branding and navigation on every page. Stepping through this repetitive part of the page can be hugely frustrating for users of assistive technology.)

Methods

• The skip to content link is usually hidden from users unless selected with an assistive tech, so it doesn't need to compromise the look of your page.

  Alternatively, you can use the <main> HTML landmark: <main>
  <h1>Welcome to this page</h1>

• If the page has less than 500 visible characters, it does not require a "skip to content" link.

• The link must appear before 500 visible characters of text in the page.

AA

4. Contrast ratio

• The contrast ratio for small text(10.5 point) does not meet the required 4:5:1 ratio.

5. Interactive Component Size

• Buttons on the page are not large enough to be easily used by people with motor impairments.

Space around the button should be at least 24*24 px

A

1. Screen reader issues ( Refer to the demo video)

   1. Proper annotation is missing. for Headings, buttons, page titles and links.

   2. Parts of the navigation bar are listed as buttons, even if they cannot be clicked or are disabled.

   3. Every Button is coded with multiple annotation, a button, a paragraph and creates confusion about its function.

   4. Annotated words have space between them which is causing improper pronounciations in the screen reader, for eg “s ee ds”

2. Keyboard navigation

• The content on the page is currently not navigable by only the keyboard.

3. Skip to content

• There is a need to provide a way to skip to the main content of the page.
  (Many users of assistive technology are only able to experience content sequentially - that is, they must step through each part of the page, one part at a time.Most web pages have a header containing branding and navigation on every page. Stepping through this repetitive part of the page can be hugely frustrating for users of assistive technology.)

Methods

• The skip to content link is usually hidden from users unless selected with an assistive tech, so it doesn't need to compromise the look of your page.

  Alternatively, you can use the <main> HTML landmark: <main>
  <h1>Welcome to this page</h1>

• If the page has less than 500 visible characters, it does not require a "skip to content" link.

• The link must appear before 500 visible characters of text in the page.

AA

4. Contrast ratio

• The contrast ratio for small text(10.5 point) does not meet the required 4:5:1 ratio.

A

1. Screen reader issues ( Refer to the demo video)

   1. Duplicate ID for headings (see image)

   2. Heading of the page is annotated as a link.

2. Keyboard navigation

• The content on the page is currently not navigable by only the keyboard.

3. Skip to content

• There is a need to provide a way to skip to the main content of the page.
  (Many users of assistive technology are only able to experience content sequentially - that is, they must step through each part of the page, one part at a time.Most web pages have a header containing branding and navigation on every page. Stepping through this repetitive part of the page can be hugely frustrating for users of assistive technology.)

Methods

• The skip to content link is usually hidden from users unless selected with an assistive tech, so it doesn't need to compromise the look of your page.

  Alternatively, you can use the <main> HTML landmark: <main>
  <h1>Welcome to this page</h1>

• If the page has less than 500 visible characters, it does not require a "skip to content" link.

• The link must appear before 500 visible characters of text in the page.

A

1. Screen reader issues ( Refer to the demo video)

   1. Empty and incorrect options show up in the screen reader, like Option:grass, option:legumes, empty input box and links, in the beginning of each page.

   2. Content being skipped over: A few input boxes and their headings are being skipped over in the reader.

   3. Incorrect labeling of navigation elements as Link.

2. Keyboard navigation

• The content on the page is currently not navigable by only the keyboard.

• No inputs can be accessed by the keyboard currently.

3. Skip to content

• There is a need to provide a way to skip to the main content of the page.
  (Many users of assistive technology are only able to experience content sequentially - that is, they must step through each part of the page, one part at a time.Most web pages have a header containing branding and navigation on every page. Stepping through this repetitive part of the page can be hugely frustrating for users of assistive technology.)

Methods

• The skip to content link is usually hidden from users unless selected with an assistive tech, so it doesn't need to compromise the look of your page.

  Alternatively, you can use the <main> HTML landmark: <main>
  <h1>Welcome to this page</h1>

• If the page has less than 500 visible characters, it does not require a "skip to content" link.

• The link must appear before 500 visible characters of text in the page.

AA

4. Contrast ratio

• The contrast ratio for small text(10.5 point) does not meet the required 4:5:1 ratio.