Comp Accessibility Review -Student Services Health Directory

Full sized screen capture with annotations.

Back to index

Accessibility recommendations

ID	WCAG	Recommendations
13.01	3.3.2 3.2.1 2.1.1 4.1.2 1.3.1	Labels Make sure a label is explicitly associated with the combo box, other controls using the for and id attributes. If there is no label text you can add a label for screen readers using the aria-label attribute. On Input Inform users about what will happen when an option is chosen from this drop down menu, or add a "go" button like the one located after the search (to allow screen reader users complete control over this option). Keyboard / Name, Role, Value "Faux" form controls are often very difficult for accessibility because their roles and names are not always conveyed to screen readers and other assistive technologies. If the select or checkboxes built with CSS and JavaScript instead of using a real select element (much more likely to be accessible), use ARIA to make sure it is fully operable and compatible with keyboards and assistive technologies. See http://www.w3.org/TR/wai-aria-practices for more information. Grouping relationships Group related controls that belong together in a fieldsets with a legend. (see http://www.w3.org/TR/WCAG20-TECHS/H71.html) Also use the aria-controls attribute to show that the form with controls the search results area
13.02	1.3.1 1.1.1 1.3.1 3.2.2	Section Headings and Semantic Markup The staffs names should be a secondary level header. The sub-titles further down should be marked up in as a third level headings. Images Non clickable images with pictures should have a short description as alt text, such as alt ="Dr Burg". Purely decorative images must have an empty alt text (alt=""). Semantic Mark Up The text in bold should be marked as emphasized text using heading, strong or <em> tags (not spans or bold tags). Style with css if needed. New Windows and Tabs If the links open a new window or tab, the link title to let the user know it will open a new window or tab.

WCAG

Recommendations

13.01

3.3.2

3.2.1

2.1.1

4.1.2

1.3.1

Labels
- Make sure a label is explicitly associated with the combo box, other controls using the for and id attributes. If there is no label text you can add a label for screen readers using the aria-label attribute.
On Input
- Inform users about what will happen when an option is chosen from this drop down menu, or add a "go" button like the one located after the search (to allow screen reader users complete control over this option).

Keyboard / Name, Role, Value
- "Faux" form controls are often very difficult for accessibility because their roles and names are not always conveyed to screen readers and other assistive technologies. If the select or checkboxes built with CSS and JavaScript instead of using a real select element (much more likely to be accessible), use ARIA to make sure it is fully operable and compatible with keyboards and assistive technologies. See http://www.w3.org/TR/wai-aria-practices for more information.
Grouping relationships

Group related controls that belong together in a fieldsets with a legend. (see http://www.w3.org/TR/WCAG20-TECHS/H71.html)
Also use the aria-controls attribute to show that the form with controls the search results area

13.02

Section Headings and Semantic Markup

The staffs names should be a secondary level header. The sub-titles further down should be marked up in as a third level headings.
Images
- Non clickable images with pictures should have a short description as alt text, such as alt ="Dr Burg". Purely decorative images must have an empty alt text (alt="").
Semantic Mark Up
- The text in bold should be marked as emphasized text using heading, strong or <em> tags (not spans or bold tags).
  Style with css if needed.
New Windows and Tabs
- If the links open a new window or tab, the link title to let the user know it will open a new window or tab.

Note

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