Comp Accessibility Review - Student Services Health A to Z Service Listing R3

Full sized screen capture with annotations.

Back to index

Accessibility recommendations

ID	WCAG	Recommendations
16.01	3.3.2 1.1.1 2.4.7 2.1.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. Images Make sure clickable images have alt text that show their function , such as alt ="A". Focus Visible Visual focus must be evident on any element that you can tab to (like the letter buttons). Test by tabbing through the page and confirm that you can visually tell where the focus is each time you tab. .Keyboard Accessibility 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. Keyboard Accessibility The links must be selectable via the keyboard and not just via a mouse. If you are using Jquery You can use the focus() or blur() events to support this. See http://accessibility.athena-ict.com/aria/Javascript-jquery-accessibility.shtml for details. Keyboard / Name, Role, Value Make sure the state of each button is available to screen readers such as aria-selected =" true" or Aria selected = "false. Make sure the ARIA state toggles when the state changes. Make sure the role of each button is available If they are not HTML button, use role = "button". Grouping relationships Group related controls that belong together in a fieldset 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
16.02	1.3.1 2.4.3	Section Headings and Semantic Markup The letter (such as "A" ) should be a secondary level header. The sub-titles further down should 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 luminosity 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

WCAG

Recommendations

16.01

3.3.2

1.1.1

2.4.7

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.
Images
- Make sure clickable images have alt text that show their function , such as alt ="A".
Focus Visible
- Visual focus must be evident on any element that you can tab to (like the letter buttons). Test by tabbing through the page and confirm that you can visually tell where the focus is each time you tab.
.Keyboard Accessibility
- 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.
Keyboard Accessibility
- The links must be selectable via the keyboard and not just via a mouse. If you are using Jquery You can use the focus() or blur() events to support this. See http://accessibility.athena-ict.com/aria/Javascript-jquery-accessibility.shtml for details.

Keyboard / Name, Role, Value
- Make sure the state of each button is available to screen readers such as aria-selected =" true" or Aria selected = "false. Make sure the ARIA state toggles when the state changes.
- Make sure the role of each button is available If they are not HTML button, use role = "button".
Grouping relationships

Group related controls that belong together in a fieldset 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

16.02

1.3.1

2.4.3

Section Headings and Semantic Markup

The letter (such as "A" ) should be a secondary level header. The sub-titles further down should 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 luminosity 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

Note

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