| title |
before |
Open a website to test |
Let’s use the NASA website for our testing today; so go ahead and open the website in another tab:
### [Open NASA’s website ➔]( https://www.nasa.gov/)
|
|
| title |
before |
Increase & decrease the text size |
**Not every human being needs the same font-size when viewing a website.** That’s exactly why we use `rem` and other relative measurements. *We need to confirm our website works with different font sizes.*
## Use Firefox
Firefox still has the best text size adjustment capabilities. The other browsers use a “zooming” system—where Firefox will just bump the font-size up and down for us.
But we need to enable the functionality:
*In the menu, go to `View > Zoom` and check `Zoom Text Only`*
## Increase by two increments
On NASA’s website press `⌘+` twice. This will enlarge the text two stops. This simulates a user setting the default font-size of their browser to a larger size than `16px`
## What problems might be found?
Scroll through the website and look for these possible problems:
- [ ] Is the layout still functional?
- [ ] Can all the text be read?
- [ ] Is there any overlapping elements?
- [ ] Are there any text breaking out of boxes?
*You may find that different media queries trigger as the font-size gets larger—that’s exactly the reason why we use `em`-based media queries, so the layout adapts to the available content space.*
## Decrease by two increments
Now we want to test the opposite direction: making the text smaller.
1. First, set the font-size back to default with `⌘0`
2. Decrease the font-size by pressing `⌘-` twice.
## What problems might be found?
Scroll through the website and look for these possible problems:
- [ ] Is the layout still functional?
- [ ] Can all the text be read?
- [ ] Are the hit areas of links still big enough to target properly by a non-professional mouse user?
|
|
| title |
before |
Test with a screen magnifier |
**Some users need to have very enlarged and focused text to be able to discern the website.** *We need to confirm that our website works properly with a screen magnifier.*
## Enabled MacOS’s screen magnification tools
MacOS has a screen magnifier built into the operating system—let’s just make sure it’s enabled.
Go to `System Preferences > Accessibility`. On the left list go to `Zoom`.
*I like to make sure “Use keyboard shortcuts for zoom” is checked.*
Now we can use `⌘⌥+` and `⌘⌥-` to zoom the screen in and out. As we move around with our mouse the screen will move with use to magnify small parts of the screen at a time.
## What problems might be found?
Navigate through the magnified website and look for these possible problems:
- [ ] Hover boxes that disappear when you try to move the mouse onto them to read the text
- [ ] Content that becomes covered when hover events are triggered
- [ ] Results of actions that are not within the vicinity of the mouse
|
|
| title |
before |
Check keyboard access |
**Not everybody can use a mouse to access our websites.** We can test keyboard accessibility by using only the keyboard to navigate our own websites. *We need to confirm that we’re able to access every piece on content & every piece of functionality using only the keyboard.*
## Press `Tab` to navigate
In Chrome, Firefox, or Opera, (Safari isn’t the best choice for this test) navigate around your website using the `Tab` key. You should see a focus rectangle highlight the different parts of your website as you move around.
Try activating elements with `Return`, `Space`, or the arrow keys.
## What problems might be found?
Tab through the website and look for these possible problems:
- [ ] Links & buttons that are skipped with pressing Tab
- [ ] The focus rectangle becoming invisible or hard to distinguish
- [ ] Form controls that are inaccessible
- [ ] Buttons & controls that can’t be activated
- [ ] Hover functionality that isn’t activated when the element is focused with the keyboard
|
|
| title |
before |
Disable CSS |
**Not every human can see our website and not every person chooses to view our website with the design intact.**
Disabling CSS helps us understand a few different things:
1. The order of our content and how that affects a screen reader,
2. The available text content of our site,
3. How our website will be presented in the text-only mode of some browsers.
*Some users may choose to disable the CSS or use a text-only browser because they are susceptible to seizures and want to avoid any flashing.*
## Use the Web Developer Toolbar
You should have the Web Developer Toolbar installed already, if not you can get it here: [**Install the Web Developer Toolbar**]( http://chrispederick.com/work/web-developer/).
*You can use any browser you wish for this test—they’ll all function equally.*
1. Click the “gear” icon that represents the Web Developer toolbar.
2. Click the “CSS” tab.
3. Click “Disable All Styles”.
## What problems might be found?
Scroll through the website and look for these possible problems:
- [ ] Poor hierarchy of headings or missing headings
- [ ] Confusing order of content
- [ ] Content that’s confusing without design or imagery
- [ ] Improperly labeled form fields
- [ ] Jumbled bunches of text
|
|
| title |
before |
Replace images with alt attributes |
**Not everybody can see the images on our websites.** We can help ourselves understand how a page will be read by a screen reader by replacing the images with their `alt` attributes. *We need to confirm our website makes logical sense and is still usable without images.*
## Use the Web Developer Toolbar
Again, we’ll use the Web Developer Toolbar to peek at the alt attributes on our pages.
*You can use any browser you wish for this test—they’ll all function equally.*
1. Click the “gear” icon that represents the Web Developer toolbar.
2. Click the “Images” tab.
3. Click “Replace Images with Alt Attributes”.
## What problems might be found?
Scroll through the website and look for these possible problems:
- [ ] Important information that’s missing
- [ ] Confusing information because there’s no text descriptions
- [ ] Text that gets lost because the images are gone and the background color is showing instead
- [ ] Broken layouts because they depended on the image taking up a certain amount of space
|
|
| title |
before |
Check colour contrast |
**Not every human is able to see a full range of colours and may have troubles detecting the different between certain colours—red-green deficiency is the most common.** We can simulate colour blindness using software tools that give us an idea of what our website might look like. *We must confirm that everything on the website still makes sense under simulated colour blindness.*
## Use Sim Daltonism
We’re going to use [Sim Daltonism]( https://michelf.ca/projects/sim-daltonism/) to simulate colour blindness. You should already have this tool on your computer, if you don’t go download it and install it.
Sim Daltonism creates a window on our screen that changes the colours below to simulate colour blindness. Try out all the different types of colour blindness on your website because they all present slightly different problems.
## What problems might be found?
Move the Sim Daltonism window over every part of your website website and look for these possible problems:
- [ ] That there aren’t interface elements that depend on colour to be understood, like error messages
- [ ] That there’s sufficient contrast between the text colour and the background colours
- [ ] That elements aren’t disappearing because the colours are too similar to each other
- [ ] That all the text is still legible and understandable
|
|
| title |
before |
Run through Chrome Accessibility Tools |
The Chrome Accessibility Tools don’t look for one single problem they search the code for common problems that might be found and flag them. *Markbot uses the same tools internally for checking accessibility.*
## Open the Chrome Developer Tools
Open Chrome and open the Developer Tools by pressing `⌘⌥I`. Once in the Developer Tools go to the “Audits” tab.
Uncheck all the audits except the accessibility audit and run.
You should see results flagging different problems on the website. You can click into the problems and get more information.
## What problems might be found?
The Chrome Accessibility audits will show a whole bunch of different problems that we may have caught already and some we may not have noticed:
- [ ] Colour contrast between text and background
- [ ] Missing ARIA landmark roles
- [ ] Links that point to different locations but have the same text
- [ ] Links that are missing some textual information
- [ ] Non-unique ID attributes
- [ ] Form fields missing associated labels
- [ ] Groups of checkboxes and radio buttons outside `<fieldset>` tags
- [ ] Auto-playing audio & video
- [ ] Missing captions for audio & video
- [ ] Improperly coded tables
- [ ] Proper language coding on the `<html>` tag
- [ ] Proper order of heading tags
|
|
| title |
before |
shortcuts |
after |
Test with VoiceOver |
**Not everybody is able to see to navigate our websites.** They might use a screen reader to navigate the website and activate the functionality. *We need to confirm that our website is logical and functional when using a screen reader.*
## Use Safari with VoiceOver
MacOS has a screen reader built into it that we can use. I’ve found that it works best with Safari because of the tight OS integration. So run these tests in Safari.
To enable VoiceOver press `⌘-Fn-F5`. Then follow the audible instructions. The first thing you’ll need to press is `⌘⌥⇧↓` to enter the website for navigation.
Here are some of the important VoiceOver navigation commands:
|
| keys |
text |
`⌘ F5` |
Turn VoiceOver on/off |
|
| keys |
text |
`⌃` |
Pause VoiceOver |
|
| keys |
text |
`⌃⌥ ➔` |
Move to next item |
|
| keys |
text |
`⌃⌥ ←` |
Move to previous item |
|
| keys |
text |
`⌃⌥ U` |
Open the rotor (Use arrow keys to navigate) |
|
| keys |
text |
`⌃⌥⌘ H` |
Next heading (+ `Shift` for previous) |
|
| keys |
text |
`⌃⌥⌘ L` |
Next link |
|
| keys |
text |
`⌃⌥⌘ G` |
Next graphic |
|
| keys |
text |
`⌃⌥⌘ X` |
Next list |
|
|
## What problems might be found?
Navigate around your website using VoiceOver and look for the following possible problems:
- [ ] Links that aren’t described
- [ ] Images that are missing descriptions
- [ ] Images that are announced but shouldn’t be
- [ ] Inaccessible content and functionality
- [ ] Confusing order of the content and headings
- [ ] Missing ARIA landmarks for navigation
|
|