02. Comp Accessibility Review - Student Services Health Services Landing

2.4.1

4.1.2

• Bypass Blocks and Name, Role Value
  • The breadcrumbs should be inside a landmark role of navigation with aria-label =" breadcrumbs".

4.1.2

2.4.7

1.1.1

• Name, Role, Value
  • If the FAQs are plain links then ignore this section, however if they have text that becomes visible when clicked then the state information of each FAQs should be in the mark up. If CSS classes  are used to toggle the visible display, that information should be semantically available by using aria-hidden and aria-expanded. 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
• Focus Order:
• The FAQ questions are active elements but if they are not marked up as links then they will do not receive focus in the tabbing order .If necessary, use tabindex to put each FAQ in the tabbing order. See http://www.w3.org/TR/wai-aria-practices for more information.
• Decorative 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" or alt = "collapsed" ) However, if the arrows are the same regardless of what link is selected then the images are only decorative images and should be integrated through CSS, or if clickable as part of the link, the img element must have an empty alt text (alt=""). If the decorative icon is integrated in HTML and clickable, then it must be part of the same link.

4.1.2

2.4.7

• Name, Role, Value
  • If CSS classes  are used to toggle the visible display, that information should be semantically available by using aria-hidden and aria-expanded. Toggle aria-expanded = " false and aria-hidden="true" when text is hidden and to aria-expanded (on the link) to "true and aria-hidden = ”false” when text is shown. http://www.w3.org/TR/wai-aria-practices
• Focus Order
  • If the visual display is toggled when pressing on text make sure all active elements receive focus in the tabbing order .If necessary, use tabindex to put each FAQ in the tabbing order

1.4.5

1.4.3

2.4.7

• Name, Role Value
  • Use and HTML button or a link with role="button". For example: <a href="foo.html" role="button">Meat our staff</a>
• No Images of Text (Creative)

• Use true text and not images of text. The only text that should be embedded in images is "logotext".
• Color Contrast (Creative)
  • The color contrast luminosity ration for large text (18 point or 14 point bold) required is 3 to 1. As designers are picking colors, consider using these tools to test color contrast http://snook.ca/technical/colour_contrast/colour.html