<commit_before>---
layout: page
title: Accessibility and Testing with VoiceOver OS (Mac)
---

VoiceOver is the defualt screen reader on **Mac** desktop devices. 

It's recommended to use the **latest OS** that you have access to. Test with **Safari**.

**Not sure how to use VoiceOver**? Watch [Screen Reader Basics: VoiceOver -- A11ycasts](https://www.youtube.com/watch?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&params=OAFIAVgF&v=5R-6WvAihms&mode=NORMAL&app=desktop) and complete the on device tutorial, go to 'System Preferences', then 'Accessibility', then 'VoiceOver'. Then 'Open VoiceOver Training...'. 

## What should I test?
0. Test the feature by reading every element.
1. Test the feature by reading headers.
2. Test the feature by tabbing through links.
1. Test the feature by reading landmarks.
2. Test the feature for use of ARIA.

## Testing steps

The accessibility acceptance criteria can be used for additional manual testing steps on device, this is written by the [Business Analyst](accessibility-news-and-business-analysts) and part of their checklist.

0. Open **Safari**.
1. Go to the **testing url**.
2. **Turn VoiceOver on**, with shortcut keys 'CMD + F5'. 
3. Navigate to the last element in the feature before the feature to be tested, this will ensure you don't miss any visually hidden/off screen text at the beginning of the feature. Then use 'VO + Right arrow' to read **through each element** in the feature (if you need to go back, 'VO + Left arrow'). 
- Is the all the content read out and make sense? 
- Is the content read out in a logical order following the visual order? 
- Is any content read out more than once?
- Is any visually hidden/off screen text read out, such as for icons?
- Do images have alt text?
- Are there any empty key presses? e.g. You press the keys and you don't hear anything. If so, this maybe a bug.
4. Open the 'Rotor' menu ('VO + U'), then use the 'Right/Left arrow' keys to navigate to the list of '**Headings**', then use the 'Down/Up arrow' keys to read through all the headers in the feature.
- Are all headings read out and in a logical order? 
- Not sure what headings the feature should read out? You can use a desktop browser tool such as the [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) add-on for Chrome or Firefox. (Under ‘Information’ select ‘View Document Outline’ - This will show you the heading structure for the selected page.) 
5. Navigate to the end of the feature before the feature to be tested, then use the tab key to read out all '**Links**' in the feature. Are all links read out? Is any content that is not a link read out?
6. Open the 'Rotor' menu ('VO + U'), then use the 'Right/Left arrow' keys to navigate to the list of '**Landmarks**', then use the 'Down/Up arrow' keys to read through all the landmarks in the feature.
- Are all landmarks read out? 
- Not sure what landmarks are? See [W3C ARIA Landmarks Examples](https://w3c.github.io/aria-practices/examples/landmarks/index.html). Not sure what landmarks the feature should read out? See the accessibility acceptance criteria.
7. **ARIA** can be used simply to add landmarks/regions/labels to a page or more advanced usage can help with dynmaic content such as page updates or advanced user interface controls such as tabs. Use 'VO + Right arrow' to move through the feature checking that all ARIA is being acknowledge/read out correctly. See the accessibility acceptance criteria for details on what should be read out. Still not sure what should be acknowledged/read out? Ask an Accessiblity Champion.

## Shortcut keys
You will need to use the **VoiceOver modifier (VO) key ** 'CTRL + OPTION/ALT' in combination with other keys for keyboard shortcuts.

0. **Turn VoiceOver on/off**, either with the shortcut keys 'CMD + F5' or go to 'System Preferences', then 'Accessibility', then 'VoiceOver', here you can 'Enable VoiceOver'. 
1. **Move forwards through every page element**: 'VO + Right arrow'<commit_msg>fix bold text<commit_after>---
layout: page
title: Accessibility and Testing with VoiceOver OS (Mac)
---

VoiceOver is the defualt screen reader on **Mac** desktop devices. 

It's recommended to use the **latest OS** that you have access to. Test with **Safari**.

**Not sure how to use VoiceOver**? Watch [Screen Reader Basics: VoiceOver -- A11ycasts](https://www.youtube.com/watch?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&params=OAFIAVgF&v=5R-6WvAihms&mode=NORMAL&app=desktop) and complete the on device tutorial, go to 'System Preferences', then 'Accessibility', then 'VoiceOver'. Then 'Open VoiceOver Training...'. 

## What should I test?
0. Test the feature by reading every element.
1. Test the feature by reading headers.
2. Test the feature by tabbing through links.
1. Test the feature by reading landmarks.
2. Test the feature for use of ARIA.

## Testing steps

The accessibility acceptance criteria can be used for additional manual testing steps on device, this is written by the [Business Analyst](accessibility-news-and-business-analysts) and part of their checklist.

0. Open **Safari**.
1. Go to the **testing url**.
2. **Turn VoiceOver on**, with shortcut keys 'CMD + F5'. 
3. Navigate to the last element in the feature before the feature to be tested, this will ensure you don't miss any visually hidden/off screen text at the beginning of the feature. Then use 'VO + Right arrow' to read **through each element** in the feature (if you need to go back, 'VO + Left arrow'). 
- Is the all the content read out and make sense? 
- Is the content read out in a logical order following the visual order? 
- Is any content read out more than once?
- Is any visually hidden/off screen text read out, such as for icons?
- Do images have alt text?
- Are there any empty key presses? e.g. You press the keys and you don't hear anything. If so, this maybe a bug.
4. Open the 'Rotor' menu ('VO + U'), then use the 'Right/Left arrow' keys to navigate to the list of '**Headings**', then use the 'Down/Up arrow' keys to read through all the headers in the feature.
- Are all headings read out and in a logical order? 
- Not sure what headings the feature should read out? You can use a desktop browser tool such as the [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) add-on for Chrome or Firefox. (Under ‘Information’ select ‘View Document Outline’ - This will show you the heading structure for the selected page.) 
5. Navigate to the end of the feature before the feature to be tested, then use the tab key to read out all '**Links**' in the feature. Are all links read out? Is any content that is not a link read out?
6. Open the 'Rotor' menu ('VO + U'), then use the 'Right/Left arrow' keys to navigate to the list of '**Landmarks**', then use the 'Down/Up arrow' keys to read through all the landmarks in the feature.
- Are all landmarks read out? 
- Not sure what landmarks are? See [W3C ARIA Landmarks Examples](https://w3c.github.io/aria-practices/examples/landmarks/index.html). Not sure what landmarks the feature should read out? See the accessibility acceptance criteria.
7. **ARIA** can be used simply to add landmarks/regions/labels to a page or more advanced usage can help with dynmaic content such as page updates or advanced user interface controls such as tabs. Use 'VO + Right arrow' to move through the feature checking that all ARIA is being acknowledge/read out correctly. See the accessibility acceptance criteria for details on what should be read out. Still not sure what should be acknowledged/read out? Ask an Accessiblity Champion.

## Shortcut keys
You will need to use the **VoiceOver modifier (VO) key** 'CTRL + OPTION/ALT' in combination with other keys for keyboard shortcuts.

0. **Turn VoiceOver on/off**, either with the shortcut keys 'CMD + F5' or go to 'System Preferences', then 'Accessibility', then 'VoiceOver', here you can 'Enable VoiceOver'. 
1. **Move forwards through every page element**: 'VO + Right arrow'
{'fraction_non_alphanumeric': 0.08160218932703073, 'fraction_numerical': 0.00671725338972509, 'mean_word_length': 4.275590551181103, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4144290', 'n_tokens_mistral': 2259, 'n_tokens_neox': 2168, 'n_words': 1211}