09. Comp Accessibility Review - Student Services Health FAQs Landing

1.3.1

1.3.1

2.4.3

1.1.1

4.1.2

1.1.1

2.1.1

• Semantic Mark Up
  • List of links should be marked up as unordered lists.
  • The links on the left of the panel control the content of the right hand side of the panel. The list container on the left should use the aria-controls attribute to explicitly show this relationship. See aria-controls.
• Focus and Reading Order
  • Make sure the reading order (source code order) of the elements in this section are logical and convey the same meaning as the visual reading order of the section.
• Role Name Value (States)
  • If CSS classes  are used to toggle the visible display, that information should be semantically available by using aria-hidden. Toggle aria-hidden="true" when text is hidden and to ”false” when text is shown. Use aria-expanded on the link. See http://www.w3.org/TR/wai-aria-practices
  • You should also use ARIA to make the information about the state of the link accessible to assistive technology by using aria-expanded. Toggle aria-expanded="true" when sub menu is shown and to ”false” when the sub menu is not shown.
• Images
• If the arrow icons to the left of these menu links show if the link is collapsed or expanded, then their alt text should state that information. (E.g. alt="expanded" ).
• Keyboard Accessibility
  • The links on the left must be expandable via the keyboard and not just via a mouse. You can use the focus() or blur() events to support this. See http://accessibility.athena-ict.com/aria/Javascript-jquery-accessibility.shtml for details.
  • If the links are not standard HTML anchors, tabindex may be needed so that the links will also support focus and be in the page tabbing order. See http://www.w3.org/TR/wai-aria-practices.

1.3.1

2.4.3

1.3.1

2.4.3

1.1.1

4.1.2

1.1.1

2.1.1

• Section Headings
  • The sub-titles be marked up in as a third level headings
• Color Contrast (Creative)
  • The Aqua color on white background is low contrast. T he color contrast lumonisity ration between the font color and the background color needs to be at least 4.5 to 1 for text. The exception is for large text (18 point or 14 point bold) to only be required to have a color contrast ratio of 3 to 1.
• Semantic Mark Up
  • List of links should be marked up as unordered lists.
• Focus and Reading Order
  • Make sure the reading order (source code order) of the elements in this section are logical and convey the same meaning as the visual reading order of the section.
• Role Name Value (States)
  • If CSS classes  are used to toggle the visible display, that information should be semantically available by using aria-hidden. Toggle aria-hidden="true" when text is hidden and to ”false” when text is shown. Use aria-expanded on the link. See http://www.w3.org/TR/wai-aria-practices
  • You should also use ARIA to make the information about the state of the link accessible to assistive technology by using aria-expanded. Toggle aria-expanded="true" when sub menu is shown and to ”false” when the sub menu is not shown.
• Images
• If the arrow icons seem to be just decorative. In that case the alt text should be blank alt = "". However if these icons show if the link is collapsed or expanded, then their alt text should state that information. (E.g. alt="expanded" ).
• Keyboard Accessibility
  • If the links are activated using scripts check that they are expandable via the keyboard and not just via a mouse. You can use the focus() or blur() events to support this. See http://accessibility.athena-ict.com/aria/Javascript-jquery-accessibility.shtml for details.
  • If the links are not standard HTML anchors, tabindex may be needed so that the links will also support focus and be in the page tabbing order. See See http://www.w3.org/TR/wai-aria-practices.