Web accessibility means that Websites need to be designed and developed so that people with disabilities can use them. It means that people with disabilities can perceive, understand, navigate, and activate content and components on Websites using their preferred assistive technology (AT) such as a screen reader.
Site owners need to ensure that their Web services and Websites are accessible according to the Israeli standard 5568 (The Standard) that adopted the WCAG 2.0 (Web Content Accessibility Guidelines) of the World Wide Web Consortium (W3C), with a few minor changes. According to the Israeli standard, the required level of accessibility is AA out of three levels A, AA, AAA.
Is your website accessible?
Here are 5 easy steps to test the accessibility of your website. Note that these tests do not replace a professional accessibility audit/review by a digital accessibility specialist.
Before you begin, install the Web Developer plugin on both the Chrome browser and Firefox.
Test 1 – Page Title
The page title is the content displayed on your browser tab. It should accurately describe the contents of the page.
When using assistive technology like a screen reader, when a new webpage is opened, the screen reader reads its title. This is how users know where they are.
How to Test?
- Type in the URL (website address) of the site you want to test.
- Use your mouse to hover over the browser tab to view the full-page title.
What to Test?
- Check that the title text describes the content on the page accurately and briefly.
Test 2 – Keyboard Navigation
One of the accessibility guidelines 2.1 requires content authors to make all functionality on the website, operable with a keyboard. Guideline 2.4 talks about providing users with the ability to find content and to keep track of their location on the page. To achieve that there should be a visible outline around each element that receives keyboard focus. In addition, the navigation order should be logical and compatible with the visual order to preserve the meaning of the content.
How to Test?
- Put aside the use of the mouse for now and only use the keyboard.
- Type in the URL (website address) of the site you want to test.
- Using the Tab key move between the elements on the page from the top of the page.
- Use Shift-Tab to move backwards.
- Use the Enter key or the SPACEBAR to activate a button.
- Use the Enter key to activate a link or an image link.
- When the Tab key lands on a User Interface component such as a drop-down list and a menu bar, use the up and down arrow keys to navigate through the list elements.
- Use the Enter key or the SPACEBAR to select an item from the drop-down list or the menu.
What to Test?
- Check that you can navigate to all active elements on the page such as: menus, links, buttons, form fields, tabs, video controls, and more.
- Check that you can navigate out of any element and that you are not trapped within it.
- Check that there is a clear visual focus around active elements. That means that you can identify the current element in focus.
- Check that the focus order is in the logical order of the reading (in Right-to-Left sites, from the top right of the page to the bottom-left edge).
- Check that you can operate all active components with the keyboard.
- Check that when focusing on and activating a drop-down list, you can use the arrow keys to move through the list options.
Test 3 – Alternative Text
Text alternatives for images is one of the first principles of Web Accessibility, one that is not trivial to implement. The alternative text is primarily provided for people who cannot not see. The text needs to be functional not to describe the image. For example, the alternative text for the print button will be “print” rather than “a printer.”
The alternative text is part of the code and is not shown visually on the page.
If an image conveys important information or operable instructions, it needs an alternative text.
If the image is designed for decoration only or the image text appears already on the page then the alt-text should be empty (alt = “”).
What to Test?
- Check that each image has an alternative text (alt) assigned to it, with suitable text.
- Suitable alternative text is not an exact science. As site owners, you have the tools required to determine how much detail you need to give on an image. If the image conveys important information to the understanding of the content, provide that information accurately.
How to Test?
- Activate the plug-in Web Developer. Select Images, and then Outline Images Without Alt Attribute.
- If the element is decorative only or the same content already appears on the page, make sure that an empty alt-text is set. If the element conveys information, define an appropriate alt-text to the element.
- Click the Web Developer plug-in, select Images , and then Outline Images with Alt Attribute.
- Check the quality of the alt-text.
- If the image is a button, link, hotspot on the map, make sure there is an alternative text and that it truly describes their functionality.
Test 4 – Headings
Webpages are divided into content areas or regions. Each content area has a name or a heading that describes it. For people who use a screen reader, the headings are functioning as site anchors and describe the content hierarchy and structure on the page. Each header has a level from 1 to 6 where Level 1 is the most important and acts as the main heading on the page.
Headings are not only defined visually but must also need to be defined in the code. This information is transmitted by the accessibility API to the AT that conveys it to the user.
What to Test?
- Check that the heading at the top of the page is a level 1 heading.
- All emphasized text that looks like a heading is in fact defined in the code as a heading.
- Content defined as a heading is really acting as a section header.
- The headings hierarchy is meaningful h1…h6.
How to Test?
- Open the Web Developer plug-in. Select Information and then View Document Outline.
- Check that the first heading on the page is define as an H1 heading.
- Check that the outline matches the visual order of headings on the page.
- Check that the hierarchy is compliant with the standard.
Test 5 – Text Resizing
Some people need to enlarge Web content so they can read it better.
Sometimes not only the size of the font is important but also the font typeface, space between the lines and the space between the letters.
Most browsers allow users to change the text size, zoom into text only, or zoom into pages, a function that also magnifies the images on the website.
If the pages in your site are not properly coded/designed, enlarging text or zooming in may cause some of the content elements to disappear, or to stack one on top of the other. The outcome is not favorable for the users who lose content and find it difficult to read and operate elements on the screen.
What to Test?
- Increase the text size on the site.
- Find text that is part of an image and does not increase in size.
- Check that the text does not disappear or disconnect.
- Check that text, images, and other content do not overlap.
- Check that all active elements such as buttons, form fields, and other controls are visible and usable.
- Check that horizontal scrolling is not required to read the content.
How to Test?
- Increase text only in Firefox: From the browser menu, choose View > Zoom > Zoom Text only.
- In the Internet Explorer Browser, select: View > Text Size > Largest
- Only the text should grow.
- Increase the text to 200% and check.