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?

What to Test?

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?

What to Test?

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?

How to Test?

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?

How to Test?

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?

How to Test?

Leave a Reply

Your email address will not be published.