Full sized screen capture with annotations.

Back to index

Accessibility recommendations

ID WCAG Recommendations
09.01 1.3.1 Section Headings and Semantic Markup
  • "All FAQs" should be a secondary level header. The sub-titles further down should be marked up in as a third level headings.
09.02

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.
09.03

3.4

2.4.3

  • Link Context
    • The “more” link may need to have a title attribute or aria-label = "More FAQs" in order for the link to make sense out of context.
  • 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.
    • See http://snook.ca/technical/colour_contrast/colour.html
09.04

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.

Note

Greyed out indication.Indicates page components or parts of pages that are either out of scope or have already been covered in a previous comp.